javascript - 如何包含外部 HTML-Head？

Question

我又开始编写小型企业网站的代码了，在 10 个 HTML 页面上有大约 40% 的重复代码(标题和菜单)似乎很愚蠢。另一方面，抛出像 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可以有你的 slider ，和更多的部分，等等。

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>页脚末尾的括号。

一页或很少重复的部分调用另一页，避免了冗余。