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

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

document.cookie = "firebase-country-override=ca";
document.cookie = "firebase-language-override=fr,en";