静态网站的漂亮URL

Pretty URL for static website

本文关键字：URL 漂亮 网站 静态      更新时间：2023-09-26

我正在创建一个"静态"网站，我想有这样的url:http://www.my-website/my-page-1或http://www.my-website/my-page-2

我使用jQuery方法load()来加载我的网页内容。这是我的index.html:

<body>
    <nav>
        <ul >
            <li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
                <span><a>Link 1</a></span>
            </li>
            <li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
                <span><a>Link 2</a></span>
            </li>
        </ul>
    </nav>
    <!-- Content, loaded with $.load() -->
    <div id="content"></div>
</body>

我知道如何改变我的url而不重新加载页面，使用历史API

这是我的javascript:

function changeState(url) {
    window.history.pushState(url, 'Title', url);
    loadStateData(url);
}
function loadStateData(state) {
    var content = '#content';
    $(content).load( 'views/' + state + '.html');
    // Manage menu style
    $('.menu-item').removeClass('active');
    $('#' + state + '-menu-item').addClass('active');
}

有了这个代码，我可以通过点击Link 2到达http://www.my-website/my-page-2，但是如果我刷新我的网页，或者如果我直接在浏览器地址栏中输入http://www.my-website/my-page-2，我得到了一个404错误。

我不太适应。htaccess URL重写，但我认为它应该解决我的问题。

我不想使用AngularJS或其他类似的框架(除非它是一个非常轻量级的框架)

你需要确保当你使用JavaScript:

  • 修改当前页面的DOM，使其实际上是一个不同的页面
  • 更改URL以识别不同的页面

…，您还确保服务器可以生成该页面本身

。

这样，如果JavaScript因为任何原因失败了，那么一切仍然可以工作。这是最佳实践应该遵循的基本原则。

这可能涉及到复制你的逻辑服务器端，这可能会有很多工作。健壮性+客户端性能的hack并不便宜。考虑使用同构JS和使用无头浏览器获取页面快照来加快速度。

我不太适应。htaccess URL重写，但我认为它应该解决我的问题。

这肯定不能很好地解决。你可以用它来转移每一个请求回到你的主页(所以你有重复的内容在每个URL)，然后使用客户端JS读取location，并找出什么内容加载，但随后你不妨使用hashbangs，因为你已经扔掉了使用pushState的每一个优势，但添加了重复的内容URL到你的网站(并投入了一堆工作来创建这些重复的内容URL)。

在没有任何服务器端重写的情况下这样做似乎是不可能的。当您刷新页面时，HTTP服务器需要根据URL为您提供适当文件的内容。

但. .如果你真的想让URL重写客户端，你可以做一个，通用重写，因为它通常是在基于PHP的网站内部进行重写的情况下完成的(不是通过。htaccess或nginx规则，而是使用PHP脚本)。当没有这样的文件，如"/my-page-2"在web服务器上，只是重定向客户端到/index.html?url=/my-page-2并使用JavaScript分派到适当的子页面

相关文章：