Z-Blog相关文章图文列表

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

Tags：