Showtime

秋思工作室

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

导航

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

给文章列表页添加文章缩略图

2020年12月8日 本文作者:秋思 浏览:

  经过三个多星期的折腾,借助小一的FirstIMG插件,我总算是给秋思工作室的文章列表页全部文章都加上了缩略图,秋思工作室也不再象以前那样单调了,多了一份活力。下面,秋思把自己修改的过程分享出来,有需要的朋友可以参考。

给文章列表页添加文章缩略图

  一、Z-Blog系统

  Z-BlogASP 1.8版本,Z-BlogASP 2.X版本和Z-BlogPHP版本的请绕行,谢谢。

  二、使用的插件

  小一制作的FirstIMG插件,下载地址:XiaoYi_FirstIMG.zpi

  三、修改的过程

  1、安装插件:通过Z-Blog后台插件管理,从本地导入插件ZPI文件,提交即可。

  2、修改主题:打开TEMPLATE文件夹中的b_article-multi.html文件,在添加缩略图的位置添加如下代码并保存,然后文件重建。前台刷新页面就可以看到效果了,不过当前的显示的效果肯定不是很好,需要进行CSS样式修改和调试。

  <div class="post-minitu">
<a href="<#article/url#>"><#xiaoyi/first/img#></a>
</div>

  3、CSS修改:这个我就直接贴出自己的代码了。

  .post-minitu {
float:left;
margin:0;
padding:10px 0 0 0;
width:160px;
text-align:left;
}
.post-minitu img {
float:none;
clear:both;
padding:0;
border:1px solid #ccc;
width:160px;
height:100px;
}

  四、友情提醒

  1、由于添加了缩略图,因此文章摘要的宽度也是需要修改的。不过我个人为了页面整齐,把全部文章摘要都重新修改了一次。

  2、小一的FirstIMG插件是调用文章中的第一张图片,因此需要给文章添加图片(如果保持图文一致的话,这是一件浩大的工程),否则只显示一片空白(可以设置背景图代替,效果肯定差很多)。

  3、由于图片占用服务器空间,建议把图片放到免费托管网站比较好。微博相册路过图床都是不错的选择

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

文章标签:Z-Blog  插件  秋思工作室  

首发网站:秋思工作室

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

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

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

最新文章

文章存档

标签

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

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