欢迎光临
我们一直在努力

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)
如果ArticleFirstIMG<> ""然后
    ArticleFirstIMG="< img class="" firstimg"" SRC=""" &安培; ArticleFirstIMG& """" />"
否则
    ArticleFirstIMG="< img  class="" firstimg"" src=""< #ZC_BLOG_HOST#> zb_users/PLUGIN/FirstIMG/NoImages.jpg"" />"
万一
然后在strCC=Replace之后添加一行(strCC,"< #article/mutuality/name#>"strCC_Title)
strCC=替换(strCC,"<#文章/相互关系/firstimg#>"ArticleFirstIMG)
然后修改模板的style.css文件,并在文件末尾添加以下css。
/*相关帖子*/
Ul.related-posts {
  清除:两者;
  填充: 0;
  边距: 10px 0px 0px 0px;
}
Ul.related-posts li {
  显示:内联块;
   margin-left: 5px;
  填充: 0;
   text-align: center;
   vertical-align: top;
  宽度: 195px;
}
Ul.related-posts img {
  背景:#F7F7F7;
  清除:两者;
  高度:自动;
   宽度: 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:悬停{
   filter: alpha(opacity=50);
  不透明度: 0.5;
}
Ul.related-posts a {
   border: none;
  清除:两者;
  显示:块;
   text-decoration: none;
}
Ul.related-posts li {
  字体大小: 12px;
 溢出:隐藏;
 文本溢出:剪辑;
 白色空间: 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相关文章图文列表

分享到:更多 ()