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:

1. Apabila pengguna mengakses http://localhost:4321/ buat kali pertama tanpa bendera bahasa.
2. 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!