跳至主要内容

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,雷得电去机场接奶奶等人,途中被蹲守的地方警员以嫖客身份控制,经几小时的纠缠,雷不幸身亡,当日正好是其结婚纪念日。

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

一、最近关于网站的想法 建立个人独立博客,从不会到目前基本能简单搭建已经过去了3、4年了,在我最初接触到的wordcodess到dede再到discuz,这个过程以前写过一篇 文章介绍 。当时是抱了多大的希望在这上面,自己看看都觉得愚不可及,在这过程中我注册过不少的域名,换过不少的网站标题,从上手wordcodess再转移其它阵地,……哦对了,我还用xiuno轻论坛程序弄过一段时间论坛……,到近期在wordcodess坚持了比较长的一段时间,林林总总,前前后后,一句话:折腾博客本身比写博客用的心思更多,这样的历程当然是走歪了。但是这几年下来,自己虽然越来越懂一点网络异事,设置不少模板主题功能,到头来,翻翻自己以前所写的少许原创文章,更多的感觉是空洞与荒芜。为了让经常翻看博客内容的自己不感到平淡无味,将更多的心思汇焦在如何写出有价值的博文,这是每一人博主老生常谈又难以持续的事。