使用 js 脚本生成 <head> 和 <footer>答案

【问题标题】：using a js script to generate <head> and <footer>使用 js 脚本生成 <head> 和 <footer>
【发布时间】：2017-10-17 12:28:06
【问题描述】：

当我们总是用相同的<links>或<script>来加载我们网站的所有HTML文件的<head>或<footer>时，在每个页面中复制/粘贴真的很痛苦web 文件夹，尤其是当我们必须修改它们时。我wrote a JavaScript script 为了在每个 HTML 页面中加载相同的内容：我在脚本中编写了内容（使用 ES6）并在我调用脚本的任何地方加载内容。这是一个好的做法还是一个非常糟糕的做法？

谢谢！

【问题讨论】：

为什么不使用 php 或其他语言来实现文件包含？

标签： javascript html templates

【解决方案1】：

使用框架，例如RequireJS

【讨论】：

【解决方案2】：

使用框架进行签名； Webpack 也是捆绑依赖项的绝佳选择

【讨论】：

【解决方案3】：

您需要的东西可以在 PHP 中轻松完成。您只需要一个页脚和一个头文件，它们将用作模板，您只需使用 PHP 标记在需要的地方包含页眉和页脚，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<?php include 'header.php';?>


<?php include 'footer.php';?>
</body>
</html>

或者，如果您更愿意完全使用 JavaScript，您可以使用 Node，比如说，Express 作为后端，您可以使用 EJS includes 作为页眉和页脚。

【讨论】：

我说的是<head>，而不是<header>。但是感谢您的建议，尽管我的目标是尽可能不使用 PHP :)
与 JavaScript 路由一起进入 HTML 文件头部的所有内容在任何情况下都将进入头部模板。如果您需要更多关于 JavaScript 模板的信息，请查看这篇文章：creativebloq.com/web-design/templating-engines-9134396