Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

กำหนดค่าสากล (i18n) เขียนใหม่

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

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

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

ตั้งค่าการเขียนซ้ำ i18n

ในการตั้งค่าการเขียนซ้ำ i18n สำหรับไซต์โฮสติ้ง คุณต้องสร้างไดเร็กทอรี "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
    

    ไดเร็กทอรี 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 content" ทั้งหมดของคุณ หากคุณวางโฟลเดอร์ย่อย "i18n content" ทั้งหมดที่รูทของไดเร็กทอรี public ให้ใช้ / สำหรับค่าของ root ท เครื่องหมายทับและต่อท้ายในค่า root ทเป็นทางเลือก

  3. ปรับใช้ "เนื้อหา i18n" ของคุณและกำหนดค่าไปยังไซต์โฮสติ้งของคุณ

คุณสามารถทดสอบการตั้งค่าของคุณโดยใช้ การแทนที่คุกกี้

รหัสประเทศและภาษา

เมื่อตั้งชื่อโฟลเดอร์ย่อย "เนื้อหา i18n" คุณต้องใช้ตัวพิมพ์เล็กสำหรับทั้งรหัสประเทศและภาษา คุณสามารถใช้ค่า ALL (คำนึงถึงตัวพิมพ์เล็กและใหญ่) เพื่อระบุประเทศ ใดก็ได้ (เช่น es_ALL/ ) หรือภาษา ใดก็ได้ (เช่น ALL_ca/ )

โฮสติ้งได้รับรหัสประเทศจากที่อยู่ IP ของผู้ใช้ รหัสประเทศคือรหัส ISO 3166-1 alpha-2 สองตัวอักษร

รหัสภาษาจะได้รับจากส่วนหัวของคำขอ Accept-Language ของผู้ใช้ (โดยปกติแล้ว เว็บเบราว์เซอร์จะตั้งค่าโดยอัตโนมัติ ) คือ รหัส ISO 639-1 โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้รหัสภาษา:

  • เมื่อโฮสติ้งค้นหาว่า "เนื้อหา i18n" ใดที่จะให้บริการ โฮสติ้งจะสั่งภาษาตามค่าคุณภาพในส่วนหัวของ Accept-Language

  • โฮสติ้งจะลดแท็กย่อยของภูมิภาคและประเทศในส่วนหัวของ Accept-Language ดังนั้นรหัสภาษาในชื่อโฟลเดอร์ย่อย "i18n content" จึงไม่สามารถมีแท็กย่อยเหล่านี้ได้ ตัวอย่างเช่น คุณไม่สามารถใช้ es-419 หรือ es-US เป็นรหัสภาษาในชื่อโฟลเดอร์ย่อยได้ แต่คุณสามารถใช้ es ได้

    หากคุณต้องการให้บริการเนื้อหาเฉพาะภูมิภาคหรือประเทศ คุณสามารถสร้างโฟลเดอร์ย่อยที่มีเนื้อหาภาษา-ประเทศที่คุณต้องการสนับสนุน

ลำดับความสำคัญสำหรับ "เนื้อหา i18n"

หากคุณตั้งค่าการเขียนซ้ำ i18n โฮสติ้งจะให้บริการเนื้อหาตามลำดับความสำคัญต่อไปนี้:

  1. เนมสเปซที่สงวนไว้ซึ่งขึ้นต้นด้วยส่วนเส้นทาง /__/*

  2. การเปลี่ยนเส้นทางที่ กำหนดค่า

  3. เนื้อหาคงที่แบบตรงทั้งหมด

    1. รหัสภาษา + รหัสประเทศ (เช่น เนื้อหาจาก fr_ca/ )
      ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในส่วนหัวของ Accept-Language ของคำขอ

    2. รหัสประเทศเท่านั้น (เช่น เนื้อหาจาก ALL_ca/ )

    3. รหัสภาษาเท่านั้น (เช่น เนื้อหาจาก fr/ หรือ es_ALL/ )
      ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในส่วนหัวของ Accept-Language ของคำขอ

    4. เนื้อหาคงที่ "เริ่มต้น" ตรงกันทุกประการ
      นี่คือเนื้อหาที่อยู่นอกไดเร็กทอรี "i18n content" เช่นที่รูทของไดเร็กทอรี public

  4. การเขียนซ้ำที่ กำหนดค่า

  5. การจัดการ 404

    1. i18n 404 หน้า
      ซึ่งเป็นไปตามลำดับความสำคัญเดียวกันกับที่ระบุไว้ด้านบนสำหรับเนื้อหาคงที่แบบตรงทั้งหมด

    2. หน้า 404 แบบกำหนดเอง

    3. หน้าเริ่มต้น 404 (จัดทำโดย Firebase)

ตัวอย่างลำดับความสำคัญ

ลองทำตัวอย่างของเราจากด้านบน เราจะใช้ไดเร็กทอรีตัวอย่างเดียวกันและคำขอตัวอย่าง

  • ตัวอย่างไดเร็กทอรีโปรเจ็กต์โลคัลที่มีไดเร็กทอรี "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
    
  • ตัวอย่างข้อมูลคำขอ

    • รหัสภาษา: fr , en (ฝรั่งเศส จากนั้นอังกฤษ)
      รหัสภาษาจะเรียงลำดับตามค่าคุณภาพในส่วนหัวของ Accept-Language

    • รหัสประเทศ: ca (แคนาดา)

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

  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

  • หน้าที่ร้องขอ: awesome-page.html

โปรดสังเกตสิ่งต่อไปนี้เกี่ยวกับไดเรกทอรีการค้นหาและให้บริการ "เนื้อหา i18n":

  • ไดเร็กทอรี localized-files/ ไม่มี en_ca/ , en_ALL/ หรือ en/ โฟลเดอร์ย่อย ดังนั้นโฮสติ้งจะข้ามรายการลำดับความสำคัญจนกว่าจะพบโฟลเดอร์ย่อยที่ตรงกันสำหรับชุดค่าผสมภาษา-ประเทศของคำขอ

  • แม้ว่าไดเร็กทอรี localized-files/ จะมีโฟลเดอร์ย่อย es_ALL/ แต่ คำขอ ตัวอย่างด้านบนไม่มีรหัสภาษา es หรือ es-foo ดังนั้นโฮสติ้งจะไม่ค้นหา "เนื้อหา i18n" ที่ตรงกับ es

  • โฟลเดอร์ย่อยที่เรียกว่า fr/ และ fr_ALL/ นั้นเทียบเท่ากันจากมุมมองของการตั้งค่าประเทศและภาษาของผู้ใช้ อย่างไรก็ตาม หากมีทั้งสองโฟลเดอร์ย่อย โฮสติ้งจะให้บริการ fr_ALL/ เนื้อหาก่อน fr/ เนื้อหา

คุณสามารถเปลี่ยนเนื้อหาที่ให้บริการได้โดยใช้คุกกี้เพื่อแทนที่ส่วนหัวของประเทศและภาษา

ต่อไปนี้เป็นบางวิธีที่คุณสามารถใช้การแทนที่คุกกี้ได้:

  • ทดสอบคุณสมบัติโดยใช้ภาษา/ประเทศต่างๆ ร่วมกันเพื่อตรวจสอบว่าเนื้อหาใดบ้างที่ให้บริการ

  • ให้ผู้ใช้เปลี่ยนเนื้อหาที่เห็น ตัวอย่างเช่น คุณสามารถใช้ตัวเลือกภาษา จากนั้นตั้งค่าคุกกี้ firebase-language-override ของผู้ใช้ตามนั้น

หากต้องการกำหนดค่าการแทนที่คุกกี้ ให้ตั้งค่าคุกกี้ด้วยชื่อทั้งสองหรืออย่างใดอย่างหนึ่ง: 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";

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

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