Tác giả:
    Aymeric PINEAU
    Ngày tạo:2026-09-19Cập nhật lần cuối:2026-09-19

    Tài liệu Hook useLocale

    Hook useLocale từ astro-intlayer cung cấp quyền truy cập vào ngôn ngữ yêu cầu hiện tại, ngôn ngữ mặc định được định cấu hình và tất cả các ngôn ngữ khả dụng trong các ứng dụng Astro.

    Nó hoạt động nhất quán trên frontmatter .astro được render trên máy chủ và các khối script <script> phía client.

    Cách sử dụng

    Trong Frontmatter Thành phần (Render trên máy chủ)

    src/layouts/Layout.astro
    ---
import { useLocale } from "astro-intlayer";
import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";

const { locale, defaultLocale, availableLocales } = useLocale();
const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
---

<!DOCTYPE html>
<html lang={locale}>
  <head>
    <meta charset="utf-8" />
    <title>Astro + Intlayer</title>
  </head>
  <body>
    <header>
      <span>Hiện tại: {locale}</span>
      <span>Mặc định: {defaultLocale}</span>
      <nav>
        <ul>
          {availableLocales.map((localeItem) => (
            <li key={localeItem} className="p-1">
              <a
                href={getLocalizedUrl(pathWithoutLocale, localeItem)}
                aria-current={localeItem === locale ? "page" : undefined}
              >
                {localeItem.toUpperCase()}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
    <slot />
  </body>
</html>

    Trong <script> Client (Tương tác)

    src/components/LocaleSwitcher.astro
    ---
import { useLocale } from "astro-intlayer";

const { locale, availableLocales } = useLocale();
---

<select id="locale-select">
  {availableLocales.map((loc) => (
    <option value={loc} selected={loc === locale}>
      {loc.toUpperCase()}
    </option>
  ))}
</select>

<script>
  import { useLocale, setLocaleInStorage } from "astro-intlayer";

  const { setLocale } = useLocale();

  document.getElementById("locale-select")?.addEventListener("change", (e) => {
    const target = e.target as HTMLSelectElement;
    setLocale(target.value);
  });
</script>

    Giá trị trả về

    Hook trả về một đối tượng thuộc kiểu UseLocaleResult:

    Thuộc tínhKiểuMô tả
    localeDeclaredLocalesNgôn ngữ đang hoạt động.
    defaultLocaleDeclaredLocalesNgôn ngữ dự phòng mặc định được cấu hình trong intlayer.config.ts.
    availableLocalesDeclaredLocales[]Mảng tất cả các ngôn ngữ được hỗ trợ đã cấu hình cho dự án.
    setLocale(locale: LocalesValues) => voidHàm cập nhật ngôn ngữ. (Tương tác trong <script> client, cảnh báo trong quá trình SSR).
    subscribe(callback: () => void) => () => voidĐăng ký theo dõi các thay đổi ngôn ngữ phía client.

    Hành vi Máy chủ và Client

    • Trong quá trình SSR / Render Máy chủ: Một yêu cầu được render một lần với các tham số cố định. Việc gọi setLocale() trong quá trình render trên máy chủ không có tác dụng và đưa ra cảnh báo; việc chuyển đổi ngôn ngữ nên được thực hiện ở client hoặc bằng cách điều hướng đến URL ngôn ngữ đích.
    • Trong Script Client: setLocale cập nhật store phía client và cập nhật cookie hoặc local storage đã lưu theo cấu hình Intlayer của bạn.

    Tài liệu liên quan

    useIntlayerremix-intlayer