剑鱼论坛主题(模板)制作之面包屑导航

 剑鱼论坛 发表于 2019年12月22日 剑鱼主题教程  155
剑鱼论坛
LV 6 高中
最后在线:5小时前
加入时间:339天前
主帖:89  跟帖:53

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

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

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

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

<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”标签,表示是否最后的页面,如果是,那么不用加链接。

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

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

论坛主帖
162
论坛跟帖
142
在线访客
3
今日主帖
0
今日跟帖
0
今日注册
0
51
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