Question

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#contact">Tutorial</a></li>
<li><a href="#contact">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

我的网站上有上面的导航栏，其中包含几页。问题是，每当我创建新页面时，我都需要一遍又一遍地输入所有导航栏内容。

所以想知道，如果有任何类型的模板我可以包装我的导航，并将该模板用于其他页面，所以我只需要更改一个模板文件，而不是在每个页面中更改整个内容。

我发现了一个名为模板标签，但不确定我是如何使用它的。

Answer 1

您可以使用jQuery执行此操作。为NAV创建单独的页面。例如：header.html。

然后在header.html页面中添加标题导航。然后创建并且＆＃39; id＆＃39;在页面中，您想要获取菜单。这里我使用的是一个名为main-menu的div。然后使用jQuery，您可以将html菜单添加到相关页面。

$("#main-menu").load("header.html");

这是一段代码段。始终在jQuery下面使用加载脚本。

＆＃13;

// Get nav to the page
$('#main-menu').load('header.html');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="main-menu"></div>

＆＃13;

Answer 2

快速简便的方法是将代码保存为header.html之类的内容，然后将其包含在所有其他页面中。可以使用jQuery或JavaScript完成，请参阅this SO question了解。

html模板为每个页面使用相同的标题

2 个答案: