在网站中包含菜单的良好做法？答案

【问题标题】：Good practices for including a menu in a website?在网站中包含菜单的良好做法？
【发布时间】：2012-02-18 01:22:06
【问题描述】：

我对网站建设很陌生。然而，在 LaTeX 和其他一些编程语言方面确实有一些经验。

我真的尝试并重用代码等。因此，在构建我的网站时，我想“包含”例如其他页面中的菜单，而不是显式地复制粘贴它。

据我所知，有几种方法可以做到这一点：

菜单是静态页面，您的内容位于 iframe 中。这是最糟糕的方法，因为它会破坏很多东西，例如后退/前进等......（我知道这对某些人来说可能是可取的，但在我的情况下不是）。
这就是我现在使用的：每个网页都包含使用 iframe 的菜单：
```
<iframe src="menu.html" class="menu" height="100%" frameborder="0"></iframe>
```
这种方法的缺点是：当人们重新访问您的网站时，菜单无法正确重新加载，除非您使用一些脚本专门告诉浏览器这样做：
```
document.getElementById('some_frame_id').contentWindow.location.reload();
```
这是我的想法，因为我的新主机允许这样做：包括使用 SSI 的菜单。
```
< !--#include virtual="/menu.html"-->
```
可能的缺点是每个网页都必须允许包含，因此必须进行解析（这会减慢文件系统的速度）。安全对我来说不是问题。

你会推荐什么？有什么应该做的礼貌规则吗？上述任何方法是否存在兼容性问题？有更好的方法吗？

例如：我怀疑第二种方法（我现在正在使用）破坏了谷歌索引，所以只有我的主页被索引。（不过我不确定这是否属实）。

【问题讨论】：

不要过早地尝试优化。使用 SSI，如果出现性能问题，然后看看你能做什么。但我敢打赌它永远不会发生。
谷歌索引没有被破坏。服务器在将 HTML 片段发送到客户端之前包含它，无论是某人的浏览器，还是谷歌的爬虫之一。永远不会发送包含“包含”注释的脚本。
@JBNizet：好的，我在this tutorial on cgi 中读到这是一个坏主意。我必须说我没有注意到我已经 SSI 的页面中的任何性能问题。是否有关于如何命名页面（扩展名）的规则/约定？我启用 SSI 的页面现在扩展 .shtml，如果我只保留所有内容 .html 会有问题吗（我知道这会起作用，但可以这样做）吗？
@sys.stderr：是的，使用 SSI 不会破坏 google 索引，但它会使用 iframe 还是我弄错了？
这本书是 1996 年出版的。它是互联网时代的史前史。您在 Internet 上浏览的大多数页面，甚至是简单的博客，都是使用 PHP 或其他服务器端编程语言动态生成的，它们对服务器施加的负载比 SSI 大得多，但它们不会导致任何性能问题。 SSI 非常快。您不会注意到与纯静态页面有任何区别。

标签： html ssi

【解决方案1】：

在 HTML5 中，您可以使用 Object 标签轻松完成此操作，例如

<object data=menu_page.html type="text/html" style="usual css..." ></object>

您必须使用 css 指定位置、宽度和高度。因此，如果它是结构 html 而不是文本内容，您可以使用 style="z-index:-1;position:absolute;top:0;left:0; width:100%;height:100%" 将其放在背景层中

这似乎适用于最新的浏览器（在 Safari 和 Chrome 上测试）

相对于 SSI 的一些优势：

客户端可以缓存经常重复的页眉页脚内容，从而减少带宽使用。
您可以在编写页面时在浏览器中离线查看页面，无需任何服务器。

【讨论】：

【解决方案2】：

1.) 一种快速的管理方法是使用 DreamWeaver 模板。任何 HTML 块都可以制作成模板。模板可用于您网站上的任何页面。模板在 DreamWeaver 中作为资产进行管理。编辑模板，DreamWeaver 会更新您站点页面中使用该模板的所有位置。该工具不是免费的。其他免费技术如下：

2.) Velocity 模板引擎驱动 apache.org 网站上的大量页面。您可以使用 ANT 来生成您的网站。 http://velocity.apache.org/engine/devel/webapps.html

3.) 如果您正在使用 Java 做任何事情……请查看 JFS 和 Facelets。 http://www.ibm.com/developerworks/java/library/j-facelets/

【讨论】：

【解决方案3】：

为什么不使用 JQuery 菜单？ http://archive.plugins.jquery.com/projects/plugins?type=44

【讨论】：

【解决方案4】：

这样做的方法是使用类似服务器端包含的东西。其他 Web 开发人员可能正在使用 PHP 或 Python 或某些模板系统，但最终的设计模式是 HTML 输出是重复的，但您的模板系统中的 HTML 不是。

您对 SSI 会降低渲染速度的担忧是没有根据的。 SSI 速度非常快，并且 Web 服务器将采用与渲染一页相同的优化；它可以将其缓存在内存中并即时处理。

鉴于您只是想避免重复的 HTML，SSI 听起来是一个不错的选择，特别是如果您已经让它工作得很好。它的缺点是缺乏高级编程功能。但是速度基本上不是 SSI 的问题。这是目前最快的解决方案之一。它也不影响 Google 索引； Google 只看到输出的 HTML，而不是 SSI。 SSI 是服务器端的。

【讨论】：