Jika anda ingin membaca artikel ini dalam bahasa Inggeris pergi ke sini
Baru-baru ini saya mula belajar Astro untuk mencipta projek gaya papan pemuka.
Saya benar-benar mahu melaksanakan pengantarabangsaan (i18n) dalam projek ini—matlamatnya ialah sesiapa sahaja boleh menggunakannya, tanpa mengira bahasa.
sokongan i18n di Astro sangat bagus. Ia berfungsi serupa dengan Next.js atau mana-mana rangka kerja lain dengan penghalaan berdasarkan struktur fail/folder.
Jadi, jika kami ingin mempunyai halaman dalam bahasa Inggeris dan halaman yang sama dalam bahasa Portugis, kami boleh menyusun fail kami seperti ini:
. └── src/ └── pages/ ├── en/ │ ├── login.astro │ └── dashboard.astro └── pt-br/ ├── login.astro └── dashboard.astro
Dan setiap halaman mempunyai rentetan i18n sendiri—sejuk!
Tetapi di sinilah masalah saya bermula: Saya tidak mahu mengklon semua halaman saya; Saya cuma mahu menukar rentetan pada halaman ini.
Saya memerlukan sesuatu seperti /[any-language-flag]/all-my-routes.
Anda mungkin bertanya, "Mengapa tidak menggunakan sesuatu seperti react-intl?" Jawapan saya ialah saya ingin memanfaatkan sepenuhnya enjin Astro, terutamanya untuk SSG/SSR, dan mengelakkan sebarang komponen bahagian pelanggan. Secara amnya, rangka kerja ini menggunakan Konteks React, yang dipaparkan hanya pada bahagian pelanggan.
Pertama sekali, saya membaca resipi Astro tentang i18n dan melihat beberapa perpustakaan komuniti untuk menyelesaikan masalah ini.
Perpustakaan pertama yang saya cuba ialah astro-i18next, dan ia kelihatan seperti yang saya perlukan!
Berdasarkan tatasusunan dalam fail konfigurasi, astro-i18next menjana halaman i18n saya pada masa binaan, jadi saya hanya perlu mengekod sekali sahaja dan tidak bimbang tentang pengklonan halaman.
Masalahnya ialah astro-i18next nampaknya diarkibkan atau tidak lagi diselenggara. Terdapat banyak masalah dan komitmen terakhir adalah lebih setahun yang lalu.
Selepas mencuba perpustakaan lain (sebutan hormat untuk astro-i18n), saya menjumpai Paraglide, dan ia merupakan pengubah permainan untuk projek saya.
Saya memilih Paraglide kerana:
Nota: Anda juga boleh menggunakan Paraglide dalam projek JS dan ia juga menyokong Next.js.
Selepas pemasangan dan konfigurasi, saya menggunakan mesej saya seperti ini:
--- import * as m from "../paraglide/messages.js"; --- <h1>{m.hello({ name: "Alan" })}</h1>
Walau bagaimanapun, ini tidak menyelesaikan masalah penghalaan saya—saya masih mengklonkan halaman saya untuk setiap bahasa yang ingin saya tambahkan.
Untuk menyelesaikan masalah ini, saya menukar projek saya untuk menggunakan laluan dinamik dalam laluan akar, jadi semua laluan saya kini bermula dengan bendera bahasa.
Struktur folder saya kelihatan seperti ini:
. └── src/ └── pages/ └── [lang]/ ├── login.astro └── dashboard.astro
Selepas perubahan ini, Paraglide boleh mendapatkan bahasa parameter laluan secara automatik:
Kini saya boleh menambah bahasa baharu hanya dengan mengkonfigurasinya dalam astro.config.ts dan menterjemah fail rentetan saya.
Tetapi saya masih mempunyai dua masalah untuk diselesaikan:
Untuk menyelesaikan masalah ubah hala bahasa pertama, saya menggunakan perisian tengah Astro.
Dalam src/middleware/index.ts, saya menambahkan kod ini:
import { defineMiddleware } from 'astro:middleware'; import { languageTag, setLanguageTag, type AvailableLanguageTag, } from '../paraglide/runtime'; export const onRequest = defineMiddleware((context, next) => { // Obter o idioma do parâmetro da URL const lang = context.params.lang; // Se mudou if (lang !== languageTag()) { setLanguageTag(lang as AvailableLanguageTag); // Redirecionar para o idioma alterado ou padrão (en) return context.redirect(`/${lang ?? 'en'}`); } return next(); });
Untuk memastikan pengguna berada di laluan yang sama apabila menukar bahasa, saya menambah komponen ini:
--- import { languageTag } from '../paraglide/runtime'; const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, ''); --- <ul> <li> <a href={`/pt-br/${pathName}`}>Ir para Português</a> </li> <li> <a href={`/en/${pathName}`}>Go to English</a> </li> </ul>
Selain itu, kami juga boleh menterjemah mesej ini, menggunakan parameter kedua dalam fungsi mesej Paraglide:
<ul> <li> <a href={`/pt-br/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'pt-br' })}</a> </li> <li> <a href={`/en/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'en' })}</a> </li> </ul>
Saya tidak menganggap penyelesaian saya sebagai yang terbaik, lebih-lebih lagi saya masih belajar Astro, jadi mungkin ada penyelesaian lain. Jika anda tahu mana-mana, sila komen, dan saya akan cuba :)
Terima kasih kerana membaca artikel ini! Jika anda mempunyai sebarang soalan, komen, saya dengan senang hati akan menjawab.
Atas ialah kandungan terperinci Mencipta laluan dinamik ke pengantarabangsaan (i) dengan Astro Build. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!