Z-Blog相关文章图文列表

栏目: Html · 发布时间: 5年前

内容简介:之前很多平台都提供这样的插件,在文章的结尾出现一个相关文章列表,相关文章列表页都带有 1-10 张不等的缩略图,而我们独立博客却少有这样的插件,通常只有纯文字方式的相关文章列表,本文就介绍一下Z-Blog如何实现带图片的相关文章列表功能。先安装一个名为FirstIMG的插件,之后,修改zb_system/function/c_system_lib.asp文件的Export_Mutuality函数,开头增加一行 Dim ArticleFirstIMG在 strCC_Title=objArticle.Title
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="Z-Blog相关文章图文列表"

Else

ArticleFirstIMG="Z-Blog相关文章图文列表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模板,模板内容为

  • <#article/mutuality/firstimg#><#article/mutuality/name#>
  • 修改b_article-single.html模板,在适当的位置增加相关文章代码

    <#ZC_MSG231#>

    然后重建文章即可,最终相关文章的展示样式参见下图所示。

    Z-Blog相关文章图文列表


    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

    查看所有标签

    猜你喜欢:

    本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

    Java语言程序设计

    Java语言程序设计

    (美) Y. Daniel Liang / 李娜 / 机械工业出版社 / 2011-6 / 79.00元

    本书是Java语言的经典教材,畅销多年不衰。本书全面整合了Java的特性,采用“先讲基础”的教学方式,循序渐进地介绍了程序设计基础、面向对象程序设计、GUI程序设计等。另外,本书还全面且深入地覆盖了一些高级主题,包括算法和数据结构、并发、网络、国际化、高级GUI、数据库和Web程序设计等。 本书中文版由《Java语言程序设计 基础篇》和《Java语言程序设计 进阶篇》组成。基础篇对应原书的第......一起来看看 《Java语言程序设计》 这本书的介绍吧!

    RGB转16进制工具
    RGB转16进制工具

    RGB HEX 互转工具

    在线进制转换器
    在线进制转换器

    各进制数互转换器

    HSV CMYK 转换工具
    HSV CMYK 转换工具

    HSV CMYK互换工具