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

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

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

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

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

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

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

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

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

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

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

   ในโฟลเดอร์ย่อยแต่ละโฟลเดอร์ ให้เพิ่มเนื้อหาที่เจาะจงสำหรับชุดค่าผสมนั้น เช่น หน้าแรกธีมวันหยุดหรือหน้า 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 หรือโฟลเดอร์ย่อยอื่นๆ คุณสร้างเนื้อหาที่เจาะจงภาษาและ/หรือประเทศได้ทั้งหมด

   หมายเหตุ: โปรดอ่าน การจัดลำดับความสำคัญของ "เนื้อหา i18n" ด้านล่างเพื่อดูลำดับที่ Hosting จะแสดงไฟล์ "เนื้อหา i18n"

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"

หากคุณตั้งค่าการเขียนใหม่สำหรับ 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 ที่แปลแล้ว
      ลำดับความสำคัญจะเหมือนกับที่ระบุไว้ข้างต้นสำหรับเนื้อหาแบบคงที่ที่ตรงกันทั้งหมด

   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 content"

• ไดเรกทอรี 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 ชื่อหรือ 1 ชื่อต่อไปนี้ 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";

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

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