之前很多平台都提供这样的插件，在文章的结尾出现一个相关文章列表，相关文章列表页都带有 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>
然后重建文章即可，最终相关文章的展示样式参见下图所示。
