如何使用 i18n 制作具有漂亮 URL 的网站？答案

【问题标题】：How to make a site with pretty URLs with i18n?如何使用 i18n 制作具有漂亮 URL 的网站？
【发布时间】：2018-11-26 03:57:50
【问题描述】：

首先，我阅读了这个问题，在我看来它似乎对应于解决我的问题，但经过多次重读和测试后我不明白：https://github.com/i18next/react-i18next/issues/325 （可能是因为我没有使用 react）

我也试过这个（使用 .htaccess）：https://github.com/i18next/i18next/issues/144

但它给出了 404 错误。

我最近尝试使用 i18next 创建一个网站，效果很好，但我希望能够添加更好的带有国家代码的 URL。

示例而不是（更改语言）：

https://www.mywebsite.com/index.html?lng=fr-BE

这个

https://www.mywebsite.com/fr-BE

知道我不能使用 PHP 等后端语言……我使用的是 Apache Web 服务器，并且我只使用 i18next 和 jquery.i18next。

为了更深入地描述我的问题，我如何确保在用户到达任何页面时添加国家代码？如果 URL 中已经有国家代码，更改用户的语言怎么办？

最重要的是，这可能吗？

感谢您阅读我的问题并希望您能帮助我解决我的问题。 :)

P.S.：请原谅我的英语

【问题讨论】：

标签： javascript apache url-rewriting i18next pretty-urls

【解决方案1】：

完全有可能。

所以首先在您的 .htaccess 文件中，您希望有这样的内容：

RewriteEngine On
RewriteRule ^(\w+)\/?([\w\-]+)?$ $1.html?lng=$2

这将重写表单的 URL

www.example.com/index/fr-BE 到 www.example.com/index.html?lng=fr-BE

所以我使用这种方法是因为您可能希望考虑语言参数可选并将其默认为某个值。而且这条规则也会重定向

www.example.com/some_page 到 www.example.com/some_page.html

友好的 URL 就是这样。现在是从查询字符串中获取语言参数的部分。如果不使用服务器端语言（如 PHP），则不能使用 'lng' 参数中的值，但按照 here 的指南，您可以使用 window.location.pathname 获取语言字符串（如果存在）。

因此，对于 www.example.com/index/fr-BE 形式的 URL，您可以使用以下代码：

let params = window.location.pathname.split('/').slice(1);

if(typeof params[1] !== 'undefined') {
    console.log(params[1]); // <-- should be 'fr-BE'
    i18next.setLng(params[1]);
}

希望这会有所帮助。

【讨论】：