ZBlog文章列表的缩略原图如何替换成真正的缩略图

文章列表的缩略图不是真正的缩略图？

　　最近逛ZBlog应用中心的收费主题，看了部分主题的演示站，每次打开演示站的时候，加载页面有点慢，然后发现文章列表的缩略图实际上是原图。在此前，我购买了李洋博客的微博秀主题，每篇文章可以最多显示三张缩略图，而且都是原图，假设一个页面最多显示10篇文章，一个页面30张缩略原图，加载时间就很长了。

[涂涂缩略图高级版]插件

　　在ZBlog应用中心看见了[涂涂缩略图高级版]插件，简单地研究了下，感觉此插件不错，修改文章列表页的模板，把原来的缩略图代码替换成此插件的调用缩略图代码，大大缩短加载页面的时间。

插件的优点

一、自由调整缩略图的宽度和高度。

二、不同的文章列表模板（比如左图右文、上图下文）可以是的不同的缩略图尺寸，互不影响。

三、调整图片质量，质量越小，缩略图文件就小。

四、一键清空生成的缩略图。

插件的使用方法

插件的原理

　　修改文章页模板后，第一次打开有文章列表的页面，检测该页面的每篇文章是否有已生成的缩略图，如果没有，就自动生成文章的第一张图片的缩略图，如果已有生成的缩略图，就显示纯静态图片网址。

（只简单地研究了会，大概是这样）

修改步骤

一、在插件设置修改一下图片质量，建议设为80，点击下方的“提交”按钮。（不用管宽度高度）

二、通过[主题编辑器]插件找到文章列表的模板。

三、找到文章列表调用缩略图的代码，如果不会找，可以在浏览器按Ctrl + F键，输入src，查找代码。

找到此行代码有没有“{$article.Url}”或者“{$article.Title}”。

（不同的主题，模板不一样，自己判断此行代码是不是缩略图代码。）

四、把src右边的调用缩略图代码替换成插件的调用缩略图代码：{tt_thumb_pro_url($article,210,140)}

上图代码中的210和140，是缩略图的宽度和高度，在首页用截图工具看一下缩略图的尺寸是多少，在代码中修改对应的宽度和高度。

五、修改完成后就保存此模板。

六、最终效果。

通过审查工具查看页面文件大小和加载时间。

附加提醒

一、部分主题的文章模板有多种文章列表样式，比如置顶文章或者推荐文章，也要替换成插件的缩略图代码。

二、缩略图无法显示，在插件设置打开此开关。

三、此插件适用于无缩略图或者只有一种缩略图显示方式的主题，不适用于多种显示缩略图样式的主题，如李洋博客的[宁静致远]主题（有多种显示缩略图的方式和自定义缩略图），可以使用另一种方法：bufanz.com/post/48.html

标签： ZBlog 插件 主题 缩略图 优化

赏