กำหนดค่าการปรับให้เป็นสากล (i18n) ที่เขียนใหม่

ใช้การปรับให้เป็นสากล ("i18n rewrites") เพื่อแสดงเนื้อหาที่ต่างออกไป ทั้งนี้ขึ้นอยู่กับประเทศหรือภาษาที่ต้องการของผู้ใช้ ตัวอย่าง การกำหนดค่าที่คุณสามารถตั้งค่าได้:

• แสดงเนื้อหาภาษาฝรั่งเศสเดียวกันแก่ผู้ใช้ทั้งหมดที่ต้องการภาษาฝรั่งเศส (ไม่ว่าอย่างไรก็ตาม ของประเทศ)
  ตัวอย่าง: หน้าแรกที่มีข้อความภาษาฝรั่งเศส

• แสดงเนื้อหาภาษาฝรั่งเศสมาตรฐานแก่ผู้ใช้ที่ต้องการภาษาฝรั่งเศส แต่สำหรับ ผู้ใช้ในแคนาดาที่ชื่นชอบภาษาฝรั่งเศสจะแสดงเนื้อหาภาษาฝรั่งเศสแบบแคนาดา แทน
  ตัวอย่าง: หน้าแรกที่ใช้วลีภาษาฝรั่งเศสมาตรฐาน และหน้าแรกที่มี วลีภาษาฝรั่งเศสแคนาดา

• แสดงเนื้อหาเดียวกันต่อผู้ใช้ทั้งหมดในแคนาดา (ไม่ว่าจะ ภาษา)
  ตัวอย่างเช่น หน้าแรกที่ใช้ "ค่าเริ่มต้น" ของเว็บไซต์ แต่มีภาษา ฟีเจอร์เฉพาะของแคนาดา (เช่น ธีมวันหยุด)

• แสดงเนื้อหาภาษาฝรั่งเศสในแคนาดาต่อผู้ใช้ในแคนาดาที่ต้องการใช้ภาษาฝรั่งเศส
  ตัวอย่าง: หน้าแรกที่ใช้วลีภาษาฝรั่งเศสแคนาดาและคำเฉพาะสำหรับแคนาดา (เช่น ธีมวันหยุด)

โฮสติ้งของ Firebase จะกำหนดประเทศของผู้ใช้จากที่อยู่ IP และ ค่ากำหนดภาษาของผู้ใช้จากส่วนหัวของคำขอ Accept-Language (ปกติแล้ว ตั้งค่าอัตโนมัติโดยเว็บเบราว์เซอร์)

ตั้งค่าการเขียน i18n ใหม่

หากต้องการตั้งค่าการเขียน i18n ใหม่สำหรับเว็บไซต์โฮสติ้ง คุณต้องสร้าง "i18n" เนื้อหา" สำหรับเนื้อหาที่แปลแล้วทั้งหมด จากนั้นเพิ่มแอตทริบิวต์ i18n ไปยังไฟล์ firebase.json เพื่อชี้ไปยัง "เนื้อหา i18n" ใหม่ ไดเรกทอรี

ขั้นตอนโดยละเอียดมีดังนี้

