Blogger 主题 Notable 显示首页缩略图

一图胜千言。有时候写 blog，一张配图提供的信息量之大，胜过了絮絮叨叨的文字解释。尤其是 Pyra Labs （前）Blogger.com 储存的图片，在 blogger HTML 语句驱动下，根据页面类型自动产生不同尺寸的缩略图。而且恰当使用 blogger 缩略图（thumbnails）既丰富了博客风格，又加大了信息输出。

但是有些情况下 blogger 首页不显示缩略图，Meeo 解释了 blogger 站点看不到缩略图的一般原因。如果把他分享 blogger 显示缩略图具体用到 blogger 主题样式模板 Notable，可以以下操作，实现 Notable theme 在站点首页显示缩略图。 

第一步，定位 Blogger index 的缩略图元素

在 Blogger Notable theme，首页缩略图的元素标签是 snippet-thumbnail-img 。

第二步，通过定位得到的首页缩略图页面元素，在 blogger 主题 HTML 编辑模式下找到以下代码：

<b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'> <a class='big-post-image' expr:href='data:post.url' expr:style='((data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage) ? (&quot;background-image: url(\resizeImage(data:post.featuredImage, 612, &quot;612:1000&quot;) + &quot;\&quot;);&quot;) : &quot;&quot;'/> </b:if> 更新为： <b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'> <a class='big-post-image' expr:href='data:post.url' expr:style='((data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage) ? (&quot;background-image: url(\&quot;https://images.weserv.nl/?url=&quot; + resizeImage(data:post.featuredImage, 612, &quot;612:1000&quot;) + &quot;\&quot;);&quot;) : &quot;&quot;'/> </b:if>

在 Blogger 首页显示缩略图，其原理是这样的情况：

1. 判断文章是否显示有图片。
2. 如果文章有图片，引入图片地址，并调整图片容器的高和宽分别达到 612px。
3. 由于图片地址可能无法正常解析，在图片前加入https://images.weserv.nl/?url=生成图片缓存。

Voilà。