10 次查询 耗时 0.050 秒
共写了1637个字,约4分钟读完,共有0条留言
登录/注册
  • 首页
  • »
  • 时光机
  • »
  • Z-Blog相关文章图文列表
  • Z-Blog相关文章图文列表

    作者:比比东

    日期:2020年12月02日

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

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

    Z-Blog相关文章图文列表

    Z-Blog相关文章图文列表

    Back Top
    — 于 共写了1637个字
    — 文内使用到的标签:
    — 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

    “Z-Blog相关文章图文列表”共有0条评论

    发表评论

    B em del U Link Code Quote