Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

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

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

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

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

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

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

นี่คือขั้นตอนโดยละเอียด:

  1. ในสารบบแอปในท้องถิ่นของ public โฟลเดอร์ให้ไดเรกทอรีที่แยกต่างหากสำหรับ "เนื้อหา i18n" ของคุณแล้วสร้างโฟลเดอร์ย่อยสำหรับภาษาและประเทศแต่ละชุดการสนับสนุนจากเว็บไซต์ของคุณ

    ในแต่ละโฟลเดอร์ย่อย ให้เพิ่มเนื้อหาเฉพาะสำหรับชุดค่าผสมนั้น เช่น หน้าแรกธีมวันหยุดหรือหน้า 404 เฉพาะภาษา

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

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

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

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

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

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

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

  • เมื่อ Hosting ค้นหาที่ "เนื้อหา i18n" ที่จะให้บริการก็สั่งภาษาที่ขึ้นอยู่กับค่าที่มีคุณภาพใน Accept-Language ส่วนหัว

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

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

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

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

  1. namespaces ลิขสิทธิ์ที่เริ่มต้นด้วย /__/* ส่วนของเส้นทาง

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

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

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

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

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

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

  4. การกำหนดค่า ปรับเปลี่ยน

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

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

    2. ที่กำหนดเอง 404 หน้า

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

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

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

  • ไดเรกทอรีโครงการท้องถิ่นตัวอย่างด้วย "เนื้อหา i18n directory" (เรียกว่า 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

  • หน้าขอ: awesome-page.html

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

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

  • แม้ว่าจะ localized-files/ ไดเรกทอรีมี es_ALL/ โฟลเดอร์ย่อยขอตัวอย่างข้างต้นไม่รวม es หรือ es-foo รหัสภาษาดังนั้น Hosting จะไม่ค้นหาสำหรับ "เนื้อหา 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";

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

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