Rumah hujung hadapan web tutorial js Mencipta laluan dinamik ke pengantarabangsaan (i) dengan Astro Build

Mencipta laluan dinamik ke pengantarabangsaan (i) dengan Astro Build

Aug 18, 2024 am 12:00 AM

Criando rotas dinâmicas para internacionalização (i) com 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
Salin selepas log masuk

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>
Salin selepas log masuk

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
Salin selepas log masuk

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();
});
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

Contoh warna json fail Contoh warna json fail Mar 03, 2025 am 12:35 AM

Contoh warna json fail

8 plugin susun atur halaman jquery yang menakjubkan 8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

8 plugin susun atur halaman jquery yang menakjubkan

10 JQuery Syntax Highlighters 10 JQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighters

Bina Aplikasi Web Ajax anda sendiri Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Bina Aplikasi Web Ajax anda sendiri

Apa itu ' ini ' Dalam JavaScript? Apa itu ' ini ' Dalam JavaScript? Mar 04, 2025 am 01:15 AM

Apa itu ' ini ' Dalam JavaScript?

10 JavaScript & JQuery MVC Tutorial 10 JavaScript & JQuery MVC Tutorial Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC Tutorial

See all articles