带有静态HTML的通用页眉/页脚

Question 1

静态HTML / XHTML是否有一种不错的方式来创建要显示在网站的每个页面上的通用页眉/页脚文件？我知道您显然可以使用PHP或服务器端指令执行此操作，但是有没有办法完全不依赖服务器的依赖来将所有内容拼接在一起呢？

编辑：所有非常好的答案，这是我所期望的。HTML是静态的。没有运行服务器端或客户端的东西，没有真正的方式来改变它。我发现Server Side Includes似乎是我最好的选择，因为它们非常简单并且不需要脚本。

Question 2

有三种方法可以做你想要的

服务器脚本

其中包括php，asp，jsp等。但是您对此表示反对

服务器端包括

您的服务器正在处理页面，为什么不利用内置服务器端包含的功能呢？每个服务器都有自己的方式来利用它。

客户端包括

此解决方案让您在页面已加载到客户端之后回叫服务器。

Question 3

jQuery load（）函数可用于包含常见的页眉和页脚。代码应该像

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

您可以在此处找到演示（已存档）

Question 4

由于HTML没有“ include”指令，因此我只能想到三种解决方法

镜框
Java脚本
的CSS

对每种方法进行一点评论。

框架可以是标准框架或iFrame。无论哪种方式，您都必须为它们指定一个固定的高度，因此这可能不是您想要的解决方案。

Javascript是一门很宽泛的主题，可能有许多方法可以使用它来达到预期的效果。但是，我可以想到两种方法：

完善的AJAX请求，它请求页眉/页脚，然后将其放置在页面的正确位置；
<script type="text/javascript" src="header.js"> 其中有这样的东西： document.write('My header goes here');

通过CSS这样做确实是一种滥用。CSS具有content允许您插入一些HTML内容的属性，尽管并不是真的打算这样使用它。另外，我不确定浏览器是否支持此结构。

Question 5

您可以使用javascript来做到这一点，我认为它不必那么花哨。

如果您有header.js文件和footer.js。

然后header.js的内容可能类似于

document.write("<div class='header'>header content</div> etc...")

请记住在编写的字符串中转义任何嵌套的引号字符。然后，您可以从静态模板中调用

<script type="text/javascript" src="header.js"></script>

同样适用于footer.js。

注意：我不推荐这种解决方案-这是一个hack，并且有很多缺点（对于SEO较差，对于初学者而言则不易使用）-但它确实满足发问者的要求。

Question 6

您可以使用jquery轻松做到这一点。如此简单的任务不需要php。只需在您的网页中添加一次即可。

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

现在在任何元素上使用data-load从外部html文件中调用其内容，您只需要在要放置内容的html代码中添加一行即可。

例

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Question 7

最好的解决方案是使用具有模板/包含支持的静态站点生成器。我在Mac上使用Hammer，这很棒。还有Guard，这是一个用于监视文件更改，编译sass，连接任何文件甚至可能包含文件的红宝石。

Question 8

最简单的方法是使用纯HTML。

您可以使用以下方式之一：

<embed type="text/html" src="header.html">

要么：

<object name="foo" type="text/html" data="header.html"></object>

Question 9

最实用的方法是使用服务器端包含。当您拥有多个页面时，它非常容易实现，并节省了大量工作。

Question 10

HTML框架，但这不是理想的解决方案。您实际上将同时访问3个单独的HTML页面。

我认为您的另一种选择是使用AJAX。

Question 11

您可以使用任务运行器，例如gulp或grunt。

有一个NPM gulp软件包，可以即时进行文件归档并将结果编译为输出HTML文件。您甚至可以将值传递到局部。

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

gulp任务的示例：

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Question 12

您可以尝试通过客户端加载它们，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

注意：内容将从上到下加载，并替换您要加载到其中的容器的内容。

Question 13

不会。静态HTML文件不会更改。您可以使用一些精美的Javascript AJAXy解决方案来做到这一点，但这将是不好的。

Question 14

现在，每种脚本语言都没有使用像数百种这样的本地模板系统，甚至没有使用自己的自制模板系统。 sed或者m4将结果发送到您的服务器，不，您至少需要SSI。

Question 15

仅使用静态HTML包含另一个文件的唯一方法是iframe。对于页眉和页脚，我认为这不是一个很好的解决方案。如果您的服务器出于某些奇怪的原因不支持PHP或SSI，则可以使用PHP并在上传之前对其进行本地预处理。我认为这是比iframes更好的解决方案。