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

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

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

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

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

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

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

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

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

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

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 หรือโฟลเดอร์ย่อยอื่นๆ คุณสามารถสร้างเนื้อหาแบบ เฉพาะภาษาและ/หรือประเทศหนึ่งๆ

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

Hosting จะรับรหัสประเทศจากที่อยู่ IP ของผู้ใช้ รหัสประเทศ เป็นตัวอักษร 2 ตัว รหัส ISO 3166-1 alpha-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. หน้า 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 (แคนาดา)

ตามลำดับลำดับความสำคัญของการทำงานแบบตรงทั้งหมดและค่าคุณภาพสำหรับ ค่ากำหนดภาษา 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";

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

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