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

2010年08月04 | 分类: 网站应用 | 24 条评论 | 标签: 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#>就用上了。

本文测试说明：

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

天缘博客