autorenew

Astro i18n Starter

其他功能

组件

src/components/i18n/ 目录下提供了一些在生成多语言网站时非常有用的 UI 组件。您可以根据需要自定义内容或导入并使用它们。

LocaleSelect.astro

用于切换使用语言的选择界面。

LocaleSelectSingle.astro

用于切换使用语言的链接界面。仅在只支持两种语言的情况下使用。

LocalesHomeList.astro

以 <li> 标签列表的形式返回各语言的首页链接。

LocaleSuggest.astro

当用户访问与浏览器语言不同的 URL 时，在页面顶部显示与浏览器语言相关的链接界面。

例如，当使用英语设置的浏览器访问 /ja/[slug] 这样的 URL 时，会提供链接到 /en/[slug] 的建议。

一旦关闭，设置将保存在本地主机上，并且不会再次显示。

LocaleHtmlHead.astro

可以编写每个语言的 <head> 标签设置。示例中加载了各语言的Noto Font并应用了相应的 CSS。

NotTranslateCaution.astro

当某个页面只能以特定语言提供时，可以向用户显示警告界面。

Monolingual 页面是一个示例。当以英语以外的语言显示此页面时，会向用户显示警告界面。

示例中，警告界面的文本在 /src/const.ts 中进行了设置。

404

Astro i18n Starter 的 404 页面由两个文件组成。如果要自定义 404 页面的设计，通常只需编辑 src/pages/[lang]/404.astro 文件即可。

src/pages/404.astro

此文件生成以下内容：

/404.html

许多部署服务在找不到页面时首先查找此文件并使用它。

https://docs.astro.build/en/basics/astro-pages/#custom-404-error-page

当用户访问 Astro i18n Starter 并访问此文件时，根据用户的系统语言等，将重定向到以下 404 页面。

详细的重定向条件 通过以下条件分支进行重定向。请查看源代码以获取更多详细信息。

  1. 如果URL包含/ja/...这样的语言标识
  2. 如果localStorage.selectedLang中包含语言标识
    • localStorage.selectedLang是用户在UI上选择语言时保存的
  3. 如果来源页面包含/ja/...这样的语言标识

src/pages/[lang]/404.astro

此文件动态生成以下内容：

  • /en/404/index.html
  • /ja/404/index.html
  • …

通过 history.replaceState() 处理，浏览器将显示用户在重定向之前访问的 URL 的路径名。

CSS Tips

根据语言分离CSS样式

您可以通过以下方式将CSS样式分离为不同的语言定义：

:lang(en) {
    /* 英语样式 */
}
:lang(ar) {
    /* 阿拉伯语样式 */
}

但是请注意，这种方式会同时加载所有语言的CSS，可能会浪费资源。如果在.astro文件中，您可以考虑以下方式，或者在LocaleHtmlHead.astro中分离定义：

---
import { type Lang } from "@/i18n";
const locale = Astro.currentLocale as Lang;
---

{
    locale === "en" ? (
        <style>
            /* 英语样式 */
        </style>
    )
    : locale === "ar" ? (
        <style>
            /* 阿拉伯语样式 */
        </style>
    )
    : null
}

阿拉伯语的字间距

在某些设计中，可能需要调整标题等的字间距。但是，请注意阿拉伯语不应该有额外的间距。

从右到左的样式

因此，请注意在Astro i18n Starter的src/styles/base.css中定义了以下内容：

:lang(ar) {
    * { letter-spacing: 0 !important; }
}

RTL图标

在RTL语言中，箭头等图标需要进行反转。

从右到左 | Apple Developer Documentation

在Astro i18n Starter中，我们使用Material Icon，在src/styles/base.css中定义了以下内容：

[class^="material-icons"]:dir(rtl).dir {
    scale: -1 1;
}

通过添加.dir类，RTL语言下的图标将被反转显示：

<span class="material-icons-sharp dir">arrow_forward</span>

实际显示效果： arrow_forward open_in_new