为JPress主题添加导航菜单

JPress之家发布 开发教程 2016-10-06 1746

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

上一篇初始化了一套基于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样式。