我们在《剑鱼论坛主题（模板）制作之导航菜单》一文里面介绍了剑鱼论坛主题制作的导航菜单的实现，这一篇我们将介绍另一个用于导航的实现，就是面包屑导航。

我们在访问剑鱼论坛的时候，会发现如下的导航：

上图所示就是截取的上一篇内容页面的部分截图，其中红色框框起来的就是面包屑导航，面包屑导航可以让您快速地进入访问路径的每个位置。这一篇我们就是要学习如何实现面包屑导航的主题代码。

我们还是以默认主题为案例来介绍，看下面的代码：

<nav>
    <ol class="breadcrumb my-0 bg-white py-1">
        {volist name="daohang" id="vo"}
        <li class="breadcrumb-item{if $vo.active == 1} active{/if}">
            {if $vo.active == 1}
            {$vo.icon} {$vo.label}
            {else /}
            <a href="{$vo.href}" class="text-info text-decoration-none">{$vo.icon} {$vo.label}</a>
            {/if}
        </li>
        {/volist}
    </ol>
</nav>

上面的代码是默认主题的面包屑导航的全拷贝，实际您在制作自己的主题的时候，也只需要照样画葫芦，根据您使用的前端技术修改一下HTML和css样式就可以了。我们这里用的是bootstrap4，如果您没有学过bootstrap4也没关系，因为剑鱼主题的标签使用跟前端框架和css样式是完全没有关系的，剑鱼论坛的标签只是起到一个标记的作用，标记这个位置将输出点什么，所以您完全可以使用任何您熟悉的前端技术来制作主题。

我们来解释一下上面的代码，这里有一个名为“daohang”的标签，并且这个标签是一个循环输出标签，循环输出标签我们都可以用“volist”标签语法来进行循环和输出内容。下面对循环体内部的标签做一个介绍：

{$vo.href}表示链接地址；

{$vo.icon}表示图标，如果没有设置的话，这里输出为空；

{$vo.label}表示输出的文字。

另外还有一个“$vo.active”标签，表示是否最后的页面，如果是，那么不用加链接。

这些标签都很好理解，基本上一看就明白了，您只需要照着写就可以了。

延伸阅读：《面包屑导航的由来》。