Showtime

秋思工作室

专注于初中教育教学管理及初中数学教学。

导航

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

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

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

  Z-Blog 1.8版本其实也算是很成熟的Z-Blog系统了,但是还是有一定的局限性,其中最让人纠结的就是文章列表页摘要调用缩略图这一功能。我搜索了很多关于Z-Blog 1.8文章列表页摘要调用图有关的文章,发现主要有两种方法:一是利用标签(Tags)摘要来实现文章列表页摘要缩略图;二是利用插件FirstIMG来调用文章第一幅图片实现缩略图。

  以上两种方法我都在本地博客测试过,第二种方法不是很靠谱,利用插件FirstIMG来实现文章列表页缩略图的缺点是不能固定缩略图的大小,并使其按比例缩小,这就失去了缩略图的真正意义了。第一种方法虽然比较靠谱,但是并不是调用文章内图片,尽管图片的大小可以控制,操作也很简单,但总感觉不尽人意。或许以后还是要把Z-Blog 1.8版本升级到Z-BlogASP 2.X或者转到Z-BlogPHP版本,不过这是后话了,我还是决定在本地测试一下给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)的名称保持一致,可以使用中文名称。

本站文章在没有加注转载说明的情况下,均为本站原创,转载请注明来源和出处。

来自:秋思工作室 | 链接:http://www.qiusi.me/post/60.html

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

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

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

最新文章

文章存档

标签

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

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