Question

我想让我的标题，导航栏，侧栏和页脚在所有页面之间保持同步，只与内容/容器区分开来。我知道有一个PHP命令（包括：http://www.w3schools.com/php/php_includes.asp），但我的网络托管不支持服务器端脚本，只支持静态网页。我特意寻找JavaScript和jQuery的方法。

Answer 1

您可以使用Jekyll之类的静态网站生成器，在您的个人计算机上生成页面并将最终文件上传到虚拟主机服务器。

Answer 2

您可以使用Underscore Javascript and its templating system：

简单示例：

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

然后tpl({foo: "Hello World"})将呈现给字符串<h1>Some text: Hello World</h1>

Answer 3

如果您确实需要保留此限制而不使用服务器端呈现，我建议您查看类似 jade 模板的内容。 http://jade-lang.com/

你不需要太多的开始，你只需要安装npm（https://www.npmjs.com/ - 如果你想在将来用网络做更多的事情，你可能还是需要它< / em>）和命令行玉器工具。

然后在您的模板中，您可以执行以下操作：

// homepage.jade include 'header.jade' … include 'footer.jade'

你会得到漂亮的html文件。

优点是你最后确实拥有可靠的html文件，因此它们的来源将是一个完整，正确的html文档，并且用户不需要在之前加载一些javascript库它可以下载并以某种方式将部分htmls附加到主文档中。

他会马上获得整个文件。

Answer 4

正如@ chris85在评论中所说，我认为最好的方法是切换托管公司。请记住，如果没有服务器端脚本，则无法将任何信息存储在数据库中以供进一步使用，也不能具有网站的某些基本功能，例如联系表单。

那就是说，如果你真的想要重新使用标题等网站，我会为所有请求创建一个页面，并通过JavaScript和＆处理所有链接点击。 jQuery的。

但请注意，随着您的网站变得越来越大，这种方法很快就难以维护。

让我们举一个简单的例子：

<强>的index.html

//= require cocoon

<强> file.js

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome single-page Website</title>
    </head>
    <body>
        <header>
            <ul>
                <li><a class="menu-link" href="home.html">Home</a></li>
                <li><a class="menu-link" href="about.html">About</a></li>
                <li><a class="menu-link" href="contact.html">Contact</a></li>
            </ul>
        </header>
        <div id="main">
            <!-- let JavaScript handle the magic -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="file.js"></script>
    </body>
</html>

<强> home.html的

$(function(){
    $('.menu-link').click(function() {
        $.get($(this).attr('href'), "", function(data){
            $('#main').html(data);
        });
    });
})

<强> about.html

<div>
    Be welcome!
</div>

<强> contact.html

<div>
    About page
</div>

在没有服务器端脚本（PHP）的所有页面上显示相同的内容（标题，导航栏，侧栏，页脚）

4 个答案: