Blogger 博文首页缩略图解决方法

为 Blogger 模板国内访问优化时，会遇到博客首页文章的缩略图不显示的问题。我总结了一种思路供大家参考1。
前言

在 Blogger 模板语法未作改动之前，我们可以利用 Blogger 本身提供的语法来获取博文的第一张图片的原始链接，以用作缩略图之用。不过从 2018 年始（个人察觉），Blogger 对语法进行升级改动，一部分旧的语法被废弃。若仍继续使用，则报错，如下所示：

<data:postFirstImage/> <!--Can't find substitution for tag [postFirstImage]-->

代替的语法为：

<data:post.featuredImage/>

通过上面代码获得的图片链接并不是图片的原始链接。Blogger 会文章中的图片上传到谷歌的服务器，得到一个新的链接，此链接在国内不能访问。
我的思路
一、不使用 JavaScript编辑你的博文，切换为 HTML 模式，在文章最前面加入图片链接，并设置样式使其不显示：<a style="display: none;" href="#">图片地址放在这里</a>
在 Blogger 模板文件的相应位置中插入以下代码：<b:if cond='data:post.featuredImage'> <!--判断文章内是否有图片，有则代码继续执行--> <div class='snippet-thumbnail'> <!--创建一个 div 容器，缩略图的内容放置于此处--> <b:with value='snippet(data:post.body,{length: 75, links: false, linebreaks: false, ellipsis: false})' var='customThumbnail'> <!--提取文章前面75个字符，存入变量 customThumbnail 中--> <img alt='postThumbnail' expr:src='data:customThumbnail' sizes='(max-width: 800px) 20vw, 128px'/> <!--设置缩略图链接--> </b:with> </div> </b:if>


上面代码中的 length:75 中的 75 是你第 1 步中图片链接的字符长度。此段代码的作用是获取每篇文章开头的固定长度的字符。

所以此方法的缺点是需要手动为每篇文章添加缩略图的地址，且缩略图链接的长度需一致；优点是不用加入 JavaScript 代码，一切在 Blogger 服务器中已完成。
二、使用 JavaScript 代码

Blogger 有一个语法（<data:post.body.escaped/>）可以获取文章的全部内容，我们可以使用 JavaScript 利用正则表达式将文章中的第一张图片链接提取出来。大概流程如下：

在模板中，创建一个一容器，用于放置缩略图。因为缩略图链接是在后续使用 Javascript 加上去的，所以我们可以使用一张 loading 图先占位，这样一开始博客读者们会认为图片正在加载中，可提高用户体验。如本博客所使用的 loading 图。


在模板中，将<data:post.body.escaped/>


放在合适位置。这步是方便 Javascript 代码接获取文章的内容；


在模板合适位置插入 Javascript 代码。获取文章内容后，利用正则表达式从文章中提取出第一张图片的链接；
用第一张图片链接替换掉 loading 图链接。

代码如下：将 JS 代码放置于 </body> 标签前：<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive"}'> <!--如果当前页是首页，搜索页，标签页，那么代码继续执行--> <script defer='defer'> //<![CDATA[ var postThumbnails = document.getElementsByClassName("post-thumbnail"); var postContents = document.getElementsByClassName("post-text"); for (var i=0;i<postContents.length;i++) { var postContent = postContents[i].innerText; var imgReg = /<img.*?(?:>|\/>)/gi; var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; var imgTags = postContent.match(imgReg); imgSrcs = imgTags[0].match(srcReg); imgSrc = imgSrcs[1]; postThumbnails[i].setAttribute('src', imgSrc); } //]]> </script> </b:if>
修改模板，找到原有缩略图代码删去，用以下代码替换：<b:if cond='data:post.featuredImage'> <!--判断文章内是否有图片，有则代码继续执行--> <div class='snippet-thumbnail'> <!--创建一个 div 容器，缩略图放置在这里--> <img class='post-thumbnail' sizes='(max-width: 800px) 20vw, 128px' src='https://ae01.alicdn.com/kf/HTB1Gb7LUmzqK1RjSZFL5jcn2XXac.gif'/> <!--预先放置一个加载图片，增强用户体验--> <textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> <!--这里放置文章全文，图片从中提取，样式设置为不显示--> </div> </b:if>


