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

yazou

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

1. <style>
2. @media (min-width:1168px) {
3.   <b:eval expr='&quot;
4.   #snippet_thumbnail_id_&quot;
5.   + data:post.id'/> {
6.   background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,256,&quot;
7.   1:1&quot;
8.   ).cssEscaped'/>);
9. }
10. }@media (min-width:969px) and (max-width:1167px) {
11.   <b:eval expr='&quot;
12.   #snippet_thumbnail_id_&quot;
13.   + data:post.id'/> {
14.   background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,1167,&quot;
15.   3:2&quot;
16.   ).cssEscaped'/>);
17. }
18. }@media (min-width:601px) and (max-width:968px) {
19.   <b:eval expr='&quot;
20.   #snippet_thumbnail_id_&quot;
21.   + data:post.id'/> {
22.   background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,968,&quot;
23.   3:2&quot;
24.   ).cssEscaped'/>);
25. }
26. }@media (max-width:600px) {
27.   <b:eval expr='&quot;
28.   #snippet_thumbnail_id_&quot;
29.   + data:post.id'/> {
30.   background-image:url(<b:eval expr='resizeImage(data:post.featuredImage,600,&quot;
31.   3:2&quot;
32.   ).cssEscaped'/>);
33. }
34. }</style>

复制代码

分别在

1. <b:eval expr=前加上//images.weserv.nl/?url=
2. 变成这样子：

复制代码

1. [/code]
3. [code]<style>
4. @media (min-width:1168px) {
5.   <b:eval expr='&quot;
6.   #snippet_thumbnail_id_&quot;
7.   + data:post.id'/> {
8.   background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,256,&quot;
9.   1:1&quot;
10.   ).cssEscaped'/>);
11. }
12. }@media (min-width:969px) and (max-width:1167px) {
13.   <b:eval expr='&quot;
14.   #snippet_thumbnail_id_&quot;
15.   + data:post.id'/> {
16.   background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,1167,&quot;
17.   3:2&quot;
18.   ).cssEscaped'/>);
19. }
20. }@media (min-width:601px) and (max-width:968px) {
21.   <b:eval expr='&quot;
22.   #snippet_thumbnail_id_&quot;
23.   + data:post.id'/> {
24.   background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,968,&quot;
25.   3:2&quot;
26.   ).cssEscaped'/>);
27. }
28. }@media (max-width:600px) {
29.   <b:eval expr='&quot;
30.   #snippet_thumbnail_id_&quot;
31.   + data:post.id'/> {
32.   background-image:url(//images.weserv.nl/?url=<b:eval expr='resizeImage(data:post.featuredImage,600,&quot;
33.   3:2&quot;
34.   ).cssEscaped'/>);
35. }
36. }</style>

复制代码

就可以正常显示前端缩略图了