我们在《剑鱼论坛主题(模板)制作之导航菜单》一文里面介绍了剑鱼论坛主题制作的导航菜单的实现,这一篇我们将介绍另一个用于导航的实现,就是面包屑导航。
我们在访问剑鱼论坛的时候,会发现如下的导航:
上图所示就是截取的上一篇内容页面的部分截图,其中红色框框起来的就是面包屑导航,面包屑导航可以让您快速地进入访问路径的每个位置。这一篇我们就是要学习如何实现面包屑导航的主题代码。
我们还是以默认主题为案例来介绍,看下面的代码:
<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”标签,表示是否最后的页面,如果是,那么不用加链接。
这些标签都很好理解,基本上一看就明白了,您只需要照着写就可以了。
延伸阅读:《面包屑导航的由来》。