跳至主要内容

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>
就可以正常显示前端缩略图了。



评论

此博客中的热门博文

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

◆雷洋之死真相何在雷洋是中国人民大学环境学院2009级硕士研究生,也是中共党员,毕业后在北京工作,工作单位国务院国有资产监督管理委员会下属的中国循环经济协会,生前职务是协会生态文明中心主任。他和妻子育有一女儿,出生才一月。事发当日5.7,雷得电去机场接奶奶等人,途中被蹲守的地方警员以嫖客身份控制,经几小时的纠缠,雷不幸身亡,当日正好是其结婚纪念日。

邓相超辱毛事件舆论(多图)

➤邓相超其人邓相超为民主党派人士,事前任政府参事、学院副院长教授、研究生指导教师等等职务,详细介绍可网络查询。

摘钢豆

土质很好,没有打药,没有施肥,没有锄草,三无绿色天然食品,就在我们这块土。

其实这地块并不是我们的,家乡修基建已经被征收,土地基本被铲,据说飞机就在最近要试飞,不过最终能不能有实际效用,我看不见得。毕竟相隔不远的赛车基地据说已经搁浅,人人在议论纷纷,有人说要迁往邻镇去,那边也推了大量的农地,巨大的一片,不知道要干什么。有人说不可能,这边已经土地已经征收,也平整了,人员都安置了,到底怕是后续资金跟不上的缘故。