在静态 HTML 网站中管理重复代码的最佳方法是什么

Question

我正在管理一个有很多静态 HTML 网站的旧网站，没有服务器端脚本，只有普通的 HTML/CSS，最少的 javascript。 我发现在不同的页面中多次更改同一段代码是非常浪费时间的。 例如，当菜单中的某些内容发生更改时，由于菜单只是每个文档中的静态文本，因此我必须多次进行相同的更改。

我想知道最小化这种开销的最佳策略是什么，换句话说，您会推荐什么来管理跨多个静态 HTML 页面的导航代码等内容。

我知道你可以使用：

1. 服务器端脚本（如 PHP），但没有其他理由在该特定站点使用脚本。
2. 框架（但这很糟糕，因为它......好吧，框架:)）
3. 服务器端包含（这似乎在更改服务器时可能会导致问题）
4. javascript（不利于 SEO）

你会推荐什么？

谢谢。

Answer 1

在所有的可能性中，无论是您列出的还是我所知道的任何其他可能性，我仍然只使用基于 PHP 的简单解决方案来运行。 它既简单又干净，几乎不需要您付出任何努力。 我对我设计的所有小网站都这样做。

大多数情况下，您最终会得到相当简单的结构。 您写了一个完整的页面，然后对于每个后续页面，您只需更改内容所在的中间位置。 在这种情况下，只需将内容上下的所有内容保存在 header.php 和 footer.php 文件中，然后放入<?php require_once "header.php"; ?> <?php require_once "header.php"; ?>在每个内容文件的顶部（与页脚文件类似）。 完毕！

这确实有一些小缺点。 一方面，您依赖于脚本编写，但 PHP 是世界上部署最广泛的服务器端语言，因此这不是真正的问题。 你甚至不在乎它是 PHP4 还是 PHP5，因为你没有做任何花哨的事情。

对于两个，您在每次加载页面时都运行一个脚本，以便为本质上是静态文件的内容提供服务。 这会减慢您的响应速度，并对 CPU 造成不必要的压力。 这可能无关紧要（延迟非常小），但是如果您发现它很浪费，那么有一些很好的 PHP 框架可以为您获取 PHP 生成的页面并从中生成静态 html。 （这也很容易自己做，只需要使用输出缓冲做一点工作。）这样你就可以两全其美——PHP 模板（如果你最终想要更高级的东西，还可以使用完整的 PHP 语言） ) 但静态 html 页面可实现最少的 CPU 活动和最快的页面加载时间。

Answer 2

您可以使用静态站点生成器。 我推荐jekyll 。

Answer 3

如果您打算维护静态站点，我建议您使用静态站点生成器。

我过去用过的一个是webgen

从 webgen 页面：

页面布局与内容分离：如果您更改布局，所有使用该布局的页面都会自动更新。 您可以拥有任意数量的不同布局，甚至是嵌套布局。

用标记语言编写内容：内容和布局文件可以用 Markdown、Textile 或 Haml 等标记语言编写，让您更专注于编写的内容。

自动化：webgen 可以自动为您生成菜单和面包屑路径等。

动态内容：如果需要，可以很容易地添加一些动态内容。

Answer 4

我已经很久没有使用它了，但Dreamweaver是处理静态站点的绝佳工具。 它有一个模板/重复区域机制，为此目的使用注释。

编辑补充：一点谷歌搜索让我记忆犹新。 Dreamweaver 具有类似于 ASP.NET 母版页的模板。 对于其他内容，它使用Library 和 Assets的比喻。 由于这是一个静态站点，您应该能够以便宜的价格购买满足您需求的旧版 Dreamweaver。

编辑 2：我对 Dreamweaver 情有独钟。 如果 StackOverflow 是反专家 Exchange，那么 DW 是反 FrontPage。 Adobe 是 Adob​​e，在这一点上，他们可能已经添加了足够的功能来有效地削弱它。

Answer 5

您可以使用 PHP 预处理您的网站，然后上传生成的静态 HTML 文件。

Answer 6

使用服务器端脚本可能没有任何其他原因，但肯定减少编写代码的数量是使用它的一个重要原因，您不觉得吗？ 这将使维护站点的效率大大提高。

Answer 7

一般来说，我会推荐 PHP - 它对包含的处理正是您所需要的，它使任何动态变得更加容易管理。

找到安装了 PHP 的主机也非常容易。

Answer 8

您可以使用sed批量编辑包含相同页面元素的文件。

Answer 9

正如其他人所说，静态站点生成器是必经之路。

DocPad是新的静态站点生成器，使用Node.js和CoffeeScript构建，它能够支持诸如coffeescript 、 coffeekup 、 jade和stylus等尖端标记以及通常的markdown和haml支持等。

如果您完全不了解静态站点生成器的概念，并且想知道什么是模板引擎和元数据，请阅读本文。

Answer 10

使用 PHP 的最大问题是什么？ 在我看来，使用简单的 PHP 包含可以为您节省大量时间，而不是编辑大量文件。 这说得通。

<?php include('navigation.php'); ?>

除此之外，其他选项是将其制作在一个页面上，然后将其复制并粘贴到其他页面。

Answer 11

每当我的客户向我展示此类网站时，我都会使用 PHP。 您可以轻松地将所有重复出现的 HTML 放在一个文件中并通过函数调用它，或者将其放在单独的文件中并通过包含/要求/你有什么来调用它。

最重要的是，如果您为谁维护网站，希望有某种方式让他们自己添加内容。 您已经拥有足够的必要框架，使他们的工作变得非常简单。

Answer 12

我过去曾为此使用过Webby ，并且对它使事情变得如此简单并减少重复感到非常满意。

Answer 13

我想说一个内嵌框架对于出现在每个页面上并且需要在每个页面上更新的菜单之类的东西来说都很好。 只需删除frameborder，适当调整大小，它应该是好的。

Answer 14

我认为在易用性和速度之间的合理妥协将首先包含服务器端包含，然后是 PHP。

至于 PHP，我建议您使用 Apache2 模块的 auto_append_file 和 auto_prepend_file 指令来包装内容。

Answer 15

<?php include('header.php') ?>

//你的内容放在这里

<?php include('sidebar.php') ?>
<?php include('footer.php') ?>

Answer 16

我会将所有可抓取的内容放入 HTML，然后使用 javascript 生成重复的内容。 所以像这样：

<!doctype html>
<html>
    <head>
        <title>My website</title>
    </head>
    <body>
       Main content goes here.
       <!-- This script should generate the extra elements, 
            the navigation bar and stuff around the main div. -->
       <script src="enhance.js"></script>
    </body>
</html>

所以你需要做的就是设置标题并在每个页面中编写主要内容。 其余的（反正爬虫可能不感兴趣）是由 JS 生成的。

Answer 17

您可以在不使用 php 的情况下包含静态网页，而是使用 javascript。

这是一个例子：

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
w3.includeHTML();
</script>

</body>
</html>