


Mencipta laluan dinamik ke pengantarabangsaan (i) dengan Astro Build
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.
Masalah
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.
Percubaan dan Kegagalan
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.
Penyelesaian
Selepas mencuba perpustakaan lain (sebutan hormat untuk astro-i18n), saya menjumpai Paraglide, dan ia merupakan pengubah permainan untuk projek saya.
Saya memilih Paraglide kerana:
- Ia selamat jenis, jadi saya boleh menggunakannya dengan TypeScript dan memanfaatkan autolengkap.
- Ia menukar rentetan i18n kepada fungsi, jadi jika kunci rentetan berubah, binaan saya akan gagal, menangkap ralat lebih awal.
- Menggunakan fungsi i18n membolehkan gegaran pokok yang lebih baik, mengalih keluar fungsi yang tidak digunakan.
- Terdapat sambungan Kod VS yang meningkatkan pengalaman pembangunan.
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:
- http://localhost:4321/ms/log masuk
- http://localhost:4321/pt-br/login
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:
- Apabila pengguna mengakses http://localhost:4321/ buat kali pertama tanpa bendera bahasa.
- Jika pengguna menukar bahasa pada laluan tertentu, saya perlu mengekalkannya pada laluan yang sama (cth. /en/create-account harus mengubah hala ke /pt-br/create-account atau /pt-br/criar- account ).
Middleware untuk Pengalihan Bahasa
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(); });
Pemilih Bahasa dengan Laluan Semasa
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>
Pertimbangan
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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
