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

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

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

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

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

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

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

ตั้งค่าการเขียนใหม่เพื่อรองรับการใช้งานในหลายภาษา

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

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

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

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

   ตัวอย่างไดเรกทอรี "เนื้อหา 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

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

   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" และการกำหนดค่าไปใช้กับเว็บไซต์ Hosting

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

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

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

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

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

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

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

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

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

  แสดงเนื้อหาภาษาสเปนที่ใช้ได้กับสเปนเทียบกับ ประเทศอื่นๆ ทั้งหมด (เลียนแบบลักษณะการทำงานของ es-419)

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

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

  อย่างไรก็ตาม คำขอจากสหรัฐอเมริกาที่มีค่ากำหนดภาษาเป็น es-419 จะได้รับเนื้อหาจากโฟลเดอร์ย่อย es_ALL/ เนื่องจาก Hosting ถือว่า 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"

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

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

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

3. เนื้อหาคงที่ที่ตรงกันทุกประการ

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

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

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

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

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

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

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

   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 (แคนาดา)

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

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/

  เนื่องจาก Hosting จะค้นหาโฟลเดอร์ย่อย fr_ca/ ก่อน ระบบจึงจะพบรายการที่ ตรงกันทุกประการสำหรับ index.html ในโฟลเดอร์ย่อยนั้น

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

  คำตอบ

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

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

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

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

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

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

• โฟลเดอร์ย่อยที่ชื่อว่า fr/ และ fr_ALL/ จะเทียบเท่ากันจากมุมมองของค่ากำหนดประเทศและภาษาของผู้ใช้ อย่างไรก็ตาม หากมีทั้ง 2 โฟลเดอร์ย่อย อยู่ Hosting จะแสดงเนื้อหา 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";

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

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