ใช้การเขียนซ้ำแบบสากล ("i18n เขียนซ้ำ") เพื่อให้บริการเนื้อหาที่แตกต่างกัน ขึ้นอยู่กับประเทศของผู้ใช้หรือภาษาที่ต้องการ นี่คือตัวอย่างการกำหนดค่าที่คุณสามารถตั้งค่าได้:
ให้บริการเนื้อหาภาษาฝรั่งเศสแบบเดียวกันแก่ผู้ใช้ ทุก คนที่ชอบภาษาฝรั่งเศส (โดยไม่คำนึงถึงประเทศ)
ตัวอย่าง: หน้าแรกที่มีข้อความภาษาฝรั่งเศสให้บริการเนื้อหาภาษาฝรั่งเศสมาตรฐานแก่ผู้ใช้ที่ชอบภาษาฝรั่งเศส แต่สำหรับผู้ใช้ชาว แคนาดา ที่ชอบภาษาฝรั่งเศส ให้ให้บริการเนื้อหาภาษาฝรั่งเศสแบบแคนาดาแทน
ตัวอย่าง: หน้าแรกที่มีการใช้ถ้อยคำภาษาฝรั่งเศสแบบมาตรฐานกับหน้าแรกที่ใช้ถ้อยคำภาษาฝรั่งเศสแบบแคนาดาให้บริการเนื้อหาเดียวกันแก่ผู้ใช้ชาวแคนาดา ทุกคน (ไม่คำนึงถึงการตั้งค่าภาษาของพวกเขา)
ตัวอย่าง: หน้าแรกที่มีภาษา "เริ่มต้น" ของเว็บไซต์ของคุณ แต่มีคุณลักษณะเฉพาะของแคนาดา (เช่น ธีมวันหยุด)ให้บริการเนื้อหาภาษาฝรั่งเศสแบบแคนาดาแก่ผู้ใช้ชาวแคนาดาที่ชื่นชอบภาษาฝรั่งเศส
ตัวอย่าง: หน้าแรกที่มีวลีภาษาฝรั่งเศสแบบแคนาดาและคุณลักษณะเฉพาะของแคนาดา (เช่น ธีมวันหยุด)
Firebase Hosting จะกำหนดประเทศของผู้ใช้จากที่อยู่ IP และค่ากำหนดภาษาของผู้ใช้จากส่วนหัวคำขอ Accept-Language
(โดยปกติ แล้วเว็บเบราว์เซอร์จะตั้งค่าโดยอัตโนมัติ )
ตั้งค่าการเขียนซ้ำ i18n
หากต้องการตั้งค่าการเขียนซ้ำ i18n สำหรับไซต์โฮสติ้งของคุณ คุณต้องสร้างไดเรกทอรี "เนื้อหา i18n" สำหรับเนื้อหาที่แปลเป็นภาษาท้องถิ่นทั้งหมดของคุณ จากนั้นเพิ่มแอตทริบิวต์ i18n
ลงในไฟล์ firebase.json
เพื่อให้ชี้ไปที่ไดเรกทอรี "เนื้อหา i18n" ใหม่ของคุณ
นี่คือขั้นตอนโดยละเอียด:
ภายในโฟลเดอร์
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
หรือโฟลเดอร์ย่อยอื่นๆ คุณสามารถสร้างเนื้อหาที่เฉพาะเจาะจงสำหรับภาษาและ/หรือประเทศโดยเฉพาะได้เพิ่มแอตทริบิวต์
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
เป็นทางเลือกปรับใช้ "เนื้อหา 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
ได้หากคุณต้องการให้บริการเนื้อหาระดับภูมิภาคหรือประเทศที่เฉพาะเจาะจง คุณสามารถสร้างโฟลเดอร์ย่อยที่มีเนื้อหาภาษา-ประเทศที่คุณต้องการสนับสนุนได้
ในตัวอย่างนี้ คำขอจากสเปนที่มีการตั้งค่าภาษา
es
,es-es
หรือแม้แต่es-419
จะได้รับเนื้อหาจากโฟลเดอร์ย่อยes_es/
เนื่องจากโฮสติ้งถือว่ารหัสภาษาเหล่านั้นทั้งหมดเป็นes
คำขอจากสหรัฐอเมริกา เม็กซิโก หรือประเทศอื่นๆ ที่กำหนดภาษา
es-419
จะได้รับเนื้อหาจากโฟลเดอร์ย่อยes_ALL/
เนื่องจากโฮสติ้งถือว่า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/
เนื่องจากโฮสติ้งถือว่ารหัสภาษาes-419
เป็นes
อย่างไรก็ตาม คำขอจากสหรัฐอเมริกาที่มีการตั้งค่าภาษา
es-419
จะได้รับเนื้อหาจากโฟลเดอร์ย่อยes_ALL/
เนื่องจากโฮสติ้งถือว่า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
ลำดับความสำคัญสำหรับ "เนื้อหา i18n"
หากคุณตั้งค่าการเขียนซ้ำ i18n โฮสติ้งจะให้บริการเนื้อหาตามลำดับความสำคัญต่อไปนี้:
เนมสเปซที่สงวนไว้ซึ่งขึ้นต้นด้วยส่วนเส้นทาง
/__/*
การเปลี่ยนเส้นทาง ที่กำหนดค่าไว้
เนื้อหาคงที่ที่ตรงทั้งหมด
รหัสภาษา + รหัสประเทศ (เช่น เนื้อหาจาก
fr_ca/
)
ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในส่วนหัวAccept-Language
ของคำขอรหัสประเทศเท่านั้น (เช่น เนื้อหาจาก
ALL_ca/
)รหัสภาษาเท่านั้น (เช่น เนื้อหาจาก
fr/
หรือes_ALL/
)
ลำดับเป็นไปตามค่าคุณภาพสำหรับแต่ละภาษาในส่วนหัวAccept-Language
ของคำขอเนื้อหาคงที่แบบตรงทั้งหมด "ค่าเริ่มต้น"
นี่คือเนื้อหาที่อยู่นอกไดเร็กทอรี "เนื้อหา i18n" เช่นเดียวกับที่รูทของไดเร็กทอรีpublic
กำหนด ค่าการเขียนใหม่ แล้ว
404 การจัดการ
i18n 404 หน้า
ซึ่งเป็นไปตามลำดับความสำคัญเดียวกันกับที่แสดงไว้ด้านบนสำหรับเนื้อหาคงที่ที่ตรงกันทุกประการหน้า 404 แบบกำหนดเอง
หน้า 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
(แคนาดา)
ตามลำดับลำดับความสำคัญที่ตรงกันทุกประการและค่าคุณภาพของการตั้งค่าภาษา โฮสติ้งจะค้นหาไดเรกทอรีสำหรับหน้าที่ร้องขอตามลำดับต่อไปนี้
public/localized-files/fr_ca/
public/localized-files/en_ca/
public/localized-files/ALL_ca/
public/localized-files/fr_ALL/
public/localized-files/fr/
public/localized-files/en_ALL/
public/localized-files/en/
public/
404 การจัดการ
หน้าใดที่จะให้บริการแก่ผู้ใช้?
หน้าที่ร้องขอ:
index.html
index.html
จากโฟลเดอร์ย่อยfr_ca/
เนื่องจาก Hosting ค้นหาโฟลเดอร์ย่อย
fr_ca/
ก่อน จึงจะค้นหารายการที่ตรงกันทุกประการสำหรับindex.html
ในโฟลเดอร์ย่อยนั้นหน้าที่ขอ:
awesome-page.html
404.html
จากfr/
โฟลเดอร์ย่อยขั้นแรกโฮสติ้งจะค้นหาไดเรกทอรีทั้งหมด (รวมถึงโฟลเดอร์ย่อย "เนื้อหา i18n" และไดเรกทอรีรากทั้งหมด) ตามลำดับความสำคัญสำหรับการจับคู่แบบตรงทั้งหมด แต่ไม่มีการจับคู่แบบตรงทั้งหมดสำหรับ
awesome-page.html
ดังนั้นโฮสติ้งจะเริ่มการจัดการ 404 ซึ่งเป็นไปตามลำดับความสำคัญ i18n เช่นเดียวกับการค้นหาแบบตรงทั้งหมด โฟลเดอร์ย่อย
fr/
เป็นโฟลเดอร์ย่อยแรกที่ค้นหาซึ่งมีหน้า 404
โปรดสังเกตสิ่งต่อไปนี้เกี่ยวกับการค้นหาและให้บริการของไดเร็กทอรี "เนื้อหา 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";
การแทนที่คุกกี้ภาษาจะต้องเป็นรายการรหัสภาษาที่คั่นด้วยเครื่องหมายจุลภาคตามลำดับการตั้งค่า โดยไม่มีแท็กย่อยหรือค่าคุณภาพ
การแทนที่คุกกี้จะไม่ปรากฏในบันทึก