互联网营销搜索引擎优化
网站源码视觉设计
广告标识开源CMS
网站代码网站搭建
益智玩具工具箱
精准搜索请尝试:精确搜索

Z-Blog相关文章图文列表

2020-05-09 17:46 来源:蓝之橙 作者:蓝之橙

  之前很多平台都提供这样的插件,在文章的结尾出现一个相关文章列表,相关文章列表页都带有 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/* 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模板,模板内容为<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>

分享给小伙伴们:
本文标签: Z-Blog

更多文章

相关文章

©www.ant521.com 2019 All Rights Reserved. 基于DedeCms v5.7

邮箱:2213105148@qq.com 备案信息:豫ICP备16035918号-1

Power by DedeCms