如何包含外部HTML-Head？

Question

我回到了编码一个小型企业网站，这似乎是愚蠢的有大约40%的重复代码(头部和菜单)在10个HTML页面。另一方面，在这样一个小项目中使用像Next.js这样的东西似乎也有点过头了。

有没有一种简单的方法可以通过在服务器端或客户端的每个页面中包含一个head.html来减少重复代码？

Answer 1

我更喜欢PHP。将.html (静态)页面更改为.php (动态)页面。只是“另存为”。您可以将几乎任何内容分成模板。

您具有以下简化的文件结构：

index.php

header.php

home.php

footer.php

style.css

index.php包含+调用header.php + home.php + footer.php

header.php有你的菜单，等等。

home.php可以有你的滑块和更多的部分，等等。

footer.php有你的菜单+版权等等。

style.css有您自己的样式，并且您可以有许多.css文件，具体取决于您想要设置的样式。

您可以将其扩展到其他页面：about.php、services.php、contact.php等。

在index.php文件中添加如下内容

<?php require ('your-folder-for-content/header.php'); ?>

<?php require ('your-folder-for-content/home.php'); ?>

<?php require ('your-folder-for-content/footer.php'); ?>

关闭页脚末尾的</html>括号。

一个页面或少量重复的部分调用另一个页面，从而防止冗余。

Answer 2

您不能使用client JavaScript做到这一点，因为它在标题解析之后运行。为此，您应该使用服务器端技术。从SSI到PHP :)

Answer 3

Jekyll非常好用，而且很容易使用。你可以去掉所有不需要的功能。模板填充也可用。它输出整个站点的静态html，所以你不需要你的服务器运行任何守护进程。