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>
然后重建文章即可，最終相關文章的展示樣式參見下圖所示。
來源：月光博客
