导入网页的通用结构

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

你也可以使用插座来获取数据，但这感觉就像用螺丝刀敲钉子一样。