有没有更快的方法来更新HTML网站中的所有页面？

Question

我已经建立了一个包含多个页面的网站，每个页面都有一个包含水平导航栏的标题。 每当我学到一些有关HTML的新知识或对标题的设计有一个想法时，我都会更改标题。 但是，经过几次学习和更改后，我意识到我必须复制并粘贴网站上每个页面标题的代码，并且我认为对于较大的网站，这可能是一个非常重要的过程。耗时的过程。 有什么办法可以节省那段时间？

• 我完全理解，最好在将代码添加到其他页面之前先完成代码。
• 如果事实是我只要做工作而不走捷径，那我就完全可以了。
• 我知道HTML中没有函数，我只是想确保我没有草率地编写代码或做任何不必要的事情。

我目前正在学习HTML和CSS，因此对于我的问题无论如何看起来都是愚蠢或荒谬的，我深表歉意。 另外，很抱歉，如果标题用词不正确或不正常，我不确定如何将其归纳为一个问题。

谢谢，

-Ethan S.

Answer 1

您想要的包括。 有几种方法可以包括：

• 使用Gulp，Grunt，Webpack等任务管理器进行前端处理 （预处理），您可以将相同的部分HTML嵌入到多个目标中。
• 后端流程 ：使用后端语言时，您也可以实现此目的。

为简单起见，并且鉴于您的知识可能只是100％的前端，我建议以下其中一项：

1. JavaScript：绝对初学者的选择。 不需要后端，但通常不建议这样做（可能不安全，做法不正确）

    <!DOCTYPE html> <html> <head> <title>My site</title> </head> <body> <div class="header-container"></div> <script> (async function () { const headerHTMLRequest = await fetch('./header.html'); const headerHTML = await headerHTMLRequest.text(); document.querySelector('.header-container').innerHTML = headerHTML; })(); </script> <!-- rest of page --> </body> </html> 

2. PHP：这是一种解释性的后端语言，并且有MAMP或XAMPP之类的多种工具，它们将为您提供开箱即用的服务器解决方案。 还有很多免费的托管替代方案。

    <!DOCTYPE html> <html> <head> <title>My site</title> </head> <body> <?php include("header.html"); ?> <!-- rest of page --> </body> </html> 

希望这是有道理的。 我试图保持简单。

Answer 2

我感到您的无奈。 好的，我知道有些人对PHP的想法很反感，但是请忍受我。 如果您有想要在所有页面上使用的标头，则只需将标头的所有代码放入单独的文件中，并将其另存为“ header.php”，然后键入：

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

在页面顶部。 您对其余页面所做的唯一真正更改是确保将所有页面另存为.php文件而不是.html文件。

使用PHP的简单代码行，您所做的就是将构成头文件（“ header.php”）的那部分代码导入到当前页面中。

w3schools网站上有一个非常不错的简单说明。

PS在测试PHP页面时，您必须通过服务器。

祝你好运！ 不要放弃

Answer 3

您正在寻找一种支持偏语的模板语言 。

局部变量是列表和页面模板中较小的上下文相关组件，可以经济地用于保持模板干态（不要重复自己）。

一些模板语言的语法比其他模板的语言更接近HTML，因此可以四处看看。

大多数模板语言都在服务器上编译 。 它们不是仅提供给客户的预制文件。 相反，它们可以根据请求在服务器上进行编译，并作为客户端的HTML。

这与静态HTML文件（您现在可能正在使用的）相反，在静态HTML文件中，客户端请求HTML文件，然后按原样获取它。

我个人在Node.js / Express服务器上使用Handlebars ，因为它的语法接近HTML。