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

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

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

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

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

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

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

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

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

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

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

   หมายเหตุ: โปรดดู ลำดับความสำคัญสำหรับ "เนื้อหา 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 ของ 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";

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

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