最近发现了一个问题,修改了hexo的默认主题(landscape)之后,有些在本地能正常显示,部署到网络却发现不能显示。比如公式,分享按钮等。关键在于HTTP和https的问题。

1 闲话在前

之前的主题(indigo)非常好看,但是对公示支持不好。他本身应该是支持mathjax的,但不知道为啥,显示出来总有些问题。

看了下大概是采用less作为预处理,并采用less渲染的问题。换个渲染这个主题就不能用了,很可惜。挑来挑去还是觉得默认的主题比较简洁,也实用。慢慢在这个主题上增加自己需要的功能。

2 问题出现

把百度分享和mathjax加入到了主题里。localhost:4000可以正常显示,部署到网络后,发现既公式不能正常显示,又没有分享按钮。其原因还是访问的是采用https的模式。而这里面的有些js是HTTP访问加载的。

其实要找到原因,或者说找到这种类似问题的原因,可以去控制台看看:

  • Chrome:对浏览器点右键,检查,console(控制台)
  • Foxfire:点右键,查看元素,控制台

上面就会显示出出错的原因:

3 解决方案

其实就是要解决在https下面请求HTTP资源的问题。

百度了一下,ChanceWong的帖子有一些解决方案。我会的也就是只有参考相对协议的办法了。

就是找到相关的js代码,把src后面的网址的http:删除即可。具体的操作可以参考上面帖子的说明。

然而这种方法有一个前提,就是你的博客需要支持HTTP访问才行。如果锁定HTTPS,并且你要加载的js只能HTTP访问的话,那是不行的。

还有一种解决方案就是把你需要的js下下来,放在博客的public目录下。

4 百度分享的https解决方案

百度的share.js已经有人弄好了。项目地址和使用说明都有,写的很详细,而且也给出了自己从网上获取js的办法。这点很好,万一你用的不是百度分享,你也有解决方案。

github地址

使用说明

这里需要注意的是:

  • static文件夹不是放在你博客目录的根目录下,而是放在public目录下,因为我们的是hexo。
  • 每次clean后static就没了,要重新拷贝,建议在博客目录下保存一份
  • 如果是自己提取的,static文件里面的有些内容要修改,详见链接里面的说明。如果是直接从这位作者的github里下下来的,则不需要做任何修改了