【发布时间】:2019-10-10 08:15:37
【问题描述】:
我又开始编写小型企业网站了,在 10 个 HTML 页面中有 40% 的重复代码(标题和菜单)似乎很愚蠢。另一方面,在这样一个小项目中抛出类似Next.js 的东西似乎也有点矫枉过正。
是否有一种简单的方法可以通过在服务器端或客户端的每个页面中包含 head.html 来减少重复代码?
【问题讨论】:
标签: javascript html include seo html-head
我又开始编写小型企业网站了,在 10 个 HTML 页面中有 40% 的重复代码(标题和菜单)似乎很愚蠢。另一方面,在这样一个小项目中抛出类似Next.js 的东西似乎也有点矫枉过正。
是否有一种简单的方法可以通过在服务器端或客户端的每个页面中包含 head.html 来减少重复代码?
【问题讨论】:
标签: javascript html include seo html-head
我更喜欢 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> 括号。
一个页面或很少重复的部分调用另一个页面并防止冗余。
【讨论】:
您无法使用客户端 JavaScript 执行此操作,因为它在标头解析后运行。您应该为此使用服务器端技术。从 SSI 到 PHP :)
【讨论】:
Jekyll 非常好用且易于使用。您可以剥离所有不需要的功能。也有模板填充可用。它为整个站点输出静态 html,因此您不需要您的服务器运行任何守护进程。
【讨论】: