导入网页的通用结构

Question

在创建网页时，我们通常会在所有页面上包含导航：

<nav id="nav">
    <ul>
        <li><a href="about.html" class="active">About us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

我们通常只使用活动类来标记活动页面：

<li><a href="contact.html" class="active">Contact</a></li>

将整个导航复制并粘贴到所有子页面中并不是一个好主意 - 如果我们决定添加一个新页面，我们必须更改所有子页面上的导航。

我们可以把导航放到一个单独的文件中然后导入吗？

<!-- PSEUDOCODE --> <import file="nav.html" active="About us" />

或者也许有一个兼容 HTML 的预处理器（我想重用我现有的代码，而不是从头开始重写）

Answer 1

你有几个选择如何做到这一点，和往常一样，每一个都有它的优点和缺点......

1 - 使用单个 Html 文件。起初这听起来可能很疯狂，但根据您的网站拥有多少数据，这可能是一个很好且简单的解决方案。但它显然不能很好地扩展，你最终可能会得到一个巨大的文件。

2 - 使用<frame> 或<iframe> 标签。这是最古老的方法，也很容易实现，但在 SEF、书签和打印方面存在一些问题。

3 - 使用 Ajax (XMLHttpRequest) 通过 Javascript 加载外部 Html。这也比较容易实现，但是在导航（'返回'按钮）和依赖javascript方面存在一些问题。

5 - 使用服务器端模板引擎。根据您的服务器结构，这可能需要一些努力，但这并不是一件很难的事情。这里的缺点是您可能需要做一些额外的工作来调整模板引擎的文件。

您也可以使用套接字来获取数据，但这感觉就像使用螺丝刀敲钉子一样。