Blogger的Notable主题如何让缩略图在中国显示

原文地址：https://www.lawpai.com/2020/06/blogger-notable.html

Blogger官方主题可以说款款经典。之前用过Contempo主题，这个主题除了本文介绍的缩略图的问题外，在右侧上部有个人简介区块，在中国境内使用的话，个人简介由于是调用blogger后台数据，因此显示不正常，如果去除这个区块，主题整体效果欠佳。


因此这次开始尝试Notable主题（Dracula款）。Notable主题比较简洁，其实前端主要是解决调用缩略图片的问题，参考这篇文章：

https://blog.iljw.me/2019/07/blogger-thumbnail.html

我选择用：

https://images.weserv.nl/

的图片CDN功能。

找到主题中的这部分代码：

<style>
@media (min-width:1168px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,256,&quot;
  1:1&quot;
  ).cssEscaped'/>);
}
}@media (min-width:969px) and (max-width:1167px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,1167,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}@media (min-width:601px) and (max-width:968px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,968,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}@media (max-width:600px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,600,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}</style>

分别在

<b:eval expr=前加上//images.weserv.nl/?url=
变成这样子：

<style>
@media (min-width:1168px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,256,&quot;
  1:1&quot;
  ).cssEscaped'/>);
}
}@media (min-width:969px) and (max-width:1167px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,1167,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}@media (min-width:601px) and (max-width:968px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,968,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}@media (max-width:600px) {
  <b:eval expr='&quot;
  #snippet_thumbnail_id_&quot;
  + data:post.id'/> {
  background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,600,&quot;
  3:2&quot;
  ).cssEscaped'/>);
}
}</style>

就可以正常显示前端缩略图了