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

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

javascript php jquery html

Javascript 在没有服务器端脚本（PHP）的所有页面上显示相同的内容（页眉、导航栏、侧栏、页脚）,javascript,php,jquery,html,php-include,Javascript,Php,Jquery,Html,Php Include,我想让我的页眉、导航栏、侧栏和页脚在所有页面之间保持同步，只是内容/容器有所不同。我知道有一个PHP命令（include:），但我的web主机不支持服务器端脚本，只支持静态网页。我专门寻找使用JavaScript和jQuery的方法。您可以使用：简单的例子： var tpl = _.template("<h1>Some text: <%= foo %></h1>"); var-tpl=u.template（“一些文本：”）；然后tpl（{foo:“He

我想让我的页眉、导航栏、侧栏和页脚在所有页面之间保持同步，只是内容/容器有所不同。我知道有一个PHP命令（include:），但我的web主机不支持服务器端脚本，只支持静态网页。我专门寻找使用JavaScript和jQuery的方法。

您可以使用：

简单的例子：

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

var-tpl=u.template（“一些文本：”）；

然后

tpl（{foo:“Hello World”}）

将被渲染到字符串

一些文本：Hello World

如果您确实需要保持此限制并且不使用服务器端渲染，我建议您研究类似jade的模板

您不需要太多的入门知识，只需安装npm（如果您想在将来对web做更多的事情，您可能无论如何都需要它）和一个命令行jade工具

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

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

最后你会得到一个漂亮的html文件

好的一面是，最终您确实拥有可靠的html文件，因此它们的源代码将是一个完整、适当的html文档，用户不需要加载一些javascript库，只需要下载并以某种方式将部分html附加到主文档中即可

他会立刻得到整个文件。

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

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

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

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

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

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>

<div>
    Be welcome!
</div>

<div>
    About page
</div>

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

home.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>

<div>
    Be welcome!
</div>

<div>
    About page
</div>

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


欢迎光临！

about.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>

<div>
    Be welcome!
</div>

<div>
    About page
</div>

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


关于页面

contact.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>

<div>
    Be welcome!
</div>

<div>
    About page
</div>

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


哎哟，我没有联系人页面：(

您可以使用静态站点生成器，例如，在您的个人计算机上生成页面，并将最终文件上载到网络托管服务器。

我会切换托管公司……您可以使用框架。完全同意chris85，您必须更改网络托管。更改您的网络托管提供给支持PHP的人。不要坚持frames和诸如此类的东西，90年代已经过去了。伙计们，有些项目并不真正需要服务器端脚本语言。还有一种静态文件托管解决方案确实有意义（例如，看看提供了什么）。这并非完全没有理由。这是我正在考虑的一个选择：在我的个人电脑上生成同步内容，然后上传。毕竟，这是我通常做的事情。