1. สร้างไดเรกทอรีแยกต่างหากภายในโฟลเดอร์ public ของไดเรกทอรีแอปในเครื่อง สำหรับ "เนื้อหา i18n" ของคุณ จากนั้นสร้างโฟลเดอร์ย่อยสำหรับแต่ละภาษาและ ประเทศที่เว็บไซต์ของคุณรองรับ

   ในแต่ละโฟลเดอร์ย่อย ให้เพิ่มเนื้อหาที่เฉพาะเจาะจงสำหรับชุดค่าผสมนั้น เช่น หน้าแรกธีมวันหยุดหรือหน้า 404 สำหรับแต่ละภาษา

   นี่คือตัวอย่างของ "i18n content" ไดเรกทอรีที่ชื่อ localized-files:

   public/
       index.html  // your site's default homepage
       404.html  // your site's custom 404 page
   
       localized-files/
           ALL_ca/
               index.html
           es_ALL/
               index.html
               404.html
           fr/
               index.html
               404.html
           fr_ca/
               index.html
   

   ดูคำขอที่ตรงกันสำหรับเนื้อหาของแต่ละโฟลเดอร์ย่อย

   public/
       // matches requests that aren't specified by your "i18n content" subfolders
       // example: display your homepage in the "default" language for your site with no country-specific features
       index.html  // your site's default homepage
       404.html  // your site's custom 404 page
   
       localized-files/
   
           // matches requests from Canada with any language preference
           // example: display your homepage in the "default" language for your site with a Canada-specific feature
           ALL_ca/
               index.html
   
           // matches requests from any country with a language preference of `es` or `es-foo`
           // example: display your homepage in Spanish with no country-specific features
           es_ALL/
               index.html
               404.html  // your site's custom 404 page in Spanish
   
           // matches requests from any country with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Standard French with no country-specific features
           fr/
               index.html
               404.html  // your site's custom 404 page in French
   
           // matches requests from Canada with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Canadian French and/or with a Canada-specific feature
           fr_ca/
               index.html
   
   

   ไดเรกทอรี localized-files/ มีโฟลเดอร์ย่อยแยกกันสำหรับแต่ละไดเรกทอรี ชุดค่าผสมของภาษาและประเทศซึ่งเว็บไซต์ของคุณรองรับ รูปแบบการตั้งชื่อ สำหรับแต่ละโฟลเดอร์ย่อยต้องอยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้

   • languageCode_countryCode: มีเนื้อหาที่เฉพาะเจาะจงสำหรับผู้ใช้ ที่มีค่ากำหนดภาษานั้น และ รหัสประเทศนั้น

   • languageCode: มีเนื้อหาที่เฉพาะเจาะจงสำหรับผู้ใช้ที่มีเนื้อหาดังกล่าว ภาษาที่ต้องการใช้ แต่เนื้อหาไม่ได้เจาะจงประเทศ หลักๆ เทียบเท่ากับ languageCode_ALL

   ดูส่วนย่อย รหัสประเทศและภาษาด้านล่าง เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับรหัสเหล่านี้ คุณใช้ค่า ALL ได้ (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) เพื่อระบุประเทศใดก็ได้ (เช่น es_ALL/) หรือประเทศใดก็ได้ ภาษา (เช่น ALL_ca/)

   ไฟล์ในโฟลเดอร์ย่อยไม่จำเป็นต้องมีไฟล์ที่คล้ายกันใน public หรือโฟลเดอร์ย่อยอื่นๆ คุณสามารถสร้างเนื้อหาแบบ เฉพาะภาษาและ/หรือประเทศหนึ่งๆ

2. เพิ่มแอตทริบิวต์ i18n ลงในไฟล์ firebase.json และระบุ ที่มี "เนื้อหา i18n" ของคุณ ดูต่อตัวอย่างของเรากัน

   // firebase.json
   
   "hosting": {
   
     "public": "public",
   
     "ignore": [
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
     ],
   
     "i18n": {
       "root": "/localized-files"  // directory that contains your "i18n content"
     }
   
     ...
   }
   

   ไดเรกทอรีที่ระบุสำหรับ root ต้องเป็นชื่อของไดเรกทอรีที่ มี "เนื้อหา i18n" ทั้งหมดของคุณ โฟลเดอร์ย่อย หากคุณวางตำแหน่ง "คอนเทนต์ i18n" โฟลเดอร์ย่อยที่รูทของไดเรกทอรี public ให้ใช้ / สำหรับค่าของ root เครื่องหมายทับนำหน้าและต่อท้ายในค่า root จะระบุหรือไม่ก็ได้

3. ทำให้ "เนื้อหา i18n" ใช้งานได้ และกำหนดค่าให้เว็บไซต์โฮสติ้ง

คุณทดสอบการตั้งค่าได้โดยใช้การลบล้างคุกกี้

รหัสประเทศและภาษา

เมื่อตั้งชื่อ "คอนเทนต์ i18n" โฟลเดอร์ย่อย คุณต้องใช้ตัวพิมพ์เล็กสำหรับทั้ง 2 ประเทศ และรหัสภาษา คุณสามารถใช้ค่า ALL (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) เพื่อระบุ ประเทศใดก็ได้ (เช่น es_ALL/) หรือภาษาใดก็ได้ (เช่น ALL_ca/)

โฮสติ้งจะรับรหัสประเทศจากที่อยู่ IP ของผู้ใช้ รหัสประเทศ เป็นตัวอักษร 2 ตัว รหัส ISO 3166-1 alpha-2

รหัสภาษาจะได้รับจากส่วนหัวของคำขอ Accept-Language ของผู้ใช้ (โดยปกติ ตั้งค่าอัตโนมัติโดยเว็บเบราว์เซอร์) รวมถึงรหัส ISO 639-1 โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้รหัสภาษา

• เมื่อโฮสติ้งค้นหา "i18n content" ใด แสดง แต่จะเรียงลำดับ ภาษาตามค่าคุณภาพในส่วนหัว Accept-Language

• โฮสติ้งจะนำแท็กย่อยระดับภูมิภาคและประเทศใน Accept-Language ออก ดังนั้นรหัสภาษาใน "เนื้อหา i18n" ชื่อโฟลเดอร์ย่อยไม่สามารถ มีแท็กย่อยเหล่านี้ ตัวอย่างเช่น ไม่สามารถใช้ es-419 หรือ es-US เป็น รหัสภาษาในชื่อโฟลเดอร์ย่อย แต่คุณใช้ es ได้

  หากต้องการแสดงเนื้อหาตามภูมิภาคหรือประเทศที่เฉพาะเจาะจง คุณสามารถสร้าง โฟลเดอร์ย่อยที่มีเนื้อหาเฉพาะภาษา-ประเทศที่คุณต้องการ การสนับสนุน

  ดูตัวอย่างเพื่อสนับสนุนเนื้อหาที่เฉพาะเจาะจงระดับภูมิภาคหรือประเทศ

  แสดงเนื้อหาภาษาสเปนที่เกี่ยวข้องกับสเปนเทียบกับ ประเทศอื่นๆ (เลียนแบบพฤติกรรมของ es-419)

  ในตัวอย่างนี้ คำขอจากสเปนที่มีค่ากำหนดภาษาเป็น es, es-es หรือแม้แต่ es-419 จะได้รับเนื้อหาจาก es_es/ โฟลเดอร์ย่อยเนื่องจากโฮสติ้งถือว่ารหัสภาษาเหล่านั้นทั้งหมดเป็น es

  คำขอจากสหรัฐอเมริกา เม็กซิโก หรือประเทศอื่นๆ ที่มี ค่ากำหนดภาษาของ es-419 จะได้รับเนื้อหาจาก es_ALL/ โฟลเดอร์ย่อย เนื่องจากโฮสติ้งถือว่า es-419 เป็น es

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Spain with a language preference of `es` or `es-foo`
          es_es/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo`
          es_ALL/
              index.html
  

  แสดงเนื้อหาภาษาสเปนสำหรับ บางประเทศ

  ในตัวอย่างนี้ คำขอจากเม็กซิโกที่มีค่ากำหนดภาษาเป็น es-419 จะได้รับเนื้อหาจากโฟลเดอร์ย่อย es_mx/ เนื่องจาก โฮสติ้งจะถือว่ารหัสภาษา es-419 เป็น es

  อย่างไรก็ตาม คำขอจากสหรัฐอเมริกาที่มีค่ากำหนดภาษาดังนี้ es-419 จะได้รับเนื้อหาจากโฟลเดอร์ย่อย es_ALL/ เนื่องจาก โฮสติ้งจะถือว่า es-419 เป็น es และไม่มีโฟลเดอร์ย่อย es_us/

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Argentina with a language preference of `es` or `es-foo` (mimics behavior of `es-ar` header tag)
          es_ar/
              index.html
  
          // matches requests from Spain with a language preference of `es` or `es-foo` (mimics behavior of `es-es` header tag)
          es_es/
              index.html
  
          // matches requests from Mexico with a language preference of `es` or `es-foo` (mimics behavior of `es-mx` header tag)
          es_mx/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo` (mimics behavior of `es-419` header tag)
          es_ALL/
              index.html
  

