秋思工作室

　　今天尝试给Q-Black主题文章列表页摘要添加缩略图。查了很多关于Z-Blog 1.8文章列表页摘要调用缩略图的文章，主要有两种方法：一是利用标签（Tags）来实现文章列表页摘要缩略图；二是利用插件FirstIMG来调用文章第一幅图片实现缩略图。

　　经测试，利用插件FirstIMG来实现文章列表页缩略图的缺点是不能固定缩略图的大小，并使其按比例缩小，这就失去了缩略图的真正意义了。第一种方法虽然比较靠谱，但是并不是调用文章内图片，尽管图片的大小可以控制，操作也很简单，但总感觉不尽人意。不过我还是决定在本地测试一下给Q-Black主题列表页摘要添加标签缩略图。

　　1、制作标签（Tags）图片并上传

　　给每个标签（Tags）制作一幅相同大小的Gif图片，命名为thumb_TagName.gif，集中放到本地新建的LOGO文件夹中，然后再一次性上传到Z-Blog根目录文件夹下。说明：红色加粗的TagName为标签（Tags）的名称，另外，个人认为，其实把图片上传到UPLOAD文件夹中也是可以的，只是这样做的话需要修改图片的路径（此方法仅为思路，未经测试）。

　　2、修改主题模板文件的相关代码

　　登录Z-Blog管理后台，打开主题文件夹TEMPLATE中的b_article-multi.html文件，利用浏览器工具栏中“编辑”功能中的“在此页上查找（F）”功能找到下面这句代码。

　　<div class="post-intro"><#article/intro#></div>

　　然后将其修改为下面的代码。其中红色部分代码表示调用标签（Tags）的代码，蓝色部分为该文章的链接地址。如果不想调用文章链接的话，蓝色代码可以直接删除。

　　<div class="post-body"> <a title="<#article/title#>" href="<#article/url#>"> <img src="<#ZC_BLOG_HOST#>/logo/thumb_<#article/firsttagintro#>.gif" alt="<#article/title#>" /> </a> <#article/intro#></div>

　　3、提交保存代码并进行文件重建

　　刷新页面后就可以看到主题列表页摘要部分添加的标签（Tags）缩略图的效果。下面是我在本地测试时的效果图。

　　4、修改控制标签（Tags）缩略图属性的CSS代码

 　　在当前主题CSS文件中添加相应的CSS代码，如下所示：

 　　div.post-body img{
 　　float:left;
 　　clear:both;
 　　padding:0;
 　　border:0;
 　　margin:6px 12px 0 0
 　　}

　　５、相关说明：

　　本方法不受文章标签（Tags）数量限制，默认是调用第一个标签（Tags）相应的图片。特别提醒：图片名称一定要和标签（Tags）的名称保持一致，可以使用中文名称。