BrightLoong's Blog

Hexo+Github搭建个人博客(三)——百度分享集成

title picture
  在上一篇博客Hexo+Github搭建个人博客(二)——配置&主题中我还留下了一个有关百度分享的东西没有说明。我之前也说这是我在搭建博客中遇到的最大的坑(没有之一)。在这篇博客中叫我将说一说我遇到了什么坑,以及怎么从坑里面爬出来的。当然怎么解决百度分享在https中的使用的具体方法并不是我搞出来的,首先要感谢hrwhisper在他的博文百度分享不支持https的解决方案中提出的解决方案。但是我在使用的过程中并不是很顺利的解决了我的问题(可能由于我使用的是Next)的主题),在使用其方案过程中还有不少坑需要注意的,下面我将一一说明。

注意:以下问题可能你没有遇到,我是在使用Next主题)中遇到的。

做好基本的配置

  请大家参照我的上一篇博文Hexo+Github搭建个人博客(二)——配置&主题中有关百度分享集成的部分,先做好基本配置。

1. 在站点配置文件中,添加字段baidushare,值为 true

  关于什么是站点配置文件,我相信大家应该清楚了,如果不知道的话请看我的上一篇博文中有所提及。

1
baidushare: true #百度分享功能

2. 在主题配置文件中,找到baidushare字段,设置其展现方式

1
2
baidushare: 
type: button #百度分享展示的方式button|slide

  做好上面两步后,在你的百度分享还没有出现的情况下,打开浏览器的F12,发现提示https访问http资源的问题。之后介绍怎么解决百度分享在https下的使用。

百度分享在https中的使用

  百度分享不能使用的主要原因是它会去请求http中的资源,一个share.js,既然这样,我们能想到的就是把这个资源放到非http上,或者干脆直接放到我们自己的目录下面。
  大家可以按照方案提供者hrwhisper依照他的博文百度分享不支持https的解决方案去做,在遇到问题的时候回到我的博文,或者可以直接按照我说的做。

  • 下载资源文件,并放到自己blog的目录下。

  Github地址:https://github.com/hrwhisper/baiduShare

  这里我要强调一下,在站点配置文件中,有一个source_dir字段,这个是你访问资源的根目录,比如我在sourc中放置了一个test.jpg的文件,那么访问它的路径就是/test.jpg

1
source_dir: source

  static 解压后丢到站点根目录,也就是source目录下面。然后将百度分享中的代码修改,我使用的是Next主题,这段代码在文件F:\myblog\themes\next\layout_partials\share\baidushare.swing中,如果你找不到可以在你的主题文件夹中搜索baidushare

1
2
3
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
改为
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

这样之后重启服务,看看百度分享是不是出现了,如果出现了,恭喜你,成功了。如果没有,请你继续往下看。

  • 在站点配置文件中设置skip_render字段
      在你发现百度分享还是没有出现的时候,打开F12,是不是发现share.js文件已经成功加载了,但是这个文件报错,你进入F:\myblog.deploy_git\static\api\js(我的就是这个目录,因为我把博客放在了F:\myblog下),打开share.js文件,发现这个文件末尾并没有加载完,我我们下载下来的static\api\js\share.js是不一样的,为什么?
      

原来,hexo会把/source下的文件全部渲染

怎么解决这个问题,有两种办法:你可以设置站点配置文件下的skip_rende字段,让hexo在渲染的时候跳过static之下的所有文件。

1
2
3
4
5
6
7
8
9
skip_rende: static/**

#单个文件夹下的全部文件:skip_render: test/*
#单个文件夹下的指定类型文件:skip_render: test/*.md
#单个文件夹下的全部文件以及子目录:skip_render: test/**
#多个文件夹:
#skip_render:
# test1/*.html #注意前面的空格,代表是skip_render之下的
# test2/**

  你也可以选择不设置这个属性,而是把static文件放在主题文件的source目录下,我的是(F:\myblog\themes\next\source)。做完这些操作后,你的百度分享应该已经出现在你的博客中了,just enjoy it。
ps:除了以上解决百度在https下使用的方法以外,还有一个方法就是使用CDN,具体方式请参考巧用七牛CDN的镜像功能使百度分享支持HTTPS。再多说一句关于JiaThis不能支持https的问题个人觉得也可以用以上的方式来解决,这个大家可以自行研究。)
ps plus:关于博客的搭建就暂时告一段落了。)

坚持原创技术分享,您的支持将鼓励我继续创作!