在没有服务器端脚本 (PHP) 的所有页面上显示相同的内容（页眉、导航栏、侧栏、页脚）答案

【问题标题】：Display same content (header, nav bar, side bar, footer) on all pages without server-side scripting (PHP)在没有服务器端脚本 (PHP) 的所有页面上显示相同的内容（页眉、导航栏、侧栏、页脚）
【发布时间】：2015-09-07 06:01:15
【问题描述】：

我想让我的页眉、导航栏、侧边栏和页脚在所有页面之间保持同步，仅区分内容/容器。我知道有一个 PHP 命令（包括：http://www.w3schools.com/php/php_includes.asp），但我的虚拟主机不支持服务器端脚本，只支持静态网页。我正在专门寻找使用 JavaScript 和 jQuery 的方法。

【问题讨论】：

我会换托管公司..你可以使用框架..
完全同意 chris85，您必须更改虚拟主机。
将您的虚拟主机提供给支持 PHP 的人。不要拘泥于框架之类的东西，90 年代已经结束了。
伙计们，有些项目真的不需要服务器端脚本语言。还有一个有意义的静态文件托管解决方案（例如，看看firebase.com/hosting.html 提供了什么）。这并非完全没有理由。

标签： javascript php jquery html php-include

【解决方案1】：

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

【讨论】：

这是我正在考虑的一个选项：在我的个人计算机上生成同步内容，然后上传。毕竟，这是我通常做的。

【解决方案2】：

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

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

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

我们举个简单的例子：

index.html

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

file.js

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

home.html

<div>
    Be welcome!
</div>

about.html

<div>
    About page
</div>

contact.html

<div>
    Ouch, I do <b>not</b> have a contact page :(
</div>

【讨论】：

【解决方案3】：

如果您确实需要保持此限制并且不使用服务器端渲染，我建议您查看类似 jade 模板。 http://jade-lang.com/

您不需要太多开始，只需安装 npm（https://www.npmjs.com/ - 如果您将来想在网络上做更多事情，您可能无论如何都需要它) 和一个命令行翡翠工具。

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

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

你最终会得到漂亮的 html 文件。

好处是你最终确实有可靠的 html 文件，所以它们的源将是一个完整、正确的 html 文档，并且用户不需要加载一些 JavaScript 库让它下载并以某种方式将部分 html 附加到您的主文档中。

他将立即获得整个文档。

【讨论】：

【解决方案4】：

你可以使用Underscore Javascript and its templating system:

简单示例：

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

那么tpl({foo: "Hello World"})会被渲染成字符串<h1>Some text: Hello World</h1>

【讨论】：