使用相同页眉/页脚/导航/等的选项。整个网站?

时间:2014-01-30 16:09:38

标签: html css

这或多或少地在网上的不同地方得到了回答,但是我在将我发现的内容转化为有用的信息方面遇到了一些麻烦。

我已经认识到这个问题有多种解决方案(问题是整个网站在所有数百个页面上使用相同的标题和相同的导航和相同的页脚,但是如果他们想要更改它有点,他们必须手动更改每一页。)

我考虑过的一个解决方案是使用Dreamweaver模板,这些模板在被更改后会自动反映每个页面中的这些更改...但是,我对此解决方案并不太在意,因为它依赖于Dreamweaver,我可能并不总是出于某种原因使用Dreamweaver。此外,每个页面都必须再次上传。这个解决方案对我来说不是很有吸引力。

我发现的另一个解决方案是使用PHP脚本服务将PHP文件(实际上是页眉或页脚或导航布局)插入到每个页面中。当您更改PHP文件时,更改会反映在每个页面中。

到目前为止我发现的最有吸引力的解决方案是在这个stackoverflow问题上提到的:

How to make same layout for all web pages

它提到简单地使用SSI来包含一个html页面,其中包含您希望在整个站点中保持一致的任何内容。它与PHP解决方案的概念相同;单个文件,更新后,更改会反映在每个页面上。只有它似乎是一个更清洁/更简单和更容易的解决方案。

在这三个中,SSI是最让步的,我最有利的,但还有其他解决方案吗?理想情况下,我想要的是一个允许我的解决方案:

  • 对将反映在所有页面上的单个源文件进行更改
  • 允许我在本地查看更改,而无需上传到网络服务器或无需运行本地网络服务器
  • 允许我在主导航中轻松指定当前页面

我认为这就是我正在寻找的所有东西,我无法想象没有适合我正在寻找的解决方案。允许我在导航中指定当前页面的最后一项是我一直试图弄清楚的。我目前知道将特定菜单项指定为当前页面的唯一方法是,在html中,为该特定菜单的条目分配一个类(IE:.current类到它的HTML中的“Home”页面)然后我为.current配置的CSS样式将反映在页面上。但这取决于每个页面上的菜单,因为我必须将.current类移动到每个相应的菜单项。当我打字输出时,我实际上开始意识到与我的网站结构设计有关的其他几个问题...主要是,我没有想到我将如何构建子菜单页面及其内容... bah,但是我可以通过一些仔细的思考和计划来解决这个问题:P和它真的无关,这个问题,我只是想把它扔出去,因为它可能已经被问过,或者可能会证明一些有用的信息^ _ ^

非常感谢!

无论谁低估我的问题,请解决这个问题。虽然我确定你认为这是一个多余的帖子,而且完全无用,但我之前已经找到了许多问题的答案,只有在浏览了几个相同或类似问题之后。您对类似问题的看法略有不同,对可能的解决方案的看法略有不同,这非常有用。此外,如果给出了示例,您将找到不同的示例,从而为您提供更多资源。我不认为以任何理由低估我的问题是公平的。我认为这个问题只是可能有用并且没有造成任何伤害。谢谢,非常感谢:)

2 个答案:

答案 0 :(得分:3)

SSI仍然是你的答案。首先,在本地系统上运行Web服务器很容易。如果没有一个,我绝不会建议进行Web开发。花费20分钟让http://nginx.org/运行,它将解决您可能从文件系统测试网站的其他问题。

SSI除了包含以外还有很多其他功能(通过Google搜索了解它们。)例如,您可以指示当前页面:

<ul>
<!--# if expr="${REQUEST_URI} = \/" -->
<li>Home
<!--# else -->
<li><a href="/">Home</a>
<!--# endif -->

<!--# if expr="${REQUEST_URI} = \/test.shtml" -->
<li>Test
<!--# else -->
<li><a href="/test.shtml">Test</a>
<!--# endif -->
</ul>

尽管使用JavaScript指示当前页面也是合理的。

答案 1 :(得分:0)

我强烈建议您使用PHP,但也许您可以通过在div中加载外部页面来使用JQuery来执行此操作,如下所示:

$(document).ready(function() {
    $("#div-that-will-load-").load('page_contato.php');
});

这样你就需要为HEADER,FOOTER,MENU保存在不同文件中的相同代码,并随时调用它。