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

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

在此之前

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

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

代替的语法为:

<data:post.featuredImage/>

通过上面代码获得的图片链接并不是图片的原始链接。Blogger 会文章中的图片上传到谷歌的服务器,得到一个新的链接,此链接在国内不能访问。

我的思路

一、不使用 JavaScript

  1. 编辑你的博文,切换为 HTML 模式,在文章最前面加入图片链接,并设置样式使其不显示:
<a style="display: none;" href="#">图片地址放在这里</a>
  1. 在 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 有一个语法可以获取文章的全部内容,我们可以使用 JavaScript 利用正则表达式将文章中的第一张图片链接提取出来。

代码如下:

  1. 将 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>
  1. 修改模板,在缩略图处加入以下代码:
<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>

具体实现,可参考本站。以及下方评论区。

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

三、使用图像缓存和调整服务

Images.weserv.nl 是一个图像缓存调整服务。使用方法为:https://images.weserv.nl/?url= + 图片地址。如:

https://images.weserv.nl/?url=https://lh3.googleusercontent.com/proxy/xEyLqHkPb9mD2P9z19zdKlvHubho2dTlmlScOUGvV1HzhmpODKyOUFXZt8Sa9AiaqHR20IF2H8U_9SjLtcJhDtX9qDwuXvjtFR7GH2scm2pBRIGjubsEuSp6yBcbcHpaqODk5gl8DDbxV_HTutGkgchC-P4rig

点击测试图片。

这样,存于谷歌服务器的图片就能在国内访问了。

  • 支持 GIF,JPEG,PNG,BMP,XBM,WebP 和其他文件类型;
  • 支持IPv6,提供双栈,并支持仅IPv6的源主机
  • 支持 HTTPS;
  • CDN由Cloudflare提供;
  • 平均每小时调整 600万个图像,每月产生大约 400TB 的出站流量。

在 Blogger 中,你可以这么使用:

https://images.weserv.nl/?url=<data:post.featuredImage/>

此博客中的热门博文

免费公益的 SSR 机场推荐汇总

我的科学上网经历

为波兰版的 MIUI ROM 加入小米钱包功能(模拟门禁、公交卡)