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

不凡 490 0
淘宝购物先领券,更省钱

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

  最近逛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 插件 主题 缩略图 优化

发表评论 (已有0条评论)

您需要 登录账户 后才能发表评论

还木有评论哦,快来抢沙发吧~