解决blogger缩略图需要科学上网的问题
1、找到blogger源码中所有缩略图(data:post.featuredImage)的代码区,修改为以下代码:
<b:if cond='data:post.featuredImage'> <!--判断文章内是否有图片,有则代码继续执行-->
<div class='snippet-thumbnail'> <!--创建一个 div 容器,缩略图放置在这里-->
<img class='post-thumbnail' sizes='(max-width: 800px) 20vw, 128px' src='../loadingimg.gif'/> <!--预先放置一个加载图片,增强用户体验-->
<textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> <!--这里放置文章全文,图片从中提取,样式设置为不显示-->
</div>
</b:if>
2、将 JS 代码放置于 </body> 标签前:
<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive"}'> <!--如果当前页是首页,搜索页,标签页,那么代码继续执行-->
<script defer='defer'>
//<![CDATA[
var postThumbnails = document.getElementsByClassName("post-thumbnail");
var postContents = document.getElementsByClassName("post-text");
for (var i=0;i<postContents.length;i++)
{
var postContent = postContents[i].innerText;
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
var imgTags = postContent.match(imgReg);
imgSrcs = imgTags[0].match(srcReg);
imgSrc = imgSrcs[1];
postThumbnails[i].setAttribute('src', imgSrc);
}
//]]>
</script>
</b:if>