如何使用i18n制作一个具有漂亮URL的网站

Question

首先，我读到了这个问题，在我看来它对应于解决我的问题，但经过几次重读和测试，我还是不明白：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-成为

这个

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

---

知道我不能使用PHP等后端语言……我使用Apache web服务器，并且我只将i18next与jquery.i18next一起使用。

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

最重要的是，这可能吗？

感谢您阅读我的问题，并希望您能帮助我解决问题。：(

附言：请原谅我的英语

Answer 1

完全可能。

因此，首先在.htaccess文件中，你会想要这样的东西：

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

这将重写形式的URL

www.example.com/index.fr-BE到http://www.example.com/index.html？lng=fr-BE

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

www.example.com/some_page到http://www.example.com/some/page.html

友好的URL就是这样。现在是从查询字符串中获取语言参数的部分。如果不使用服务器端语言(如PHP(，就不能使用'lng'参数中的值，但根据这里的指南，您可以使用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]);
}

希望这能有所帮助。