Question

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

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

我知道你可以使用：

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

你会推荐什么？

感谢。

Answer 1

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

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

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

对于两个，你在每个页面加载时运行一个脚本，以便提供基本上是静态文件的东西。这会减慢您的响应速度，并不必要地强调CPU。这可能并不重要（延迟非常小），但是如果你发现它很浪费，那么有一些很好的PHP框架可以为你生成PHP生成的页面并为它们生成静态htmls。（这也很容易做到，只需要使用输出缓冲即可完成一些工作。）通过这种方式，您可以获得两全其美的效果 - PHP模板（如果您最终想要更精彩的东西，还可以使用完整的PHP语言））但是静态html页面用于最小的CPU活动和最快的页面加载时间。

Answer 2

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

Answer 3

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

我过去使用的是webgen

来自webgen页面：

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

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

自动化：webgen可以自动完成   例如，生成菜单和   面包屑的踪迹。

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

Answer 4

自从我使用它以来已经很长时间了，但是Dreamweaver是使用静态网站的一个很好的工具。它有一个模板/重复区域机制，为此目的使用了注释。

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

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

Answer 5

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

Answer 6

总的来说，我推荐PHP - 它对包含的处理正是你所需要的，它使动态变得更加容易，更容易管理。

使用PHP安装托管也非常容易。

Answer 7

正如其他人所说，静态站点生成器是可行的方法。

DocPad是新的静态网站生成器，使用Node.js和CoffeeScript构建，它能够支持coffeescript，coffeekup，{{等jade，stylus等前沿标记。 3}}和markdown以及其他常用的haml和give this article a read.支持。

如果您对静态网站生成器概念完全陌生，并且想知道模板引擎和元数据是什么，{{3}}

Answer 8

使用服务器端脚本可能没有任何其他原因，但肯定减少编写代码的数量是使用它的一个很大的理由你不会想到吗？这将使网站维护更加有效。

Answer 9

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

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

除此之外，其他人将其制作成一个，然后将其复制并粘贴到其他页面。

Answer 10

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

Answer 11

我过去曾使用过Webby，并且非常满意它是如何轻松制作并减少重复的。

Answer 12

我会说内联框架可以很好地用于每个页面上显示的菜单，并且需要在每个页面上进行更新。只需移除框架边框，正确调整尺寸，它应该是好的。

Answer 13

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

最重要的是，如果您维护网站的任何人，希望能够通过某种方式自行添加内容。您已经拥有足够的必要框架来使它们变得非常简单。

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>

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

17 个答案: