在所有页面上使用单个导航栏，而不复制它？答案

【问题标题】：Using single nav bar on all pages, without coping it?在所有页面上使用单个导航栏，而不复制它？
【发布时间】：2016-05-08 01:02:44
【问题描述】：

是否可以在所有页面上都有相同的导航栏，而无需复制和粘贴代码。基本上我想要这个：

<nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="login.html">Login</a></li>
            <li><a href="register.html">Register</a></li>
        </ul>
    </nav>

在所有三个页面上（主页、登录、注册）。无需应对和粘贴代码。

【问题讨论】：

您可以通过多种方式完成这些操作，例如使用 AJAX 更改内容，您可以将这些视图放在单独的 php 文件中，然后您可以将它们包含在所有文件中。
从答案中我能够理解如何完成我想要的结果。但是我不明白为什么我的问题被否决了？
有人对你的问题投了反对票，但别担心，我会为这些投赞成票。

标签： css html twitter-bootstrap frontend

【解决方案1】：

您可以使用 Javascript 框架来帮助您实现这一目标。

Angular JS 等 JavaScript 框架提供了帮助您执行此操作的功能。

【讨论】：

【解决方案2】：

许多模板系统允许您嵌套或继承模板。例如，您将导航栏放在主模板中，然后在所有页面上简单地继承该模板。 Jade 和 Jinja 是我想到的两个。

如果您不使用任何类型的模板系统，您仍然可以将 HTML 文件与您使用的任何语言拼凑在一起，但这会有点混乱。例如，读入多个 HTML 文件，将它们连接起来，然后将它们提供给客户端。

最后但并非最不重要的一点是，您可以将导航栏动态添加到页面中，并且只需在您希望导航栏出现的所有页面上包含相同的脚本。

最终，您最好的选择是使用模板系统，因为它可以非常高效和干净地为您处理此类事情，但即使没有模板系统，您仍然可以管理，只是不够干净。

【讨论】：