Z-Blog相关文章图文列表
幻冰小站 浏览次数:509 2020-08-21 16:33:07

  之前很多平台都提供这样的插件,在文章的结尾出现一个相关文章列表,相关文章列表页都带有 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="" Else     ArticleFirstIMG="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

/* Related Posts */ 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模板,模板内容为

  • <#article/mutuality/firstimg#><#article/mutuality/name#>
  •   修改b_article-single.html模板,在适当的位置增加相关文章代码

    <#ZC_MSG231#>

      然后重建文章即可,最终相关文章的展示样式参见下图所示。

    顶一下 ▲()   踩一下 ▼()