การจัดลำดับความสำคัญของ "เนื้อหา i18n"

หากคุณตั้งค่าการเขียน i18n ใหม่ โฮสติ้งจะแสดงเนื้อหาตามรายการต่อไปนี้ ลำดับความสำคัญ:

1. เนมสเปซที่สงวนไว้ซึ่งเริ่มต้นด้วยกลุ่มเส้นทาง /__/*

2. การเปลี่ยนเส้นทางที่กำหนดค่าไว้

3. เนื้อหาแบบคงที่ที่ตรงกันทั้งหมด

   1. รหัสภาษา + รหัสประเทศ (เช่น เนื้อหาจาก fr_ca/)
      ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในคำขอ ส่วนหัว Accept-Language

   2. รหัสประเทศเท่านั้น (เช่น เนื้อหาจาก ALL_ca/)

   3. โค้ดภาษาเท่านั้น (เช่น เนื้อหาจาก fr/ หรือ es_ALL/)
      ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในคำขอ ส่วนหัว Accept-Language

   4. "ค่าเริ่มต้น" เนื้อหาแบบคงที่ที่ตรงกันทั้งหมด
      นี่คือเนื้อหาที่อยู่นอก "เนื้อหา i18n" เช่น ที่ รากของไดเรกทอรี public

4. กำหนดค่าการเขียนใหม่แล้ว

5. การจัดการกับข้อผิดพลาด 404

   1. หน้า i18n 404
      เป็นไปตามลำดับความสำคัญเดียวกันกับที่ระบุไว้ข้างต้นสำหรับการทำงานแบบตรงทั้งหมด เนื้อหาแบบคงที่

   2. หน้า 404 ที่กำหนดเอง

   3. หน้า 404 เริ่มต้น (ระบุโดย Firebase)

ตัวอย่างสำหรับลำดับความสำคัญ

มาดูตัวอย่างต่อจากด้านบนกัน เราจะใช้ไดเรกทอรีตัวอย่างเดียวกันและ คำขอตัวอย่าง

• ตัวอย่างไดเรกทอรีโปรเจ็กต์ในเครื่องที่มี "เนื้อหา i18n" ไดเรกทอรี (ชื่อว่า localized-files)

  public/
      index.html  // your site's default homepage
      404.html  // your site's custom 404 page
  
      localized-files/
          ALL_ca/
              index.html
          es_ALL/
              index.html
              404.html
          fr/
              index.html
              404.html
          fr_ca/
              index.html
  

• ตัวอย่างข้อมูลคำขอ

  • รหัสภาษา: fr, en (ฝรั่งเศส จากนั้นจึงอังกฤษ)
    รหัสภาษาจะเรียงลำดับตามค่าคุณภาพใน ส่วนหัว Accept-Language

  • รหัสประเทศ: ca (แคนาดา)

ตามลำดับลำดับความสำคัญของการทำงานแบบตรงทั้งหมดและค่าคุณภาพสำหรับ ค่ากำหนดภาษา โฮสติ้งจะค้นหาไดเรกทอรีสำหรับ ตามลำดับต่อไปนี้

1. public/localized-files/fr_ca/

2. public/localized-files/en_ca/

3. public/localized-files/ALL_ca/

4. public/localized-files/fr_ALL/

5. public/localized-files/fr/

6. public/localized-files/en_ALL/

7. public/localized-files/en/

8. public/

9. การจัดการกับข้อผิดพลาด 404

หน้าเว็บใดที่จะแสดงต่อผู้ใช้

• หน้าที่ขอ: index.html

  คำตอบ

  index.html จากโฟลเดอร์ย่อย fr_ca/

  เนื่องจากโฮสติ้งค้นหาโฟลเดอร์ย่อย fr_ca/ ก่อน ระบบจึงจะเห็น ตรงกับ index.html ในโฟลเดอร์ย่อยนั้น

• หน้าที่ขอ: awesome-page.html

  คำตอบ

  404.html จากโฟลเดอร์ย่อย fr/

  โฮสติ้งจะค้นหาไดเรกทอรีทั้งหมด (รวมถึง "คอนเทนต์ i18n" โฟลเดอร์ย่อยและไดเรกทอรีราก) ตามลำดับความสำคัญสำหรับ การทำงานแบบตรงทั้งหมด แต่ไม่มีรายการที่ตรงกันสำหรับ awesome-page.html

  ดังนั้น โฮสติ้งจะเริ่มการจัดการ 404 ซึ่งเป็นไปตาม i18n เดียวกัน ลำดับความสำคัญเป็นการค้นหาที่ทำงานแบบตรงทั้งหมด โฟลเดอร์ย่อย fr/ คือรายการแรก โฟลเดอร์ย่อยที่มีการค้นหาซึ่งมีหน้า 404

โปรดทราบข้อมูลต่อไปนี้เกี่ยวกับการค้นหาและให้บริการของ "เนื้อหา i18n" ไดเรกทอรี:

• ไดเรกทอรี localized-files/ ไม่มี en_ca/ อยู่ en_ALL/ หรือ en/ โฟลเดอร์ย่อย ดังนั้นโฮสติ้งจะข้าม รายการสำคัญจนกว่าจะพบโฟลเดอร์ย่อยที่ตรงกันกับคำขอ ชุดค่าผสมของภาษา-ประเทศ

• แม้ว่าไดเรกทอรี localized-files/ จะมี es_ALL/ โฟลเดอร์ย่อย ตัวอย่าง คำขอ ข้างต้นไม่มี es หรือ es-foo รหัสภาษา ดังนั้นโฮสติ้งจะไม่ค้นหา "เนื้อหา i18n" นั่น ตรงกับ es

• โฟลเดอร์ย่อยที่เรียกว่า fr/ และ fr_ALL/ เทียบเท่ากับจากมุมมองของ ค่ากำหนดประเทศและภาษาของผู้ใช้ อย่างไรก็ตาม หากโฟลเดอร์ย่อยทั้ง 2 โฟลเดอร์ อยู่แล้ว โฮสติ้งจะแสดงเนื้อหา fr_ALL/ ก่อนเนื้อหา fr/

ลบล้างภาษาและรหัสประเทศด้วยคุกกี้

คุณสามารถเปลี่ยนเนื้อหาที่จะแสดงได้โดยใช้คุกกี้เพื่อลบล้างประเทศ และส่วนหัวภาษา

ตัวอย่างวิธีใช้การลบล้างคุกกี้มีดังนี้

• ทดสอบฟีเจอร์ด้วยชุดค่าผสมของภาษา/ประเทศต่างๆ เพื่อตรวจสอบว่า เนื้อหานั้น

• ให้ผู้ใช้เปลี่ยนแปลงเนื้อหาที่ตนเห็น ตัวอย่างเช่น คุณสามารถ ใช้เครื่องมือเลือกภาษา แล้วตั้งค่า firebase-language-override ให้สอดคล้องกัน

หากต้องการกำหนดค่าการลบล้างคุกกี้ ให้ตั้งค่าคุกกี้ที่มีชื่อต่อไปนี้ทั้ง 2 ชื่อหรือชื่อใดชื่อหนึ่ง firebase-country-override และ firebase-language-override ตัวอย่างเช่น ข้อมูลโค้ด JavaScript ต่อไปนี้จะแทนที่รหัสประเทศเป็น ca และ ส่วนหัว Accept-Language จะเป็น fr,en:

document.cookie = "firebase-country-override=ca";
document.cookie = "firebase-language-override=fr,en";

การแทนที่คุกกี้ภาษาจะต้องเป็นรายการรหัสภาษาที่คั่นด้วยเครื่องหมายจุลภาคใน ลำดับค่ากำหนด โดยไม่มีแท็กย่อยหรือค่าคุณภาพ

การลบล้างคุกกี้จะไม่ปรากฏในบันทึก