我有一个基于 js/css/html 的小型作品集登陆页面。没有框架/CMS,只有纯静态 html。入口点是包含英语内容的
index.html
文件。
我想在我的网站上使用翻译:
index.ru.html
、index.ua.html
,但我不想在地址栏中看到任何 *.html
或 index.ua
。用户可以通过我页面顶部的按钮更改语言。
如何路线:
http://mysite/en
显示 index.html
- 首先进入网站http://mysite/ru
显示 index.ru.html
http://mysite/ua
显示 index.ua.html
?
我还可以路由到特定的 div/section html 标签:用户输入
http://mysite/ru/contacts
以在 index.ru.html
中显示联系人部分?滚动页面也要改url…是真的还是假的?
也许我需要使用微框架来满足我的小需求?
编辑:
在此网站上找到了很好的示例 - http://www.even.lv/
尝试将其添加到您的 Root/.htaccess 中:
RewriteEngine On
RewriteBase /
RewriteRule ^en/?$ index.html [NC,L]
RewriteRule ^(ru|ua)$ index.$1.html [NC,L]
这会将“/en”重定向到“/index.html”,将“/ru”重定向到“index.ru.html”。
可能正在使用引导滚动间谍,您可以将用户带到特定部分。如果你不想改变 url 在这种情况下 ajax 会帮助你。使用 jQuery,您可以触发选择更改函数 jQuery("#language-select").change(function(){ // 您的逻辑在这里尝试 ajax 来更改页面上的部分。})
为每种语言建立目录,并将相关页面放入其中。
允许您省略完整 url 的唯一机制是 Web 服务器提供“默认”页面的能力,在您的情况下是一个 index.html
同样,要支持 mysite/ru/contacts,您需要以下目录结构:
mysite/
ru/
contacts/
index.html
换句话说,使用纯 html 页面并且不使用重写,您可以使用 webroot 之外的目录来完成您的结构并创建许多单独的 index.html 页面。
另一个选项是使用重写规则,例如使用 mod_rewrite 和 apache Web 服务器提供的规则。
这些规则需要对正则表达式有很好的理解。
我们可以在要使用路由的列表项上使用 onclick 事件侦听器。 例如-
const page1 = document.querySelector("#page1"); // selecting list item from nav bar with it's id
const page2 = document.querySelector("#page2"); // selecting list item from nav bar with it's id
page1.addEventListener("click", function () {
window.location.href = "./page1.html";
});
page2.addEventListener("click", function () {
window.location.href = "./page2.html";
});
and same goes for home page -
const home = document.querySelector("#home")
home.addEventListener("click", function () {
window.location.href = "./index.html";
});