Question

我想生成我的网页，其中包含从单个文件中获取的页眉/页脚的一些内容。

我没有服务器端的支持，我想避免使用iframe，javascript，css技巧来解决这个问题

我只需要一种软件模板，我可以编译＆＃39;我的静态html页面在通过ftp

上传之前

有类似的东西吗？你是怎么解决这个问题的？

由于

Answer 1

有一大堆软件可以满足您的需求。 静态网站生成器应该是google上的一个很好的搜索字符串。我个人的偏好是基于红宝石的nanoc，但还有很多其他的存在。 Assemble看起来也很漂亮，并配有自制发电机。

Answer 2

如果您使用include过程创建包含页眉和页脚内容的php文件，然后使用php命令运行它们，则会将html输出到stdout

Answer 3

使用iframe标记。搜索iframe的JQuery插件，例如http://jframe.co.uk/
，或者你可以使用javascript模板引擎。例如https://github.com/BorisMoore/jquery-tmpl

更新1 ：
您可以将页面的静态部分（如页眉和页脚）放在模板中，并在加载页面上将其呈现在正文中的某个标记上。

或者只是在js文件中的变量中保存标题的HTML代码。并在onload设置标头内部HTML。

第1页

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="layout.js" ></script>
</head>
<body>
    <div id="content">page 1</div>
</body>
</html>

第2页

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="layout.js" ></script>
</head>
<body>
    <div id="content">
    page 2
    </div>
</body>
</html>

layout.js

   function  mylayout(){
    var _body = document.getElementsByTagName('body') [0];
    var s = '<li>text</li>';

    var header_div = document.createElement('div');
    header_div.innerHTML  = "<p> this is <b style=\"color: blue\"> header</b><br><a href=\"page1.htm\">page1</a> <a href=\"page2.htm\">page2</a></p>";

    var footer_div = document.createElement('div');
    footer_div.innerHTML  = "<p> this is <b style=\"color: red\"> footer</b></p>";

    if (_body.firstChild){
        _body.insertBefore(header_div, _body.firstChild);
    }else{
        _body.appendChild(header_div);
    }

    _body.appendChild(footer_div);
}

window.onload = function() {
    mylayout();
};

Answer 4

MovableType具有静态文件发布模式

Answer 5

好吧，我使用了一个名为Expression Studio 4的微软程序。它允许我创建一个带有页眉，页脚和其他我知道的静态网站模板。

我认为这就是你想要的。 Youtube Video因为您想在将其上传到网络服务器之前创建它。

包含相同页眉/页脚的静态Html页面

5 个答案: