html - 如何创建更新导航栏>

Question

我如何创建一个导航栏，它将在一个页面上更新并传输到所有页面，类似于 CSS 样式表？

说我有一个导航栏，我想从一个页面向它添加内容，但不想去更新 400 个页面？

谢谢大家!

Answer 1

有多种方法可以将单个文件中的 HTML 内容放入多个页面。这里有一些:

服务器端处理

将导航栏代码写在一个文件中，然后让服务器将其作为每个页面的一部分包含在内。例如，在 PHP 中，您会执行如下操作:

<?php include 'nav.php'; ?>

静态站点生成器

使用工具将源文件预处理为 HTML。这些工具有助于减少每页样板文件。 Jekyll就是这样一种工具，在 GitHub 页面中使用。有many , 所以选择你喜欢的那个。

内嵌框架

将导航条代码写在一个文件中，然后使用 iframe 标签让每个页面加载它。

<iframe src="nav.html"></iframe>

脚本

这可能不是最好的方法，但您可以包含一个 script 标记而不是 iframe 以使样式更容易。让脚本生成导航，例如，通过使用 HTML 代码调用 document.write。

页面.html:

<script src="nav.js"></script>

导航.js:

document.write('<nav>...</nav>');