Blogger官方主题可以说款款经典。之前用过Contempo主题,这个主题除了本文介绍的缩略图的问题外,在右侧上部有个人简介区块,在中国境内使用的话,个人简介由于是调用blogger后台数据,因此显示不正常,如果去除这个区块,主题整体效果欠佳。
因此这次开始尝试Notable主题(Dracula款)。Notable主题比较简洁,其实前端主要是解决调用缩略图片的问题,参考这篇文章:
我选择用:
的图片CDN功能。
找到主题中的这部分代码:
<style> @media (min-width:1168px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,256," 1:1" ).cssEscaped'/>); } }@media (min-width:969px) and (max-width:1167px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,1167," 3:2" ).cssEscaped'/>); } }@media (min-width:601px) and (max-width:968px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,968," 3:2" ).cssEscaped'/>); } }@media (max-width:600px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,600," 3:2" ).cssEscaped'/>); } }</style>
分别在
<b:eval expr=前加上//images.weserv.nl/?url=
变成这样子:
<style> @media (min-width:1168px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,256," 1:1" ).cssEscaped'/>); } }@media (min-width:969px) and (max-width:1167px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,1167," 3:2" ).cssEscaped'/>); } }@media (min-width:601px) and (max-width:968px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,968," 3:2" ).cssEscaped'/>); } }@media (max-width:600px) { <b:eval expr='" #snippet_thumbnail_id_" + data:post.id'/> { background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,600," 3:2" ).cssEscaped'/>); } }</style>
就可以正常显示前端缩略图了。
评论