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