谷歌博客Google Blogger完美优化国内访问缩略图显示简易个人博客

原创已于 2024-03-31 02:48:53 修改 · 3.8k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#php

于 2024-03-31 02:46:51 首次发布

Google Blogger注册

只要是拥有Google账号的用户都可以直接登陆Google Blogger注册，这个不用详细介绍

众所周知，某些原因Google的服务，包括谷歌博客Google Blogger 是无法在国内访问的，接下来通过以下方法得到一个完美完整国内直连访问。

大致的原理就是禁用CSS、JS，然后按F12-网络看哪些文件无法加载的直接替换为国内可用的源

Google Blogger 优化

一、自己必须拥有一个自己独立的域名，不管是免费的二级域名(需要两条CNAME记录)，还是购买一个自己喜欢的域名都可以，并且接入域名到cloudflare(事实上其他的也可以，这里用cf做示范)

二、进入Blogger的后台-设置-正在发布-添加自己的域名（注意必须带www之类的二级）-然后根据提示去CF的DNS填写他提示的内容添加2个CNAME，注意：wesui45qv1p5 类似这样的不要打开CDN，不然无法正常解析识别

我这里只有一条记录，另一条在验证完成之后删了

三、修改个人资料及头像：设置-最底部的-编辑个人资料-主要修改头像，其他资料随便自己填

四、接下来修改主题模板中的代码（这里演示默认主题，其他主题类似）

点击主题背景-主题的修改HTML

1.Ctrl+F 搜索，修改代码中所有http、https、src的图片链接，在链接前面加入以下链接：

https://images.weserv.nl/?url=

[或者使用这个：https://cdn.cdnjson.com/pic.html?url=]

[有条件的也可以自建代理，过段时间出教程]

如图所示是背景显示的链接

如图所示是头像的链接，是src，在data:comment.authorAvatarSrc加入：

&quot;https://images.weserv.nl/?url=&quot; +

(wsrv.nl 代理)

或者

&quot;https://cdn.cdnjson.com/pic.html?url=https:&quot; +

(路过图床CDN)

头像也可以直接搜索

<img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/>

替换为

<img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' src='图片地址' expr:width='data:authorPhoto.width'/>

然后继续搜索，涉及到jpg，gif等图片地址全部增加以上链接

这样背景图+头像都可以国内显示了

2.禁用CSS、JS文件

替换<head>为：<head>

替换</head>为：</head>

替换</body>为：</body>

3.一般在第三行<html>位置添加：b:css='false' b:js='false'

注意：添加b:js='false' 后布局就无法使用，一直加载中，等需要布局时候去掉这段代码，等布局确认后再添加进去即可

4.博文首页缩略图解决方法

将 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>

找到原有缩略图代码删去，用以下代码替换：

<b:if cond='data:post.featuredImage'>  <!--判断文章内是否有图片，有则代码继续执行-->
    <div class='snippet-thumbnail'>  <!--创建一个 div 容器，缩略图放置在这里-->
        <img class='post-thumbnail' sizes='(max-width: 800px) 20vw, 128px' src='https://img.kejione.com/file/62e5a8c4e7afb9fbe4aa8.png'/>  <!--预先放置一个加载图片，增强用户体验-->
        <textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> <!--这里放置文章全文，图片从中提取，样式设置为不显示-->
    </div></b:if>

一般是搜索：featuredImage 找到该位置，然后替换，如图所示