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

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

因此这次开始尝试Notable主题(Dracula款)。Notable主题比较简洁,其实前端主要是解决调用缩略图片的问题,参考这篇文章:
我选择用:
的图片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>
就可以正常显示前端缩略图了。



评论

此博客中的热门博文

谷歌blogger平台建立国内可访问博客攻略

雷洋之死完美官收(多图)

游记:游览华岩寺

马步方面资料整理