Question

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

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

我目前正在学习HTML和CSS，因此对于我的问题无论以何种方式显得愚蠢或荒唐，我深表歉意。另外，很抱歉，如果标题用词不正确或不正常，我不确定如何将其归纳为一个问题。

谢谢

-Ethan S。

Answer 1

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

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

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

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>

PHP：它是一种解释性的后端语言，并且有MAMP或XAMPP之类的几种工具，它们可以为您提供开箱即用的服务器解决方案。还有很多免费的托管替代方案。
```
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
</head>
<body>
<?php include("header.html"); ?>

</body>
</html>
```

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

Answer 2

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

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

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

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

w3schools网站对如何执行此操作具有非常好的简单解释。

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

祝你好运！不要放弃。

Answer 3

您正在寻找一种支持偏音的templating language。

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

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

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

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

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

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

3 个答案: