您现在的位置是:首页 > 建站建站
Z-Blog相关文章图文列表
cc博主2021-10-03【建站】672人已围观
之前很多平台都提供这样的插件,在文章的结尾出现一个相关文章列表,相关文章列表页都带有 1-10 张不等的缩略图,而我们独立博客却少有这样的插件,通常只有纯文字方式的相关文章列表,本文就介绍一下Z-Blog如何实现带图片的相关文章列表功能。
先安装一个名为FirstIMG的插件,之后,修改zb_system/function/c_system_lib.asp文件的Export_Mutuality函数,开头增加一行 Dim ArticleFirstIMG
在 strCC_Title=objArticle.Title 一行的后面,增加如下代码:
ArticleFirstIMG=FirstImg_GetImgSrc(objArticle.Content)
If ArticleFirstIMG <> "" Then
ArticleFirstIMG="<img class=""firstimg"" src=""" & ArticleFirstIMG & """/>"
Else
ArticleFirstIMG="<img class=""firstimg"" src=""<#ZC_BLOG_HOST#>zb_users/PLUGIN/FirstIMG/NoImages.jpg""/>"
End If
之后在 strCC=Replace(strCC,"<#article/mutuality/name#>",strCC_Title) 后面增加一行
strCC=Replace(strCC,"<#article/mutuality/firstimg#>",ArticleFirstIMG)
之后修改模板的style.css文件,在文件结尾增加如下css
ul.related-posts {
clear:both;
padding:0;
margin:10px 0px 0px 0px;
}
ul.related-posts li{
display:inline-block;
margin-left:5px;
padding:0;
text-align:center;
vertical-align:top;
width:195px;
}
ul.related-posts img{
background:#F7F7F7;
clear:both;
height: auto;
width:186px;
-moz-box-shadow:2px 2px 3px 1px #999;
-webkit-box-shadow: 2px 2px 3px 1px #999;
box-shadow:2px 2px 3px 1px #999;
}
ul.related-posts img:hover {
filter: alpha(opacity=50);
opacity: 0.5;
}
ul.related-posts a{
border:none;
clear:both;
display:block;
text-decoration:none;
}
ul.related-posts li{
font-size:12px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
然后修改b_article_mutuality.html模板,模板内容为
<li><a href="<#article/mutuality/url#>"><#article/mutuality/firstimg#></a><a href="<#article/mutuality/url#>"><#article/mutuality/name#></a></li>
修改b_article-single.html模板,在适当的位置增加相关文章代码
<h4 id="mutualitybox"><#ZC_MSG231#></h4>
<ul class="related-posts">
<#template:article_mutuality#>
</ul>
然后重建文章即可,最终相关文章的展示样式参见下图所示。
相关文章
猜你喜欢
国庆带哪款手机出游?华为nova 10z让你无惧续航焦虑,拍照效果出众
业界在即将到来的国庆长假,很多用户考虑更换一部新手机,来陪伴自己的旅行出游,祖国大好河山如果可以完美收纳进手机中,往后翻看也是一件值得回味的往事。那么,在购机预算不多的情况下,哪款手机是值得我们国庆出游携带的呢?其实大家可以考虑入手一台华为nova 10z,作为...
阅读更多仅需28nm工艺,提升AI芯片十倍能效,国产存算一体「超速前进」
芯片仅仅在五、六年前,人工智能还只存在于人们的想象。雷峰网雷峰网(公众号:雷峰网)短短几年间AI快速扩张,AI算力和运算数据量每年都在以指数级增加,对算力的需求空前,但摩尔定律却已接近极限。在能耗墙和存储墙的阻挡下,半导体愈来愈蹒跚的算力提升已经追不上狂奔的A...
阅读更多免费v2ray节点机场推荐-酸酸乳ssr节点账号分享每日更新(2022/8/16)
技术好文今天星期二,cc博主为大家提供v2ray节点机场推荐-酸酸乳ssr节点账号分享每日更新,更新于2022年8月16日17点更新,最新v2ray节点分享。需要付费节点下方推荐点击v2rayn出门右拐即可,周末更新资源部分可用,免费资源不易,请大家珍惜。CC博客将分...
阅读更多90后数学天才韦东奕又火上热搜,被曝一晚上解决博士团队4个月难题,曾拒绝哈佛留任北大
业界5月6日雷峰网(公众号:雷峰网)消息,90后北大老师韦东奕又火上热搜,而且霸占了微博热搜前两名,分别是:“韦神”和“哈佛曾为韦神打破校规”。韦东奕是一名90后数学天才,因横扫各种数学竞赛金奖,被网友广称为超脱外物的「韦神」。根据微博热搜话题显示,一个6人...
阅读更多硬核实测 | 深信服超融合承载Oracle,重载虚拟机热迁移居然这么平滑
业界云化时代,虚拟机热迁移(Live migration)是被大家广泛关注的的热点技术,作为云计算平台核心技术之一,虚拟机热迁移也是信服云一直深入钻研的底层技术。那么信服云旗下的超融合产品在热迁移上实力究竟如何?这场测试揭晓了答案。虚拟机热迁移指虚拟机从一台宿...
阅读更多