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

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

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

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

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

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

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

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

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

  • ทดสอบฟีเจอร์ด้วยการผสมผสานภาษา/ประเทศที่แตกต่างกันเพื่อตรวจสอบว่ามีการแสดงเนื้อหาใดบ้าง

  • ให้ผู้ใช้ของคุณเปลี่ยนแปลงเนื้อหาที่พวกเขาเห็น ตัวอย่างเช่น คุณสามารถใช้ตัวเลือกภาษา จากนั้นตั้งค่าคุกกี้ 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";

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

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