กำหนดค่าการปรับให้เป็นสากล (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 ของ 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";

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

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