为JPress主题添加导航菜单

全部系列教程目录：教程目录

上一篇初始化了一套基于jpress的主题，在index.html中笼统的包含了N多标签，可能给初学者带来一些困扰，所以这一篇里面将推荐一种主题分布结构。就是希望大家将header和footer独立出来，这样方便在各个页面中引用，基于FreeMaker标签系统的JPress引入文件非常方便，如果引入header.html的话，代码如下：

<#include "header.html"/> 

好了，接下来切入正题，如何为jpress主题加入菜单呢？

首先，直接贴上代码，然后具体给大家讲解下：

<div class="menu">
  <ul>
     <li><a href="${CPATH}/">首页</a>
     </li> 
     <@jp.menus> 
         <#list menus as menu>
	     <li class="page_item page-item-2"><a href="${menu.url!}">${menu.title!}</a>
             </li>
	</#list> 
     </@jp.menus>
     <li><a href="http://www.jpress.cc" target="_blank">JPress之家</a>                </li> 
    </ul>
</div>

代码讲解：

1、在导航上如果需要加入【首页】，则在<@jp.menus>标签外加入，跟后台配置无关的。

2、<@jp.menus>标签显示了在后台菜单设置的相关菜单。

3、关于菜单选中状态高亮显示，JPress也是原生支持的，代码如下：

<@jp.menus>
        	<#list menus as menu>
        		<li >
        		<a  href="${menu.url!}">
        		${menu.title!}
        		<#if menu.isActive() >
        			<span class="x-a-border"></span>
        		</#if>
        		</a>
        		</li>
        	</#list>
        </@jp.menus>

即menu有个isActive()方法判断当前菜单是不是选中状态，如果选中则是true，反之为false。根据这个状态加入选中的css样式。