Mencipta bahasa laluan dinamik untuk i dalam Astro Build

Sekarang anda boleh menggunakan bahasa Portugês clique aqui

Baru-baru ini, saya mula belajar Astro untuk mencipta projek seperti papan pemuka.

Saya benar-benar mahu melaksanakan pengantarabangsaan (i18n) dalam projek ini—ideanya ialah semua orang harus dapat menggunakannya, tanpa mengira bahasa mereka.

Masalah

Sokongan i18n Astro agak baik. Ia berfungsi sama seperti 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—bagus!

Tetapi di sinilah masalah saya bermula: Saya tidak mahu mengklon semua halaman saya; Saya hanya mahu menukar rentetan pada halaman tersebut.

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 pelanggan. Secara amnya, rangka kerja ini menggunakan Konteks React, yang hanya dipaparkan pada bahagian pelanggan.

Mencuba dan Gagal

Pertama sekali, saya membaca resipi Astro tentang i18n dan melihat beberapa perpustakaan komuniti untuk menyelesaikan masalah ini.

Perpustakaan pertama yang saya uji 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 perlu risau tentang pengklonan halaman.

Masalahnya ialah astro-i18next nampaknya diarkibkan atau tidak lagi diselenggara. Terdapat banyak isu, dan komitmen terakhir adalah lebih setahun yang lalu.

Penyelesaian

Selepas mencuba perpustakaan lain (sebutan hormat kepada 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 mendapat manfaat daripada 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 menyelesaikannya, saya menukar projek saya untuk menggunakan laluan dinamik dalam laluan akar, jadi semua laluan saya kini bermula dengan bendera bahasa.

Struktur folder saya bertukar menjadi ini:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

Selepas perubahan ini, Paraglide boleh mendapatkan bahasa secara automatik daripada parameter laluan:

• http://localhost:4321/ms/log masuk
• http://localhost:4321/pt-br/login

Kini, saya boleh menambah bahasa baharu hanya dengan menetapkannya dalam astro.config.ts dan menterjemah fail rentetan saya.

Tetapi saya masih mempunyai dua lagi isu untuk diselesaikan:

1. Apabila pengguna mula-mula mengakses http://localhost:4321/ tanpa bendera bahasa.
2. Jika pengguna menukar bahasa pada laluan tertentu, saya perlu mengekalkan mereka pada laluan yang sama (cth., /en/create-account harus mengubah hala ke /pt-br/create-account atau /pt-br/criar -conta).

Middleware untuk Language Redirect

Untuk menyelesaikan isu pertama ubah hala bahasa, 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) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

Pemilih Bahasa dengan Laluan Semasa

Untuk memastikan pengguna berada pada laluan yang sama apabila mereka 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, terutamanya kerana saya masih belajar Astro, jadi mungkin ada penyelesaian lain. Jika anda tahu mana-mana, sila komen, dan saya akan mencubanya :)

Terima kasih kerana membaca artikel ini! Jika anda mempunyai sebarang soalan, sila komen, saya dengan senang hati akan membalas.

Atas ialah kandungan terperinci Mencipta bahasa laluan dinamik untuk i dalam Astro Build. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!