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

问题描述

 < div id =navbarclass =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li>< a href =＃contact>教程< / a>< / li> 
< li>< a href =＃contact>博客< / a>< / li> 
< li>< a href =＃about>关于< / a>< / li> 
< li>< a href =＃contact>联络< / a>< / li> 
< / ul> 
< / div> 
  

我在我的网站上有导航栏，其中包括几页。
问题是，无论何时我创建新页面，我都必须反复输入所有导航栏内容。

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

我找到了一个叫模板标签的东西，但不知道我该如何使用它。

解决方案

您可以使用jQuery来做到这一点。为NAV创建单独的页面。例如：header.html。

然后将header nav包含在header.html页面中。然后在你想要获得菜单的页面中创建'id'。在这里我使用一个叫做主菜单的ID。然后使用jQuery，你可以添加你的html菜单到相关页面。

  $（＃main-menu）。load（header.html）; 
  

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

$ b

//导航到页面$（'＃main-menu'）。load .html'）; < script src =https ：< / id>< / div>< / code>

<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>

I have the above nav bar in my website, which includes couple pages.The thing is, whenever I create new page, I manually have to enter all nav bar stuff over and over again.

So was wondering, if there are any sort of template I can wrap my nav, and use that template for other pages, so I just need to change the one template file, instead of changing whole stuff in each pages.

I found sth called template tag, but not sure how I'm suppose to use it.

解决方案

You can do this using jQuery. Create separate page for NAV. Ex: header.html.

Then include your header nav in header.html page. Then create and 'id' in the page you want to get the menu. Here I am using a div that id called main-menu. Then using jQuery you can add your html menu to relevant page.

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

Here is a code snippet. Use loading script always below the jQuery.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="main-menu"></div>

这篇关于html模板为每个页面使用相同的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！