剑鱼论坛主题(模板)制作之友情链接

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

上一篇《剑鱼论坛主题(模板)制作之面包屑导航》中我们介绍了面包屑导航的制作,这一篇我们来继续学习新的内容。

一般情况下,站长都会跟其他站交换一些友情链接,剑鱼论坛设置友情链接也是十分方便的,关于友情链接的设置,可以参考这篇教程:《剑鱼论坛怎么添加友情链接》。这一篇我们将介绍怎么在主题里面制作友情链接。

我们先来看下面的代码:

<div class="container-fluid pb-2 px-5">
<div class="row">
<div class="col">
{volist name="youlian" id="vo"}
<a href="{$vo.dizhi}" class="m-1 text-muted" target="{$vo.target}">{$vo.mingcheng}</a>
{/volist}
</div>
</div>
</div>

上面的代码摘自默认主题的“footer.html”文件,我们先来解释一下,我们在先前的教程中提过默认主题是使用前端框架bootstrap4来实现页面样式的,所以这里的HTML代码和样式是bootstrap4的,如果您看不明白,可以先忽略。我们只看剑鱼的标签,这里使用了标签“youlian”来循环输出友情链接的内容,“youlian”就是“友链”的拼音。在循环体内部的标签如下:

{$vo.dizhi}:表示友链的地址;

{$vo.target}:表示友链打开的方式,可以在后台设置友链时设置;

{$vo.mingcheng}:表示友链的名称。

标签使用很简单,您制作的时候,只需要照搬标签就可以了。

上面的友链代码是文字代码,也就是输出的是文字友链,我们知道在后台设置友链时可以设置图片友链,那么怎么输出图片友链呢?

我们需要用到另一个用于输出图片友链的标签“tubiao”,实际的用法如下:

<div class="container-fluid pb-2 px-5">
<div class="row">
<div class="col">
{volist name="youlian" id="vo"}
<a href="{$vo.dizhi}" class="m-1 text-muted" target="{$vo.target}"><img src="{$vo.tubiao}" height="20"></a>
{/volist}
</div>
</div>
</div>

上面的代码我们把“{$vo.mingcheng}”替换成了“<img src="{$vo.tubiao}" height="20">”,标签“{$vo.tubiao}”就是图片的地址,这个就是图片友链的标签代码,也是很简单的。

论坛主帖
162
论坛跟帖
142
在线访客
1
今日主帖
0
今日跟帖
0
今日注册
0
53
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
剑鱼论坛