我们在教程《剑鱼论坛如何设置导航菜单》中介绍过怎么设置导航菜单,这一篇我们将来学习实现导航菜单的主题(模板)代码。
我们先来看一下默认主题里面的导航菜单源码:
{volist name="caidan" id="vo"}
{empty name="vo.child"}
<li class="nav-item{if condition="$vo.active eq 1"} active{/if}">
<a class="nav-link" href="{$vo.href}">{$vo.icon}{$vo.name}</a>
</li>
{else /}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{$vo.href}" id="navbarDropdown" data-toggle="dropdown">
{$vo.icon}{$vo.name}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{volist name="vo.child" id="voc"}
<a class="dropdown-item{if condition="$voc.active eq 1"} active{/if}" href="{$voc.href}">{$voc.icon}{$voc.name}</a>
{/volist}
</div>
</li>
{/empty}
{/volist}
以上代码就是摘自默认主题的导航菜单源码,我们来解释一下这个代码。
这个代码用到了一个名为“caidan”的标签,并且这个标签是一个循环输出标签,我们用标签语法“volist”来循环输出。在循环体内部,我们首先用了“empty”语法来判断是否存在子菜单,如果没有子菜单的话,那么直接用HTML代码的“li”标签来输出菜单项;如果有子菜单的情况,那么先输出这个菜单项,然后再使用一个“volist”语法来循环输出其子菜单,子菜单的标签是“vo.child”,这里要注意的是,由于子菜单的循环是在最外面的大循环内部,所以子菜单循环的id需要跟外部循环不一样,我们这里用了“voc”来标记,循环体内部就可以使用“voc.标签名”的方式来进行输出。
每个输出项的标签意思如下:
{$vo.href}:表示菜单项的地址;
{$vo.icon}:表示菜单项的图标;
{$vo.name}:表示菜单项的名称。
另外还有一个条件判断语句“$vo.active eq 1”用来判断是否当前活动菜单项,如果是活动菜单项的话,那么添加“active”样式高亮显示。
由于默认主题是使用前端框架bootstrap4写的,所以这里的样式代码是bootstrap4的,如果您使用的是其他前端框架或者完全自己写样式的话,那么只需要把里面的HTML代码和对应的样式改成您自己使用的就可以了,剑鱼的标签结构您完全可以照搬,所以实现起来也是不难的。
好了,剑鱼论坛的导航菜单制作已经介绍完了。