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

- 七月 11, 2019

为 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 利用正则表达式将文章中的第一张图片链接提取出来。大概流程如下：

在模板中，创建一个一容器，用于放置缩略图。
1. 因为缩略图链接是在后续使用 Javascript 加上去的，所以我们可以使用一张 loading 图先占位，这样一开始博客读者们会认为图片正在加载中，可提高用户体验。如本博客所使用的 loading 图。
在模板中，将
```
<data:post.body.escaped/>
```
放在合适位置。
1. 这步是方便 Javascript 代码接获取文章的内容；
在模板合适位置插入 Javascript 代码。
1. 获取文章内容后，利用正则表达式从文章中提取出第一张图片的链接；
2. 用第一张图片链接替换掉 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 的服务器上，所以有时候图片加载速度可能不会很快。

在此全文结束，如果你对上文的步骤有什么不懂，可以在下方的评论处留言，我会抽空解答。

在写作时，我希望把问题讲清楚，但囿于成文时理解水平有限，不能一一解释，故文章后续会不断增删补改，敬请谅解。

搜索此博客

Meeo's Blog