ZBlog实现调用文章缩略图的几种方法

  • A+
所属分类:zblog
摘要

ZBlog实现调用文章缩略图的几种方法

之前发布了几篇关于ZBlog小技巧的文章:《在外部网站调用Zblog最新文章的方法》、《Zblog文章页如何调用静态化的最新文章列表》、《如何在ZBLOG文章页调用分类最新文章列表》。本文介绍ZBlog实现调用文章缩略图的几种方法。ZBlog至今还没有发布调用文章缩略图的相关插件,这里介绍通过利用ZBlog程序里的TAG标签来实现这一功能。目前有两种方法可用,分别是调用<#template:article_tag#>标记和<#article/firsttagintro#>标记,两种方法都各有利弊,前一种可以在缩略图上设置TAG链接但每篇文章只能有一个TAG,后者每篇文章可以拥有多个TAG但就不能在缩略图上设置链接。

方法一:调用<#template:article_tag#>标记实现文章缩略图功能

1、打开Z-Blog目录下的THEMES/default/TEMPLATE/b_article_tag.html文件,将内容更改为:<a href="<#article/tag/url#>" rel="tag"><img src="<#ZC_BLOG_HOST#>logo/<#article/tag/name#>.gif" alt="ZBlog实现调用文章缩略图的几种方法" alt="ZBlog实现调用文章缩略图的几种方法" alt="<#article/tag/intro#>" /></a>,上面红色文字为添加内容。

2、打开Z-Blog目录下的THEMES/default/TEMPLATE/b_article-multi.html文件,将原来的<div><#article/intro#></div>修改为<div><#template:article_tag#><#article/intro#></div>,上面红色文字为添加内容。然后把下面的一行<h5><#ZC_MSG138#>: <#template:article_tag#></h5>删除掉。

3、打开Z-Blog目录下的HEMES\default\STYLE\default.css文件,找到div.post-body这一块,在后面添加以下内容:

div.post-body img.thumb {
border:0px solid #666;
float: right;
margin: 10px 10px 10px 10px;
padding: 0px;
padding: 0px;
max-width: 500px;
max-height:500px;
overflow:hidden;
clear:both;
}

4、进入Z-Blog的Tags管理,给每个Tags增加一个摘要,内容可以为英文或拼音缩写,用于图片名称。接着在Z-Blog根目录下新建一个logo文件夹,以后文章的TAG缩略图就上传到这里(缩略图命名格式为xxxx.gif,红色部分是Tags的摘要名称)。

5、完成以上内容修改后,在Z-Blog后台选择“文件重建”即可生效。

提示:使用<#template:article_tag#>标记实现文章缩略图,每篇文章只能有一个TAG,每个TAG都要有一个对应的图片文件,并且是GIF格式的图片。

方法二、调用<#article/firsttagintro#>标记实现文章缩略图功能

1、打开Z-Blog目录下的THEMES/default/TEMPLATE/b_article-multi.html文件,将原来的<div><#article/intro#></div>修改为<div><img src="<#ZC_BLOG_HOST#>/logo/thumb_<#article/firsttagintro#>.gif" alt="ZBlog实现调用文章缩略图的几种方法" alt="ZBlog实现调用文章缩略图的几种方法" /><#article/intro#></div>,上面红色文字为添加内容。

2、打开Z-Blog目录下的HEMES\default\STYLE\default.css文件,找到div.post-body这一块,在后面添加以下内容:

div.post-body img.thumb {
border:0px solid #666;
float: right;
margin: 10px 10px 10px 10px;
padding: 0px;
padding: 0px;
max-width: 500px;
max-height:500px;
overflow:hidden;
clear:both;
}

3、进入Z-Blog的Tags管理,给每个Tags增加一个摘要,内容可以为英文或拼音缩写,用于图片名称。接着在Z-Blog根目录下新建一个logo文件夹,以后文章的TAG缩略图就上传到这里(缩略图命名格式为thumb_xxxx.gif,红色部分是Tags的摘要名称)。

4、完成以上内容修改后,在Z-Blog后台选择“文件重建”即可生效。

提示:使用<#article/firsttagintro#>标记实现文章缩略图,每篇文章支持多个TAG,多TAG文章将默认显示第一个TAG缩略图。该标记在Z-Blog 1.8 Walle Build 100427版本中才添加的,所以在以前的旧版本中不适用。

方法三、提取文章中的第一张图片作为文章摘要配图

这是Z-Blog的一个首页摘要文章图片显示插件,名叫FirstIMG。通过该插件,Z-Blog可以实现首页每篇文章自动显示文章的第一张图片。

1、点击下载“FirstIMG插件”,解压后在Z-Blog后台上传安装,安装后点击启用该插件。

2、打开Z-Blog目录下的THEMES/default/TEMPLATE/b_article-multi.html文件,将原来的<div><#article/intro#></div>修改为<div><#xiaoyi/first/img#><#article/intro#></div>,上面红色文字内容为该插件的功能标记。

3、完成以上内容修改后,在Z-Blog后台选择“文件重建”即可生效。

文章最后补充:

1、本所以文章中说到的文件路径、CSS风格都是默认的。根据使用的主题不同,可能网页代码会有所差异,但是修改的文件和原理都是一样的。

2、在使用中要确保各TAG摘要有一个对应的缩略图片,TAG摘要如果是英文还需要大小写要同缩略图片名字相同,防止在LINUX主机上出现无法调用的情况。

3、在CSS文件修改部分,大家可以根据自己的喜好随意定制,如缩略图的位置、大小、图片加框等特效。

4、如果想要在文章页也显示缩略图,可以参照上文方法将标记添加到Z-Blog目录下的THEMES/default/TEMPLATE/b_article-single.html文件中即可。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin