Blogger搭建国内可正常访问博客(超详细教程)
二、国内访问 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
- 之前大佬说在设置https时,不能直接设置:https://blog.iljw.me/2018/07/enable-blogger-https.html
- 不过现在blogger好像改了,按上面那样设置之后,我们就可以直接在Blogger后台开启https了
三、修改 Blogger 的模板代码
我使用的是官方Contempo这套主题模板,简洁,美观,符合我的审美。 折腾过程中,在JoeyLiu大佬帮助下发现Contempo这套模板实际上所需要修改的地方很少,并且JoeyLiu大佬也用的这套模板。
如果你想使用非官方模板,这里有详细的教程:https://www.lawpai.com/2016/10/blogger.html?m=1
提示:在修改代码之前,建议先保存备份一下原来的模板,这是一个好习惯。
提示:在修改代码之前,建议先保存备份一下原来的模板,这是一个好习惯。
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/....
这种形式,所以不翻墙无法显示。
在这里感谢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 评论系统
五.参考资料
- https://blog.iljw.me/2016/09/blogger.html
- https://blog.iljw.me/2017/02/blogger-install-duoshuo-code.html
- http://before.zojon.com/2012/11/blogger.html
- http://blog.rechar.net/2016/02/properly-use-blogger.html
- http://www.libaoku.com/2012/06/bloggericon18wrenchallbkgpng.htm
来源:https://www.axutongxue.com/2018/10/httpsws1.html
评论