原文地址：https://www.lawpai.com/2020/06/blogger-notable.html
Blogger官方主题可以说款款经典。之前用过Contempo主题，这个主题除了本文介绍的缩略图的问题外，在右侧上部有个人简介区块，在中国境内使用的话，个人简介由于是调用blogger后台数据，因此显示不正常，如果去除这个区块，主题整体效果欠佳。
因此这次开始尝试Notable主题（Dracula款）。Notable主题比较简洁，其实前端主要是解决调用缩略图片的问题，参考这篇文章：
https://blog.iljw.me/2019/07/blogger-thumbnail.html
的图片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>
就可以正常显示前端缩略图了
