Question

使用静态HTML / XHTML创建公共页眉/页脚文件以在网站的每个页面上显示是否有不错的方法？我知道你可以用PHP或服务器端指令明显地做到这一点，但有没有办法做到这一点，绝对不依赖于服务器拼接所有东西给你？

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

Answer 1

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

服务器脚本

这包括像php，asp，jsp这样的东西....但你对此说不了

服务器端包含

您的服务器正在为这些页面提供服务，那么为什么不利用内置的server side includes？每个服务器都有自己的方法来实现这一点，利用它。

客户端包括

此解决方案让您在客户端上加载页面后回调服务器。

Answer 2

JQuery load（）函数可用于包含公共页眉和页脚。代码应该像

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

您可以找到演示here

Answer 3

由于HTML没有“include”指令，我只能考虑三种解决方法

帧
的Javascript
CSS

对每种方法做一点评论。

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

Javascript是一个相当广泛的主题，并且可能存在许多方法如何使用它来实现期望的效果。然而，我可以想到两个方面：

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

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

Answer 4

你可以用javascript来做，我不认为它需要那么花哨。

如果你有一个header.js文件和一个footer.js。

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

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

请记住您正在撰写的字符串中的escape any nested quote characters。然后，您可以使用

从静态模板中调用它

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

并且类似于footer.js。

注意：我不推荐这个解决方案 - 它是一个黑客并且有很多缺点（对于初学者而言SEO和可用性很差） - 但它确实符合提问者的要求。

Answer 5

最佳解决方案是使用具有模板/包含支持的静态站点生成器。我使用Hammer for Mac，它很棒。还有Guard，一个ruby gem来监视文件更改，编译sass，连接任何文件，并且可能包含。

Answer 6

您可以使用jquery轻松完成此操作。这个简单的任务不需要php。只需在您的网页中包含此内容即可。

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

现在对任何元素使用数据加载来从外部html文件调用其内容你只需要在你希望放置内容的html代码中添加一行。

示例

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

Answer 7

最实用的方法是使用服务器端包含。当你有超过几页时，它很容易实现并节省大量工作。

Answer 8

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

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

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

或：

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

Answer 9

HTML框架，但它不是理想的解决方案。您基本上可以一次访问3个单独的HTML页面。

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

Answer 10

没有。静态HTML文件不会更改。你可以用一些花哨的Javascript AJAXy解决方案做到这一点，但这样做会很糟糕。

Answer 11

现在，每种脚本语言中都存在使用本地模板系统（如数百种），甚至使用带有sed或m4的自制模板系统并将结果发送到服务器，不行，不是吗？ d至少需要SSI。

Answer 12

您可以使用任务运行器，例如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'));
    });

Answer 13

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

<!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>

注意：：内容将从顶部加载到底部，并替换您加载到其中的容器的内容。

Answer 14

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

带有静态HTML的常见页眉/页脚

14 个答案:

服务器脚本

服务器端包含

客户端包括