不凡博客(Bufanz.com)
建站使我快乐......
32624142(请注明来意)

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

ZBlog | 2020年06月06日00:29:27 | 阅读:748 | 评论:0

腾讯云轻量服务器

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

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

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

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

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

插件的优点

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

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

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

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

插件的使用方法

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

插件的原理

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

(只简单地研究了会,大概是这样)

修改步骤

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

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

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

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

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

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

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

(不同的主题,模板不一样,自己判断此行代码是不是缩略图代码。)

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

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

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

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

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

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

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

六、最终效果。

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

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

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

附加提醒

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

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

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

三、此插件适用于无缩略图或者只有一种缩略图显示方式的主题,不适用于多种显示缩略图样式的主题,如[宁静致远]主题(有多种显示缩略图的方式和自定义缩略图),可以使用另一种方法:bufanz.com/post/114.html

THE END
淘宝购物先领券,更省钱

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

本文链接:https://bufanz.com/post/54.html

温馨提示:本文是作者 不凡 的原创文章,转载请注明出处和附带本文链接!

网友点评 展开评论

本文暂无评论 - 欢迎您