# 多语言网站 一个网站，容纳你需要的所有语言。

> vagejs 是一款支持多语言的静态网站生成器。每种语言一个文件夹，每个页面都有 lang 和 hreflang 标签，还能检查出缺失的翻译。

vagejs 是一款内置多语言支持的静态网站生成器。一个网站容纳所有语言，每种语言放在自己的文件夹里，每个页面都有正确的语言标签和 `hreflang` 标签，还有一项检查会列出仍在等待翻译的页面。这个功能从 0.10 版本起就是 vagejs 的一部分。

`npm create vagejs@latest my-site`

[阅读多语言文档](https://vagejs.com/docs/multi-language/)[跟着分步指南做](https://vagejs.com/guides/multilingual-static-site/)

## 它是怎么工作的

你的访客读的不都是同一种语言。英文页面就留在原来的位置，法语页面放进 `fr` 文件夹，德语页面放进 `de`。每个页面都知道自己的语言，各个译文版本之间互相指向。

| 你写的文件 | 访客看到的 |
| --- | --- |
| `src/pages/about.md` | `/about/`，英文版 |
| `src/pages/fr/about.md` | `/fr/about/`，法语版 |
| `src/pages/de/ueber-uns.md`，带 `translationOf: /about/` | `/de/ueber-uns/`，德语版，有自己的德语网址 |

语言文件夹里文件名相同的页面，就是对应页面的译文。想用访客自己语言的网址？加一行说明它翻译的是哪个页面就行。你的语言只需在 `vage.config.ts` 里列一次：

TypeScript

```
export default defineConfig({
  site: "https://example.com",
  lang: "en",
  i18n: { locales: ["fr", "de"] },
});
```

## 你能得到什么

多语言网站里那些琐碎的事交给我们，你只管专心写内容。

-   ### 每个页面都标对语言
    
    法语页面会标明自己是法语，这样屏幕阅读器能正确朗读，搜索引擎也知道它是给谁看的。
    
-   ### 自动写好 hreflang 标签
    
    一个页面的每个版本都会链接到其他版本。Google 会根据这些链接，给用户展示他们自己语言的版本。
    
-   ### 语言切换器，不用手动维护
    
    你的布局会拿到当前页面的译文列表，所以切换器指向的永远是真实存在的页面。
    
-   ### 检查缺失的翻译
    
    `npm run check` 会列出在某种语言里还没有版本的每个页面，并指出要添加的文件。语言标签写错，或者译文指向了不存在的页面，都会让构建停止。
    
-   ### 按语言分开的订阅源
    
    `/fr/blog/` 的博客订阅源只包含法语文章，并且会标明它是法语的。
    
-   ### 按语言分开的菜单和列表
    
    给每种语言配一个自己的菜单，再用 `collection()` 只列出一种语言的页面，比如法语博客文章。
    
    详见 [在你的布局中](https://vagejs.com/docs/multi-language/#in-your-layouts)
    

## vagejs 多语言网站适合谁用

-   ### 用多种语言服务客户的企业
    
    你用两三种语言服务客户，只想维护一个网站，而不是三个。
    
-   ### 有多语言文档的产品
    
    你一次翻译一页文档，检查会帮你记着还剩哪些。
    
-   ### 让 AI 助手来翻译的任何人
    
    检查会准确告诉你的助手还缺什么，由你来审核它写的内容。
    

## 它不做什么

我们宁愿一开始就把限制说清楚。

-   vagejs 不会替你翻译页面。每个版本由你、译者或你的 AI 助手来写。
-   它不会根据访客的浏览器设置把他们引导到某种语言。在静态网站上，语言切换器更可靠。
-   `llms.txt` 和网站地图会把所有语言列在一起，而不是每种语言一个文件。

## 进一步了解 vagejs 多语言网站

其他一些静态网站生成器也内置了多语言支持，其中有些历史更久，能应对更复杂的配置。参见 [vagejs 对比](https://vagejs.com/compare/)。

-   一步步来：[搭建多语言静态网站](https://vagejs.com/guides/multilingual-static-site/)
-   所有选项和检查：[文档中的多语言网站](https://vagejs.com/docs/multi-language/)
-   其他功能：[vagejs 全部功能](https://vagejs.com/zh-CN/features/)

## 关于多语言网站的常见问题

### 我必须翻译每个页面吗？

不必。没有译文的页面就只以一种语言存在。如果你只翻译部分页面，把它们列在 `vage.config.ts` 的 `i18n.pages` 下（vagejs 0.15.1 及更新版本），`vage check` 就只会要求这些页面的译文。

### 缺少译文会让网站构建失败吗？

不会。缺少译文只是警告，所以你边翻译，网站照样能构建。如果你希望警告也算失败，就运行 `vage check --strict`。真正的错误，比如语言标签写错，或者 `translationOf` 指向了不存在的页面，才是错误。

### 我可以用哪些语言代码？

标准的语言代码，比如 `fr`、`de` 或 `pt-BR`。主语言写在 `lang` 里，其他语言写在 `i18n.locales` 里。不要把主语言再列一遍。

### 我能给已有的网站添加语言吗？

能。主语言页面的网址保持不变，所以你已经发布的内容都不会移动。把新语言加到 `vage.config.ts` 里，再把每篇译文放进对应语言的文件夹。