在所有页面中包含导航栏的最佳方式是什么？答案

【问题标题】：What is the best way to include a navigation bar in all pages?在所有页面中包含导航栏的最佳方式是什么？
【发布时间】：2012-02-18 03:17:12
【问题描述】：

我正在考虑一种将导航栏添加到我所有网页的方法，当我更新文件时，所有页面也应该更新。
我在谷歌上研究了一段时间，发现是：

　PHP　
　SSI　（我什至不知道这是什么）
　JavaScript

但是哪一个是最好的？有人能解释一下SSI 是什么吗？

【问题讨论】：

标签： php javascript navigation ssi

【解决方案1】：

SSI（包括服务器端）已过时。我建议不要使用它们。 JavaScript 可以工作，但您的浏览器必须下载一个附加文件才能构建页面。此外，禁用 JavaScript 的人将无法浏览您的网站。使用 JavaScript 构建页面确实没有意义，所以除非你想要特殊效果，否则不要使用它。

PHP 是最好的选择。您只需在页面顶部添加导航脚本，例如 include_once('nav.php');。

【讨论】：

您说 Javascript 要求您在每个页面上都包含该文件，但 PHP 也是如此，正如您在紧随其后的段落中所展示的那样。
我想你知道我的意思，但我还是编辑了我的答案。
include_once?那和include有什么区别？
如果 include_once 已经被文件调用，它将什么也不做。这是一种确保您不会意外包含两次相同文件的简单方法。在您的情况下，它将确保您不会在同一页面上错误地拥有两个相同的导航栏。

【解决方案2】：

PHP

PHP 可以正常工作，但使用它意味着您必须进行一些不同的设置，包括执行以下操作：

在您的服务器上运行 PHP
将您的 .html 文件重命名为 .php
将链接更改为指向 .php 文件
至少对 PHP 有足够的了解以使用 require

SSI

SSI（服务器端包含）是一些没有人使用的古老东西。不要使用它们。但如果你好奇，可以看看mod_include。

Javascript

客户端javascript可以工作，但你最好在服务器上做这种事情。

这里有一些其他选项可供考虑。

另一种服务器端语言

PHP 不是唯一的服务器端语言。您可能更喜欢 python、ruby、服务器端 javascript 等。

XSLT

XSL 转换非常适合这种模板，可以由浏览器或服务器应用。跨浏览器的支持很好，并且已经有一段时间了。像“noscript”这样的扩展往往会破坏某些浏览器中的 XSL 转换，因此在可能的情况下，通常首选将它们应用到服务器上。

iframe 破解

您可以简单地将导航放在一个单独的 HTML 文件中，并将其包含在每个页面上的 iframe 中。仅将此作为最后的手段。如果您不能使用服务器端语言，不能或不想使用 XSLT，并且页面相对较少，那么这可能会正常工作。否则，不要这样做。

【讨论】：

【解决方案3】：

But which one is the best这取决于您已经在您的网站上使用的内容。

如果它写在 php 上，那么最好使用 php 来包含。通过简单的include('file_with_nav_bars_code'); 在您的模板或代码中的正确位置，您可以插入静态 html 代码或由上述文件生成的代码。

SSI（服务器端包含）适用于“静态”页面。它就像一个简单的脚本，可以在一些设置后由服务器完成。如果您检查 Apache 服务器的错误页面的模板，您将在那里看到 SSI 指令，其中包括页脚、标题、输出一些基本信息，如时间、请求的 URL 等。包含一些代码看起来像，同样你甚至可以包含一些CGI脚本在这里阅读更多http://httpd.apache.org/docs/2.0/howto/ssi.html和http://en.wikipedia.org/wiki/Server_Side_Includes

javascript 也适用于静态页面。您必须加载 javascript 代码，该代码将“生成”您需要的 html 代码并将其输出到您想要的页面上的位置。它有一个严重的负面影响 - 搜索引擎将无法跟踪由 js 生成的链接，因为它们不会运行它（因为 js 的访问者已关闭，但我不知道这种情况。即使是 Opera mini 也能够呈现简单js输出的结果）。简单的方法是在你想要导航栏的地方包含 js 脚本： <script src='nav_bar.js'></script> 和 nav_bar.js 你会（作为一个非常简单的例子）是这样的：document.write('some html code of the bar here, with escaped new lines and quotes');

ps：多年的经验我都试过了 :) 早期的静态页面我使用 js 和 SSI，现在我只使用 php 和其他服务器端脚本语言。您仍然可以将 javascript 与 php 生成的页面一起使用，但对于 SSI，您必须告诉网络服务器再一次传递 php 的输出以查找 SSI 指令，而不是将其返回给浏览器。

【讨论】：

【解决方案4】：

SSI 代表服务器端包含，这是一个概念，意味着您的文件都将包含同一个文件（例如导航栏），因此当您对该文件进行任何更改时，它'将反映在您的所有页面中。

PHP 和 javascript 是两个不同的东西，PHP 是服务器端语言，而 javascript 是客户端语言。

如果你只想要一个导航栏，PHP 就足够了。但是，如果您想添加任何客户端功能，例如在部分下的弹出菜单之类的东西，您也必须使用 javascript。

【讨论】：

【解决方案5】：

SSI 仍然适用于使用 v 函数或 % 的现代服务器（在 Apache/2.4.18 上测试）。

示例（导航包括）：

<!--#include file="nav.html" -->

活动菜单项示例（如果测试文档名称）：

<!--#if expr='v("DOCUMENT_NAME")=~/about.html/'-->
<a class="active" href="#">
<!--#else -->
<a href="about.html">
<!--#endif -->
About</a>

示例 2（如果在文档路径上测试）：

<!--#if expr="%{DOCUMENT_URI} =~ /product/"-->
Product path
<!--#else-->
Some other path
<!--#endif-->

.htaccess 让 SSI 工作（示例）：

AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

旧 Apache 版本使用不同的 expr 语法。

【讨论】：