静态 html 登陆页面中的路由

Question

我有一个基于 js/css/html 的小型作品集登陆页面。没有框架/CMS，只有纯静态 html。入口点是包含英语内容的

index.html

文件。

我想在我的网站上使用翻译：

index.ru.html

、

index.ua.html

，但我不想在地址栏中看到任何

*.html

或

index.ua

。用户可以通过我页面顶部的按钮更改语言。

如何路线：

1. http://mysite/en

   显示

   index.html

   - 首先进入网站

2. http://mysite/ru

   显示

   index.ru.html

3. http://mysite/ua

   显示

   index.ua.html

？

我还可以路由到特定的 div/section html 标签：用户输入

http://mysite/ru/contacts

以在

index.ru.html

中显示联系人部分？滚动页面也要改url…是真的还是假的？

也许我需要使用微框架来满足我的小需求？

编辑：

在此网站上找到了很好的示例 - http://www.even.lv/

Answer 1

尝试将其添加到您的 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”。

Answer 2

可能正在使用引导滚动间谍，您可以将用户带到特定部分。如果你不想改变 url 在这种情况下 ajax 会帮助你。使用 jQuery，您可以触发选择更改函数 jQuery("#language-select").change(function(){ // 您的逻辑在这里尝试 ajax 来更改页面上的部分。})

Answer 3

为每种语言建立目录，并将相关页面放入其中。

允许您省略完整 url 的唯一机制是 Web 服务器提供“默认”页面的能力，在您的情况下是一个 index.html

同样，要支持 mysite/ru/contacts，您需要以下目录结构：

mysite/
      ru/
        contacts/
             index.html

换句话说，使用纯 html 页面并且不使用重写，您可以使用 webroot 之外的目录来完成您的结构并创建许多单独的 index.html 页面。

另一个选项是使用重写规则，例如使用 mod_rewrite 和 apache Web 服务器提供的规则。

这些规则需要对正则表达式有很好的理解。

Answer 4

我们可以在要使用路由的列表项上使用 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";
});