Showtime

秋思工作室

粗茶淡饭随缘过,富贵荣华莫强求。

导航

当前位置:首页博客技巧 > 正文页面

给Q-Black主题摘要添加标签缩略图

2017年7月30日 本文作者:秋思 浏览:

  今天尝试给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)缩略图的效果。下面是我在本地测试时的效果图。

Z-Blog 1.8文章列表页面调用标签(Tags)缩略图效果演示

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

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

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

  5、相关说明:

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

版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则

文章标签:Z-Blog  主题  

首发网站:秋思工作室

原文链接:http://www.qiusi.me/post/60.html

{$comment.Author.StaticName}
1秋思 于 2017/8/2 14:30:04 发表
网址:http://www.alishuwu.com  回复:Reply
虽然不是真正意义上的缩略图,但也算不错,给纯文字页面增加了一些生气。

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

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

最新文章

文章存档

标签

©2017-2023 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.