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

转载 Jack  2018-11-15 阅读 542 次 评论 0 条
摘要导读

原标题:ZBlog实现调用文章缩略图的几种方法

ZBlog实现调用文章缩略图的几种方式,这里通过使用ZBlog程序里的TAG标签来实现这一功效。目前有两种方式可用,分别是调用<#template:article_tag#>标志跟 <#article/firsttagintro#>标志,两种方式都各有利弊,前一种能够在缩略图上设置TAG链接但每篇文章只能有一个TAG,后者每篇文章能够领有多个TAG但就不能在缩略图上设置链接。方式一:调用<#template:article_tag#>标志实现文章缩略图功效。

zblog实现调用文章缩略图的几种方式,这里通过使用ZBlog程序里的TAG标签来实现这一功效。目前有两种方式可用,分别是调用<#template:article_tag#>标志跟 <#article/firsttagintro#>标志,两种方式都各有利弊,前一种能够在缩略图上设置TAG链接但每篇文章只能有一个TAG,后者每篇文章能够领有多个TAG但就不能在缩略图上设置链接。

BLOG.jpg

方式一:调用<#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="<#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目录下的tHEMES\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" /><#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><#sxger/first/img#><#article/intro#></div>即可。

3、实现以上内容修改后,在Z-Blog后台进行重新编译“文件重建”即可生效。

最后说明:

1、本文章中说到的文件路径、CSS风格都是默认的,依据应用的主题不同,可能网页代码会有所差别,然而修正的文件跟原理都是一样的。

2、在应用中要确保各TAG摘要有一个对应的缩略图片,TAG摘要假如是英文还须要大小写要同缩略图片名字相同,避免在LINUX主机上呈现无效调用的情形。

3、在CSS文件修正布局,大家能够依据本人的爱好随便定制,如缩略图的位置、大小、图片加框等殊效。

4、如想要在文章页也显示缩略图,也可以参照上面的方法,修改Z-Blog目录下的THEMES/default/TEMPLATE/post-single.php文件即可。

本文地址:https://www.sxger.com/blog/15.html
温馨提示:文章内容系作者个人观点,不代表盛星阁对观点赞同或支持。
版权声明:本文为转载文章,来源于 Jack ,版权归原作者所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论


表情

还没有留言,还不快点抢沙发?