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

Posted 2023-04-13

【中文标题】管理静态 HTML 网站中重复代码的最佳方法是啥

【英文标题】：What is the best way to manage duplicate code in static HTML websites管理静态 HTML 网站中重复代码的最佳方法是什么

【发布时间】：2010-11-08 11:03:38

【问题描述】：

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

我想知道将这种开销降至最低的最佳策略是什么，换句话说，对于跨多个静态 HTML 页面管理诸如导航代码之类的事情，您会推荐什么。

我知道你可以使用：

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

你会推荐什么？

谢谢。

【参考方案1】：

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

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

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

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

【讨论】：

同意 - 尽管在大多数情况下不太可能考虑包含语句的性能。 （我在***.com/questions/112786/…问过这个问题）

在我看来，仅仅为了方便开发人员而让服务器提供动态页面是矫枉过正的，尤其是考虑到存在更好的方法（请参阅其他问题）。

太棒了。有史以来最好的解决方案

注意******您必须将此添加到您的访问文件“AddType application/x-httpd-php5 .html .htm” - 文件名.htaccess。这将允许您在 html 文件中执行 php，而无需重命名并将所有内容重新链接到 *.php

【参考方案2】：

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

【参考方案3】：

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

我以前用过的一个是webgen

来自webgen页面：

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

用标记语言编写内容： 内容和布局文件可以是 用标记语言编写，例如 Markdown、Textile 或 Haml 可以让 你更专注于你所做的事情 写。

自动化：webgen可以自动 生成，例如，菜单和 为您提供面包屑路径。

动态内容：很容易添加 一些动态内容，如果有 需要它。

【参考方案4】：

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

【讨论】：

如果服务器端脚本绝对不可能，这将起作用。但它会更难维护。

【参考方案5】：

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

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

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

【讨论】：

有趣。我几乎避开了 Dreamweaver，因为它的 CSS 布局支持不是很好，而且生成的代码也不是很容易管理。

【参考方案6】：

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

【讨论】：

我同意。这正是我开始使用 PHP 的原因。

另一个论点：不重复自己，可以减少错误。如果您有 50 个菜单代码副本，那就是 50 个可能错误的菜单；如果你有 1 个，你可以看看那个。

是的，很好，而且很重要。减少人为错误的可能性总是可以节省大量时间。

【参考方案7】：

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

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

【讨论】：

投了反对票，因为他显然不是在寻找这个答案，但你还是推荐了它。

他听了 4 个选项，问我推荐哪个。有时我想知道我为什么要打扰

我投了反对票，因为你给出了一个极其简单的答案，提到了他已经知道的一切（这意味着你的答案没有实际用途），而且他没有像他问的那样问“你推荐哪个”你有什么推荐”（即坚持其他选择）

@CWS - 我认为你错了。 OP要求推荐。 dcaunt 认为列出的选项之一是最好的，并解决了 OP 对服务器端的担忧之一，包括可移植性。也许对现有答案进行投票会更好，但我认为 dcaunt 的回答没有任何问题。

OP 从未提到可移植性是一个问题。相反，关注点是为了这个小问题而采用额外的框架层。无论如何，当我看到基本上没有信息和/或反应迟钝的答案时，我会感到困扰

【参考方案8】：

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

【讨论】：

是的。我正在使用 Notepad++ 做几乎相同的事情。

【参考方案9】：

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

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

如果您对静态站点生成器概念完全陌生，并且想知道模板引擎和元数据是什么，give this article a read.

【参考方案10】：

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

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

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

【讨论】：

使用 PHP 或任何其他脚本都没有问题，这几乎是我倾向于的方向。我只是想看看有什么替代品。

【参考方案11】：

每当我的客户向我展示此类网站时，我都会使用 PHP。您可以轻松地将所有重复出现的 HTML 放在一个文件中并通过函数调用它，或者将它放在单独的文件中并通过 include/requires/what have you 调用它。

最重要的是，无论您为谁维护网站，都希望通过某种方式让他们自己添加内容。您已经拥有足够的必要框架，使其对他们来说非常简单。

【讨论】：

我不知道。按照同样的逻辑，你对内联框架的推荐可以被构建为简单地提到他已经知道的东西。此外，他没有明确要求其他选择，所以给我的“2 美分”应该是完全有效的。

常规框架和内联框架之间存在相当大的差异。此外，OP 评论了 Ryan 的帖子“使用 PHP 或任何其他脚本没有问题，这几乎是我倾向于的方向。我只是想看看有什么替代方案。”

问题已经解决了，但是，如果我没记错的话，我在 Goro 的评论之前发布了这个。我不认为添加+1（有推理）投票不一定对讨论没有任何贡献，有时你只需要人们同意你。最后，我不会称差异相当大。归根结底，iframe 仍然是一个框架。 OP 确实提到了框架，就像他提到 PHP 一样，我不认为我的回答比你的更简单。

啊，当我投反对票时，iirc 评论已经在那里了。另外，你说得对，归根结底，iframe 仍然是一个框架，但是！这里的区别在于设计方面的含义。如果您使用导航栏制作框架集页面，您可能会在热链接、选项卡式浏览、书签、打印、屏幕空间和浏览器历史记录方面造成各种问题。你可以用 JavaScript 来解决这些问题（这实际上是我在使用框架时所做的），但 iframe 完全避免了这些问题。此处的正确 iframe 实际上与 php 包含没有什么不同，除非没有 php。

【参考方案12】：

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

【参考方案13】：

我会说内联框架对于出现在每个页面上并且需要在每个页面上都进行更新的菜单之类的东西就可以了。去掉边框，大小合适就行了。

【参考方案14】：

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

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

【参考方案15】：

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

//你的内容放在这里

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

【参考方案16】：

您可以在不使用 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>

【参考方案17】：

我会将所有可抓取的内容放入 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 生成。