Keep on going, never give up.

如何为Z-BLOG日志增加缩略图

本文演示为Z-Blog日志增加缩略图(上篇文章叫标题图片)显示,Z-Blog系统是个非常精简的博客系统,没Wordpress复杂,所以修改起来也很简单,本文介绍两种缩略图实现方法,分别使用<#template:article_tag#>标记和<#article/firsttagintro#>标记,如想每篇文章都使用不同的标题图片,还可以使用<#article/id#>等标记处理,可根据自己情况选择。

基础阅读:

文章标题图片的三种实现方式

Z-BLOG模块文件及标签变量说明

如何为Z-BLOG边栏增加Feed订阅功能模块

一、利用<#template:article_tag#>构造文章缩略图

使用<#template:article_tag#>标记需要每篇文章只设置一个标签,否则会出现连续无法正常替换出构造的图片地址。

实现方法如下:

1、在THEMES目录(Z-Blog根目录下可看到)下找到你当前主题目录,再把主题目录下TEMPLATE下面的b_article-multi.html和b_article_tag.html两个文件,连同STYLE目录下的CSS文件下载到本地,当然如果你有权限可以直接在服务器上操作那更方便。

2、打开b_article-multi.html文章列表展示文件(html文件可以用Dreamweaver、记事本等软件),在<div class="post-body">位置后增加<#template:article_tag#>标记,把<h5 class="post-tags"><#ZC_MSG138#>: <#template:article_tag#></h5>这一段删除(如果有的话),如下图:

3、同样方法修改b_article_tag.html内容为<img src="<#ZC_BLOG_HOST#>/image/thumb_<#article/tag/name#>.gif" class="thumb" />,意思是将调用image目录下的thumb_tagname.gif为缩略图显示:

4、为该缩略图设置显示风格,打开CSS样式表文件(一般是default.css),找到div.post-body这一段,在后面加上这么一句(具体位置,需要根据你主题CSS风格确定,默认主题下是这个类):

div.post-body img.thumb {
    float:left;
    margin:4px;padding:2px;
    border: 1px solid #CCC;
}

意思是让这个缩略图篇靠左对齐,边距为4,边框为1,且颜色为#CCC。

5、修改完成后保持并上传到网站上对应的TEMPLATE和STYLE目录下,覆盖原文件。再手工制作一个小图片命名为thumb_ImTag.gif并上传到Z-BLOG的IMAGE目录下。

6、在Z-Blog后台新建一个tag标签,并命名为ImTag,新创建一篇文章,并设置该文章标签为ImTag,如下图:

7、文章内容随便输入即可,反正是测试文章,最后保存并发布,回到首页查看效果如下图:

二、利用<#article/firsttagintro#>构造文章缩略图

如果你的文章有多个TAG,如果仍使用上面方法,替换后会有问题,不过可以使用<#article/firsttagintro#>标记来解决(这个标记好像是新添加的,代表第一个tag标签的摘要信息),该替换只使用日志的第一个TAG摘要,方法同上文方法类似:

1、只需编辑两个文件:b_article-multi.html和主题下的CSS样式表,由于日志可能包含多个标签,不要修改b_article_tag.html文件内容,如果你已经按照方法1修改过需还原回去。

2、在b_article-multi.html文件里增加:<img src="<#ZC_BLOG_HOST#>/image/thumb_<#article/firsttagintro#>.gif" class="thumb" />这么一句,但:<h5 class="post-tags"><#ZC_MSG138#>: <#template:article_tag#></h5>这个部分可以不去掉(如果有的话),这样修改完成后可以既显示文字TAG同时可以显示缩略图。

4、添加CSS样式(同方法1步骤4)上传覆盖原文件后,先检查TAG摘要名称,示例如下图,要保证摘要都有对应的缩略图片(thumb_xxxx.gif格式)。

5、打开刚才创建的日志,然后再添加一个TAG(示例:YareTag),然后保存发布,显示结果如下(可显示缩略图及多个TAG标签):

三、补充说明

记得以前可以用<#article/firsttagname#>,好像在新版本中(1.8 Walle Build 100427)被修改掉了,查了一下c_system_lib.asp中的aryTemplateTagsValue变量,发现多了个<#article/firsttagintro#>就用上了。

本文测试说明:

  1. 本文示例是使用Z-Blog default主题下的测试结果,随使用的主题不同,可能网页代码有所差异,但是修改的文件一般都是相同的;
  2. 本文演示方法中的TAG只是示例,实际写文章时需要根据自己起名字,只需确保各TAG名字有一个对应的缩略图片即可;
  3. 缩略图需提前根据标签名制作,命名及格式需统一,上传到约定的目录下,比如本文是放置到IMAGE目录下,实际使用请根据需要修改。
  4. TAG名字如果是英文还需要大小写要同缩略图片名字相同,防止在LINUX主机上无法调用问题;
  5. 需注意CSS风格样式表中增加的thumb风格位置,最好放到限定范围最小的位置,风格还可以随意定制,比如居中、靠右,设置背景图片等等;
  6. 如打算在文章展示页也显示缩略图,可以把上文图片地址添加到TEMPLATE下的b_article-single.html下面的<div class="post-body">后面即可;

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.