title picture
在上一篇博客 Hexo+Github 搭建个人博客 (二)-- 配置 & 主题 https://brightloong.github.io/2017/02/25/Hexo-Github 建站 (二)-- 配置 / 中我还留下了一个有关百度分享的东西没有说明. 我之前也说这是我在搭建博客中遇到的最大的坑 (没有之一). 在这篇博客中叫我将说一说我遇到了什么坑, 以及怎么从坑里面爬出来的. 当然怎么解决百度分享在 https 中的使用的具体方法并不是我搞出来的, 首先要感谢 https://github.com/hrwhisper/baiduShare 在他的博文百度分享不支持 https 的解决方案 https://www.hrwhisper.me/baidu-share-not-support-https-solution/ 中提出的解决方案. 但是我在使用的过程中并不是很顺利的解决了我的问题 (可能由于我使用的是 Next 的主题), 在使用其方案过程中还有不少坑需要注意的, 下面我将一一说明.
注意: 以下问题可能你没有遇到, 我是在使用 Next 主题中遇到的.
做好基本的配置
请大家参照我的上一篇博文 Hexo+Github 搭建个人博客 (二)-- 配置 & 主题 https://brightloong.github.io/2017/02/25/Hexo-Github 建站 (二)-- 配置 / 中有关百度分享集成的部分, 先做好基本配置.
1. 在站点配置文件中, 添加字段 baidushare, 值为 true
关于什么是站点配置文件, 我相信大家应该清楚了, 如果不知道的话请看我的上一篇博文中有所提及.
baidushare: true #百度分享功能
2. 在主题配置文件中, 找到 baidushare 字段, 设置其展现方式
- baidushare:
- type: button #百度分享展示的方式 button|slide
做好上面两步后, 在你的百度分享还没有出现的情况下, 打开浏览器的 F12, 发现提示 https 访问 http 资源的问题. 之后介绍怎么解决百度分享在 https 下的使用.
百度分享在 https 中的使用
百度分享不能使用的主要原因是它会去请求 http 中的资源, 一个 share.js, 既然这样, 我们能想到的就是把这个资源放到非 http 上, 或者干脆直接放到我们自己的目录下面.
大家可以按照方案提供者 [hrwhisper]( https://github.com/hrwhisper/baiduSh
are) 依照他的博文百度分享不支持 https 的解决方案 https://www.hrwhisper.me/baidu-share-not-support-https-solution/ 去做, 在遇到问题的时候回到我的博文, 或者可以直接按照我说的做.
下载资源文件, 并放到自己 blog 的目录下.
Github 地址: https://github.com/hrwhisper/baiduShare
这里我要强调一下, 在站点配置文件中, 有一个 source_dir 字段, 这个是你访问资源的根目录, 比如我在 sourc 中放置了一个 test.jpg 的文件, 那么访问它的路径就是 / test.jpg
source_dir: source
static 解压后丢到站点根目录, 也就是 source 目录下面. 然后将百度分享中的代码修改, 我使用的是 Next 主题, 这段代码在文件 F:\myblog\themes\next\layout_partials\share\baidushare.swing 中, 如果你找不到可以在你的主题文件夹中搜索 baidushare.
.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 之下的所有文件.
- 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 http://www.mrxn.net/https-share-cdn.html . 再多说一句关于 JiaThis 不能支持 https 的问题个人觉得也可以用以上的方式来解决, 这个大家可以自行研究.)
- (ps plus: 关于博客的搭建就暂时告一段落了.)
来源: http://www.jianshu.com/p/276d10de413e