此方法优点是无需手动设置缩略图，比较省心。

缺点是要求使用有一定的 Javascript 语言基础，且每个模板的缩略图代码各有所异，所以上述代码/步骤不通用，如果你碰到问题，我可以提供帮助。
三、使用图像缓存和调整服务

Images.weserv.nl 是一个图像缓存和调整服务2。何谓「缓存」？何谓「调整」?

缓存：将外部的图片下载网站自己的服务器。

调整：进行裁切图片，修改像素比等操作，更多参数详询官网。

例子：Blogger 博文自带的缩略图链接如下：https://blogger.googleusercontent.com/img/proxy/AVvXsEgD3_hUKNNcY0ZPFJkVsSoQOmfrqbgZ4k8lvNgDo1L8cOpexGIsnOzg5e3BEChPHmjkLrC5bMGGYjvfdBAytB2SU3bnQDK2duQZnojNpQzMXM6FsTG8c7vrOXUrfpWSqyUpUglKKHNgwrTESSVEKZfh95LekIaN4sQnvjTUHrIYhDMJ-gZYZPKbjFzR1u2tKk6ZQvYMlY-f-JZAQ9P8_1MJJ2s=


使用方法为：https://images.weserv.nl/?url= + 图片地址。如：https://images.weserv.nl/?url=https://blogger.googleusercontent.com/img/proxy/AVvXsEgD3_hUKNNcY0ZPFJkVsSoQOmfrqbgZ4k8lvNgDo1L8cOpexGIsnOzg5e3BEChPHmjkLrC5bMGGYjvfdBAytB2SU3bnQDK2duQZnojNpQzMXM6FsTG8c7vrOXUrfpWSqyUpUglKKHNgwrTESSVEKZfh95LekIaN4sQnvjTUHrIYhDMJ-gZYZPKbjFzR1u2tKk6ZQvYMlY-f-JZAQ9P8_1MJJ2s=


点击测试图片速度。

images.weserv.nl 的服务器接收到了url这个参数，它的服务器向谷歌的服务器请求下载此图片，并将其上传到 Cloudflare 遍布全球的 CDN 网络中。

所以，当我们访问https://images.weserv.nl/?url=https://lh3.googleusercontent.com/proxy/...这一串连接时，我们是从 Cloudflare 上获取图片的。故其相当于一个跳板，我们借助其就可以访问 Blogger 自带缩略图了。

在官网上，已列出它的特性，我简要介绍两点我们比较感兴趣的。支持常见的图片类型，如 GIF，JPEG，PNG，BMP，XBM，WebP 等；
支持 HTTPS；

在 Blogger 中，你可以这么使用：https://images.weserv.nl/?url=<data:post.featuredImage/>


说明：在前言中，已提到，主题模板中<data:post.featuredImage/>代表着博文的缩略图的链接，故在此链接前方加上https://images.weserv.nl/?url=就可大功告成了。

举个例子：<b:if cond='data:post.featuredImage'> <div class='snippet-thumbnail'> <img expr:src='"https://images.weserv.nl/?url=" + data:post.featuredImage'/> </div> </b:if>


为什么可以选择这项服务呢？我个人是这样认为的：修改模板十分简单，在模板几处加上代码即可；
国外的服务相比于国内的服务更让人放心；
网站依托于 Cloudflare，每月处理的数据量有 400T；
免费，开源。

缺点也有一个，由于图片在 Cloudflare 的服务器上，所以有时候图片加载速度可能不会很快。

原文地址：Blogger 博文首页缩略图解决方法