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

https://raw.githubusercontent.com/axutongxue/img/master/20190425131903.png

写这篇文章,记录一下在Blogger上费下的精力,希望也能对一些想用 Blogger 写博客的人带来帮助。



一、经历

  • 前后折腾博客花了不少时间,之前本来想着弄着玩玩,于是随意买了个便宜的域名:axutongxue.top,几经周折终于搭建出满意的博客后,当机立断新买了axutongxue.com这个域名,准备认真写博了。
  • 中途在Github上用hexo也搭建了一个博客,不过可能是做公众号影响,比较习惯在本地用markdown写好,然后再在线渲染css,网页发布。不太习惯在hexo的发布博文方式,另外感觉如果以后换电脑,Github博客搬迁也是个麻烦,最后还是就想用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

  • 找一个国内可访问的 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图床。

3.JS问题

到目前为止,博客已经基本上可以不翻墙访问了。但是有一个问题:打开网站后,这两个按钮按不了
因为模板里有这一段代码: <b:template-script async='true' name='indie' version='1.0.0'/>执行它,会加载下述的 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大佬提供了解决办法:

1. 在xml里面添加上这一段

在CSS内添加这么一段:
.customThumbnail {
    display: none;       
}
可以学我,添加如图位置(注意英文状态输入下输入)

2.blogger后台修改

打开blogger后台—主题背景—修改Html—跳转到微件—Blog1—找到“postBodySnippet ”
<div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>

                    <b:if cond='data:post.featuredImage'>
                      <div class='snippet-thumbnail'>
<b:with value='snippet(data:post.body, {length: 75, links: false, linebreaks: false, ellipsis: false})' var='customThumbnail'>
<img alt='postThumbnail'  expr:src='data:customThumbnail' sizes='(max-width: 800px) 20vw, 128px'/>
                        </b:with>
                      </div>
                    </b:if>
<div class='post-snippet snippet-container r-snippet-container'>
<div class='snippet-item r-snippetized'><b:eval expr='snippet(data:post.body, {length: 300, links: true, linebreaks: false})'/></div>
<a class='snippet-fade r-snippet-fade' expr:href='data:post.url'/>
</div>

                  </div>
<b:includable id='postBodySnippet' var='post'></b:includable>中的内容,替换为以上代码,如下图所示
修改完后,记得保存。

3.发布带缩略图的博文

博文写好之后,切换到html格式,在博文头部添加,即可正确显示缩略图了。
<a class="customThumbnail" href="你的博客地址">图片地址</a>
如下图所示
20190505171706.png

备注一下

回头看一下刚刚在blogger后台修改的html代码,其中有这么一段


<b:with value='snippet(data:post.body, {length: 75, links: false, linebreaks: false, ellipsis: false})' var='customThumbnail'>
<img alt='postThumbnail'  expr:src='data:customThumbnail' sizes='(max-width: 800px) 20vw, 128px'/>
这里length=75,意思是在后面加载图片地址的时候,会读取前面75字符长度的代码,而我使用的OneDrive图床的图链长度正好是75字符。
如果你用其他图床,请自行修改length=你图床图链的字符长度。
  • 备注一句:Github图床是74字符
  • 因为是缩略图,添加图链的时候,尽量控制一下图片大小,可以提高博客打开速度。
  • 给一个在线字符统计:http://www.eteste.com/

4.解决头像问题

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

解决办法如下

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

5.字体问题

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

解决办法

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

6.评论系统

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

五.参考资料

此博客中的热门博文