在每个页面上使用相同的页眉/导航

时间:2014-11-07 09:24:46

标签: css header nav

之前我使用过HTML,CSS和JS,但主要用于需要一两页的项目。现在,我正在处理一个包含大量页面的更复杂的项目。每个页面都需要在顶部包含相同的标题/导航。大多数页面还需要指向各种样式表的链接。我确信必须有一种更简单的方法,然后单独更改每个页面上的所有内容。有没有办法让所有页面使用相同的文件作为标题? (另外我不喜欢使用JS或PHP只是纯HTML / CSS,这就是为什么this answer,没有帮助)

1 个答案:

答案 0 :(得分:0)

好的,这看起来确实需要一个答案。

有多种方法可以做你想要的,这取决于你是在制作网页还是单页应用。

如果您创建单页应用程序,那么您只有一个带有页眉和页脚的html文件,然后您将使用HTML Imports或Ember或Angular之类的内容来更改内容。在这种情况下,您没有问题,因为标题/导航/页脚只存在一次。

如果你没有这样做,那么你走两条路,

1)使用您想要的任何服务器端语言(PHP,ASP.NET,Python,Ruby,Node.js等等)。如果您使用的是PHP,请创建名为header.php,nav.php和footer.php的文件。然后在index.php文件中使用:

<?php include('header.php'); ?>
<?php include('nav.php'); ?>
<h1>Title of Page</h1>
<?php include('footer.php'); ?>

2)首选选项 - 抓取模板库,例如PHP的Twig,或者使用框架中内置的任何内容,例如: Laravel的刀片。

使用这些工具构建页面。

如果你不能使用PHP或任何其他服务器端语言,那么你可以自己排序。特别是托管PHP非常便宜,很容易理清。