一、经历
- 前后折腾博客花了不少时间,之前本来想着弄着玩玩,于是随意买了个便宜的域名:axutongxue.top,几经周折终于搭建出满意的博客后,当机立断新买了axutongxue.com这个域名,准备认真写博了。
- 中途在Github上用hexo也搭建了一个博客,不过可能是做公众号影响,比较习惯在本地用markdown写好,然后再在线渲染css,网页发布。不太习惯在hexo的发布博文方式,另外感觉如果以后换电脑,Github博客搬迁也是个麻烦,最后还是就想用Blogger了。
- 写这篇文章,记录一下在Blogger上费下的精力,希望也能对一些想用 Blogger 写博客的人带来帮助。
二、国内访问 Blogger
1 首先准备
请确认自己能够科学上网。
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大佬也用的这套模板。
Blogger 模板网站地址
- http://www.mybloggerthemes.com/
- https://btemplates.com/
- https://gooyaabitemplates.com/
- https://newbloggerthemes.com/
1. 下载Contempo模板xml文件

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

2.修改XML
针对Contempo模板,我们只需要屏蔽Blogger自动加载项即可。
用notepad++、Sublime、Atom等软件打开下载好的XML
我用的是Sublime_Text3,顺便提供一个自用版本的下载地址吧:
点击下载
打开XML后,Sublime里面Ctrl+F搜索
1.屏蔽Blogger自动加载项即可
将<head>替换为
<!--<head>--><head>
将</head>替换为
</head><!--</head>-->
将</body>替换为
<!--</body>--></body>
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/....这种形式,所以不翻墙无法显示。

使用 JavaScript 代码
Blogger 有一个语法可以获取文章的全部内容,我们可以使用 JavaScript 利用正则表达式将文章中的第一张图片链接提取出来。
代码如下:
将 JS 代码放置于 </body> 标签前:
<b:if cond='data:blog.pageType in {"index","searchQuery","searchLabel","archive"}'>
<script defer='defer'>
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'>
<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>
此方法优点是无需手动设置缩略图,比较省心
4.解决头像问题
如果你添加了个人资料小部件

访客不翻墙的话,是无法正常显示头像的

解决办法如下
还是在blogger后台—主题背景—修改HTML,搜索“profile-img”找到这下面一行

把expr:src='dat:authorPhoto.image'修为src='你的头像链接',如下图所示

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

解决办法
这是字体问题,解决办法也很简单,打开blogger后台—主题背景—自定义

在Blogger 主题背景设计器里面,如下图,把所有的字体设置为Arial,这样就能把上面的问题解决了。

6.评论系统
Blogger 自带的评论自然不翻墙无法正常使用,本站目前评论系统采用
Valine