[功能请求]：添加多语言支持

[Pathsis]

不知道实现起来是否麻烦？如果不麻烦的话，恳请实现这个功能。😳

[la3rence]

/label i18n /label feature

我的理解：对于同一篇博客，同时提供比如中英双语的两份 markdown 文件，默认展示默认的语言版本（比如 zh 中文）。进入中文页面后，如果当前文章存在其他语言的版本，则在页面顶部添加 i18n 国际化提示，让用户可以直接跳转到另一种语言（反之亦然）。

对于没有提供非默认语言的其他语言的文章，则页面保持现状，且 URL 不变。

文件名和 URL 实例参考 (设定中文为默认语言，其他语言不受任何限制，只需添加对应 markdown；
默认语言的中间后缀还得想方法去兼容当前现有的 URL，不然历史的 URL 会失效，除非手动写跳转逻辑)：

语言	文件名	URL	RSS
中文	article.md or article.zh.md	example.com/blog/article or example.com/zh/blog/article	atom.xml or /zh/atom.xml
英文	article.en.md	example.com/en/blog/article	/en/atom.xml
日文	article.ja.md	example.com/ja/blog/article	/ja/atom.xml

首页/索引页只展示默认语言的文章列表，如果该文章不存在默认语言版本则不在首页展示(否则会出现同一篇博客出现重复的情况)，基于此，索引页也需要实现 i18n：

example.com 页面只展示默认语言文章，example.com/zh 同样可访问。
example.com/en 只展示有 en 版本的文章。

因此每一篇文章无论用几种语言撰写，都有必要提供一份默认语言的版本。

效果大致如 BYVoid.com
https://byvoid.com/zhs/blog/
https://byvoid.com/en/blog/
https://byvoid.com/en/blog/accepting-refugees-is-not-an-obligation/
https://byvoid.com/zhs/blog/accepting-refugees-is-not-an-obligation/
https://byvoid.com/zht/blog/accepting-refugees-is-not-an-obligation/

主要流程大致如上，我有空写写，最近事比较多～

[Pathsis]

我找到一个next.js的例子。https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter

[Pathsis]

上面那个好像切换语言无效。作者自己的主页好像可以。这是他的项目。他的一个实现介绍：使用 next-i18next 實作中英文多語系。

[la3rence]

MVP Preview:

Screen.Recording.2024-01-28.at.18.34.22.mov

[Pathsis]

感谢！测试了一下，目前效果很棒！

有几个小问题：

1. tag页面似乎没有多语言化。这会带来一些不协调的问题。比如，进入一个中文帖子的页面，点击多语言按钮切换到英文帖子，此时导航栏内的链接就会带有/en/前缀，也就是说，会进入英文主页（index）；但是，如果点击英文帖子末尾的tag，则会进入中文主页，导航栏的链接就不会带有/en/前缀。 为了协调，能否为所有属于英文的帖子的tag创建独立的tag页面，并且链接前缀为/en/，这样，从英文帖子点击tag链接不会进入中文主页。
2. 目前似乎没有独立的tag页面，链接必须是/tag/<一个具体的tag项目>形式，访问/tag/会返回404。
3. 如何为整个主页添加语言切换？如果当前主页为中文，则可以切换到英文，反之亦然。
4. 当主页在不同语言之间切换，siteDescription似乎没有变化。
5. about页面是由js文件和md文件拼合的，如何支持多语言？

再次感谢！致敬！

[Pathsis]

已经用了好久这个功能啦。不知道标签筛选和首页语言切换功能是否还有计划呢？

[la3rence]

i18n 所有功能都完成了。页面上任何需要配置的地方都需要额外配置对应语言提前翻译好的 JSON 文件： lib/locales/zh.json, lib/locales/en.json等，并在需要展示的组件中使用 withLocalization() 后注入 translations 对象，该对象即为对应语言的 JSON 对象，使用 translations["some text"] 来获取当前语言的翻译结果。

site/lib/locales/zh.json

Lines 2 to 9 in f211bab

	"About": "关于",
	"Blog": "博客",
	"RSS": "RSS",
	"Search": "搜索",
	"Privacy": "隐私政策",
	"Status": "网站状态",
	"Tags": "标签",
	"Tagged with": "包含标签",

site/pages/tag/index.js

Line 23 in f211bab

export default withLocalization(TagIndex);

site/pages/tag/index.js

Lines 10 to 11 in f211bab

	<Layout title={translations["Tags"]} tags={`Tags`}>
	<h2>{translations["Tags"]}</h2>

readme 和之前的文章 markdown 命名模式一样。

/close

[Pathsis]

i18n 所有功能都完成了。页面上任何需要配置的地方都需要额外配置对应语言提前翻译好的 JSON 文件： lib/locales/zh.json, lib/locales/en.json等，并在需要展示的组件中使用 withLocalization() 后注入 translations 对象，该对象即为对应语言的 JSON 对象，使用 translations["Blog"] 来获取当前语言的翻译结果。

site/lib/locales/zh.json

Lines 2 to 9 in f211bab

	"About": "关于",
	"Blog": "博客",
	"RSS": "RSS",
	"Search": "搜索",
	"Privacy": "隐私政策",
	"Status": "网站状态",
	"Tags": "标签",
	"Tagged with": "包含标签",

site/pages/tag/index.js

Line 23 in f211bab

export default withLocalization(TagIndex);

site/pages/tag/index.js

Lines 10 to 11 in f211bab

	<Layout title={translations["Tags"]} tags={`Tags`}>
	<h2>{translations["Tags"]}</h2>

readme 和之前的文章 markdown 命名模式一样。

/close

效果太棒了！！！感谢！

[Pathsis]

发现了一点小问题。index 和 search 页面的页面标题似乎没有国际化，比如，无论时哪个语言，index 页面的标题都是“Blog”。

[la3rence]

site/pages/index.js

Line 18 in f0abab8

<Layout blogIndex title={"Blog"} tags={"Blog"}>

[Pathsis]

site/pages/index.js

Line 18 in f0abab8

<Layout blogIndex title={"Blog"} tags={"Blog"}>

确实发现是这里的代码设定的，不过，如何分别显示为“博客”或“Blog”呢？

[la3rence]

#342 (comment)

[Pathsis]

#342 (comment)

非常感谢！我完全不懂代码，所以，太麻烦您了！index.js和search.js（以及404和tag/[tag].js的titile）我甚至不会引入国际化组件，并修改其中的代码以使用这个组件（光翻译我是会的😄）。问了ChatGPT之后，算是搞定了。再次感谢！！