Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

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

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

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

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

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

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

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

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

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

  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
    

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

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

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

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

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

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

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

  • เมื่อ Hosting ค้นหาว่า "เนื้อหา 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" เช่นที่รูทของไดเร็กทอรี 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 (แคนาดา)

ตามลำดับความสำคัญที่ตรงกันทุกประการและค่าคุณภาพสำหรับการตั้งค่าภาษา 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/ ดังนั้น Hosting จะข้ามรายการลำดับความสำคัญไปจนกว่าจะพบโฟลเดอร์ย่อยที่ตรงกันสำหรับชุดค่าผสมภาษา-ประเทศของคำขอ

  • แม้ว่าไดเร็กทอรี 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";

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

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