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。这也相对容易实现，但它在导航方面存在一些问题（＆＃39;返回＆＃39;按钮）并依赖于javascript。

5 - 使用服务器端模板引擎。这可能需要一些努力，具体取决于您的服务器结构，但这并不是一件非常困难的事情。这里的缺点是你可能需要额外的工作来调整模板引擎的文件。

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

导入网页的通用结构

1 个答案: