我们在教程《剑鱼论坛如何设置导航菜单》中介绍过怎么设置导航菜单，这一篇我们将来学习实现导航菜单的主题（模板）代码。

我们先来看一下默认主题里面的导航菜单源码：

{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代码和对应的样式改成您自己使用的就可以了，剑鱼的标签结构您完全可以照搬，所以实现起来也是不难的。

好了，剑鱼论坛的导航菜单制作已经介绍完了。