Blogger搭建国内可正常访问博客(超详细教程)

一、经历

  • 前后折腾博客花了不少时间,之前本来想着弄着玩玩,于是随意买了个便宜的域名:axutongxue.top,几经周折终于搭建出满意的博客后,当机立断新买了axutongxue.com这个域名,准备认真写博了。
  • 中途在Github上用hexo也搭建了一个博客,不过可能是做公众号影响,比较习惯在本地用markdown写好,然后再在线渲染css,网页发布。不太习惯在hexo的发布博文方式,另外感觉如果以后换电脑,Github博客搬迁也是个麻烦,最后还是就想用Blogger了。
  • 写这篇文章,记录一下在Blogger上费下的精力,希望也能对一些想用 Blogger 写博客的人带来帮助。
感谢JoeyLiu大佬在我搭建过程中给了许多的帮助
他的博客:https://blog.iljw.me/
他的公众号:Joeyspace

二、国内访问 Blogger

1 首先准备

请确认自己能够科学上网。
  • 不会的话,我这里写有一篇教程:http://mooc1.chaoxing.com/zt/201723393.html
  • 购买域名。没什么好讲的,各个地方都能买,我图便利,直接在阿里云买的域名。(同一个域名,在腾讯云买还要便宜点,不过因为我上一个域名就在阿里云买的,所以这次顺便就在阿里云买了)

2.设置解析

1.Blogger要求的设置

  • 打开Blogger后台,找到设置—基本,Blogger 会提示你需要设置两个 CNAME 分别解析到ghs.google.com***.dv.googlehosted.com(每一个人的都不一样)
  • 为了 Blogger 可以在国内访问,我们不能直接按上述的解析。
  • 我们得将第一个 CNAME 解析:记录类型: A 记录,主机记录:WWW,记录值由「ghs.google.com」改成 「国内可访问的 IP」
  • 后面的一个CNAME 解析不变:记录类型:CNAME,主机记录:ai76xxxxxxxxxxx,记录值:gv-j5jxxxxxxxxxx

2. 寻找国内可访问的 IP

  • 可以使用站长之家 Ping 工具:http://ping.chinaz.com/
  • 如下图所示,Ping检测:ghs.google.com
  • 找一个国内可访问的 IP。
  • 注意:香港的IP延迟虽然小,但是不行。

3.域名后台设置解析

打开阿里云控制台—域名—域名列表—解析,照第一步所说的那样样设置,如下图:
至此,域名解析设置完成,当然这样还不够,我们还得修改Blogger自带的博客模板。
备注:如果想要实现不带www访问
添加:记录类型: A 记录,主机记录:@,记录值同为找到的 「国内可访问的 IP」
如下图这样:

这样用 axutongxue.com 也可以访问我的博客了

4.启用https

三、修改 Blogger 的模板代码

我使用的是官方Contempo这套主题模板,简洁,美观,符合我的审美。 折腾过程中,在JoeyLiu大佬帮助下发现Contempo这套模板实际上所需要修改的地方很少,并且JoeyLiu大佬也用的这套模板。
如果你想使用非官方模板,这里有详细的教程:https://www.lawpai.com/2016/10/blogger.html?m=1
提示:在修改代码之前,建议先保存备份一下原来的模板,这是一个好习惯。
Blogger 模板网站地址
  1. http://www.mybloggerthemes.com/
  2. https://btemplates.com/
  3. https://gooyaabitemplates.com/
  4. https://newbloggerthemes.com/

1. 下载Contempo模板xml文件

在弹出的窗口中选择「下载主题背景」

2.修改XML

针对Contempo模板,我们只需要屏蔽Blogger自动加载项即可。
用notepad++、Sublime、Atom等软件打开下载好的XML
我用的是Sublime_Text3,顺便提供一个自用版本的下载地址吧:点击下载
打开XML后,Sublime里面Ctrl+F搜索

1.屏蔽Blogger自动加载项即可

<head>替换为
&lt;!--<head>--&gt;&lt;head&gt;

</head>替换为
&lt;/head&gt;&lt;!--</head>--&gt;

</body>替换为
&lt;!--</body>--&gt;&lt;/body&gt;

2.替换背景图

搜索“url”,大概在第49行,可以找到一个链接,将其替换为你的背景图片地址。
下图是我替换好之后的,我用的是Github图床。
之前一直用的人民网图床,一直不显示背景图 http://bbs1.people.com.cn/postImages/Y0/70/D2/AB/69/1539491146601.jpg,换用Github图床后,即可正常显示背景图(具体什么问题未知)

3.JS问题

到目前为止,博客已经基本上可以不翻墙访问了。但是有一个问题:打开网站后,这两个按钮按不了
因为模板里有这一段代码: <b:template-script async='true' name='indie' version='1.0.0'/>执行它,会加载下述的 js 文件
  • https://resources.blogblog.com/blogblog/data/res/1468123664-indie_compiled.js
记得删除<b:template-script async='true' name='indie' version='1.0.0'/>这行代码,然后翻墙打开上面的网址,右键另存为得到一个.js文件,把它上传到国内空间的对象存储(阿里云,腾讯云、网易云、又拍云、七牛云…都是免费注册)
复制得到js的外链地址,然后在xml文件里面引用此js文件,引用方式见下图(你可以跟着我在相同的位置引用)
<script async='async' src='你的外链地址'/>
至此,xml基本修改完毕,打开blogger后台,上传修改完的主题模板

3.解决缩略图问题

现在打开主页,唯一的问题是缩略图无法显示,原因是Blogger 新版本的语法,其获取文章图片链接时,会将其转换成 https://lh4.googleusercontent.com/proxy/....这种形式,所以不翻墙无法显示。
在这里感谢JoeyLiu大佬提供了解决办法:Blogger 博文首页缩略图解决方法

使用 JavaScript 代码

Blogger 有一个语法可以获取文章的全部内容,我们可以使用 JavaScript 利用正则表达式将文章中的第一张图片链接提取出来。
代码如下:
将 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>
修改模板,搜索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='https://ae01.alicdn.com/kf/HTB1Gb7LUmzqK1RjSZFL5jcn2XXac.gif'/>  <!--预先放置一个加载图片,增强用户体验-->
        <textarea class='post-text' style='display:none;'><data:post.body.escaped/></textarea> <!--这里放置文章全文,图片从中提取,样式设置为不显示-->
    </div>
</b:if>
此方法优点是无需手动设置缩略图,比较省心
不同模板会有所不同,详情请看大佬原教程的评论区:Blogger 博文首页缩略图解决方法

4.解决头像问题

如果你添加了个人资料小部件
访客不翻墙的话,是无法正常显示头像的

解决办法如下

还是在blogger后台—主题背景—修改HTML,搜索“profile-img”找到这下面一行
expr:src='dat:authorPhoto.image'修为src='你的头像链接',如下图所示

5.字体问题

现在博客在电脑端可能没问题了,但是在手机端可能还会出现博文、博文标题、博客标题等等不显示的问题,如下图

解决办法

这是字体问题,解决办法也很简单,打开blogger后台—主题背景—自定义
在Blogger 主题背景设计器里面,如下图,把所有的字体设置为Arial,这样就能把上面的问题解决了。

6.评论系统

Blogger 自带的评论自然不翻墙无法正常使用,本站目前评论系统采用Valine
安装教程请看我写的另外一篇教程:为 Blogger 安装 Valine 评论系统

五.参考资料

此博客中的热门博文