静态网站的漂亮 URL答案

【问题标题】：Pretty URL for static website静态网站的漂亮 URL
【发布时间】：2016-11-07 09:52:00
【问题描述】：

我正在创建一个“静态”网站，我想要这样的网址： 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>

我知道如何在不重新加载页面的情况下更改我的网址，使用 history 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 或其他类似的框架（除非它是一个非常轻量级的框架）

【问题讨论】：

您必须向 onload 事件添加一个事件处理程序，该事件处理程序将检查 url 并在 url 包含您拥有的页面时触发 changeState。然后进入为“主页”提供服务的网络服务器的设置，并将所有到“my-website”的流量重新路由到这个主页，所以无论这个 url 后面的页面是什么，它都会转到“主页” ' 并触发检查是否必须调用 changeState 的事件。或者使用哈希片段而不是完整的 url，那么您不必编辑任何服务器设置，尽管这“不太漂亮”。

标签： javascript html .htaccess url url-rewriting

【解决方案1】：

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

但是.. 如果您真的想在客户端进行 URL 重写，您可以进行一个通用重写，因为在基于 PHP 的网站在内部进行重写（不是通过 .htaccess 或 nginx 规则，而是使用PHP 脚本）。当网络服务器上没有像“/my-page-2”这样的文件时，只需将客户端重定向到 /index.html?url=/my-page-2 并使用 JavaScript 分派到适当的子页面。

【讨论】：

【解决方案2】：

您需要确保在使用 JavaScript 时：

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

...您还要确保服务器也可以自己生成该页面。

这样，如果 JavaScript fails for any reason 那么一切仍然有效。这是一个basic principle，最佳做法是遵循。

这可能会涉及复制您的逻辑服务器端，这可能需要大量工作。健壮性+客户端性能黑客不能廉价地协同工作。考虑将isomorphic JS 和taking page snapshots with a headless browser 作为加速此过程的技术。

我对 .htaccess URL 重写不太满意，但我认为它应该可以解决我的问题。

肯定解决不了好。您可以使用它将每个请求转移回您的主页（因此每个 URL 上都有重复的内容），然后使用客户端 JS 读取 location 并计算出要加载的内容，但您不妨使用 hashbangs因为您将放弃使用 pushState 的所有优势，但会向您的网站添加重复的内容 URL（并投入大量工作来创建这些重复的内容 URL）。

【讨论】：

我了解您使用 JavaScript 的方法，但即使我不使用 javascript 来加载我的内容或管理我的 URL，我的应用程序也不会完全正常工作。我没有时间在每个功能上设置优雅降级。这段时间我将继续使用重复的代码和 .html URL。谢谢
@Tako — 使用 hashbang 比使用 pushState 和重复 URL 更好。它们更易于实施，不会给您带来重复的内容问题。