看中了Ghost的简约和漂亮,装起来之后发现问题确实不少,基本的问题有两个:
- 没有留言系统;
- 没有搜索系统;
我以为是主题的问题,然后去别人的Ghost博客上搜一搜发现这些功能都是残缺的,好像HEXO对于留言的支持还是可以的,这样就比较麻烦了。本着简约的原则,索性就算了吧,没有留言那就留下邮箱吧,没有搜索就用搜索引擎代替算了,如果真的是这样就算了,那也就不会有这个文章了。
修改主题文件要重启Ghost
1.Ghost的目录关系
在正式弄这个多说系统之前首先要说明一下的就是Ghost系统的目录,之前在申请https证书的时候就是因为没有找到根目录,无法上传验证文件,导致没法使用freeforssl的证书。
在经过了一番仔细的搜索之后,发现了一点眉目。首先就是根目录就是在安装文件夹下的ghost目录,如果是按照上文安装的,那么根目录就是:
1 |
/var/www/ghost |
很简单的验证,就是这个目录下有一个LICENSE文件,这个文件可以直接使用网址加文件的形式下载:
1 |
https://orycho.com/LICENSE |
但是这个目录的权限还是比较严格的,或者是重定向设置的问题,其他的文件是不能下载的,因此我们需要了解一下其他的文件夹。
首先就是主题文件夹:
1 |
/var/www/ghost/content/themes |
这个文件夹下面是安装的主题文件,我们这里假设安装的主题是和我一样的主题,即next-mist
,那么这个主题文件夹也属于根目录。比如说我在next-mist
文件夹下面放一个avatar.gif的图像,那么这个图像在服务器的绝对路径就是:
1 |
/var/www/ghost/content/themes/next-mist/avatar.gif |
同样的也可以使用下面的路径直接访问该资源:
1 |
https://orycho.com/avatar.gif |
这就表明了如果需要上传验证文件或者添加自己的资源什么的,那就是可以直接上传到这个目录下,但是这同样是有缺点的,那就是如果更换主题的话,那么所有的自定义资源就会失效,因此我们需要重新找一个可靠的目录安放一些自定义的资源文件,这里我使用的是下面的目录:
1 |
/var/www/ghost/core/built/assets |
在这个目录下面存放的资源可以使用/ghost/进行访问,比如我将avatar.gif放置到上面的目录中,那么avatar.gif的路径就是:
1 |
/var/www/ghost/core/built/assets/avatar.gif |
那么我就可以使用这样的链接进行访问:
1 |
https://orycho.com/ghost/avatar.gif |
这个文件夹一般来说更换主题是不会变更的,所以还是比较可靠的,除非是升级Ghost的时候可能需要迁移一下资源。好了,这个目录就说这么多。
2.多说留言框API修改
这里要一下,就是多说这个留言框并不是我加上去的,是这个主题自带的,因此需要根据主题说明配置好。但是由于我使用了https加密链接,因此多说加载的资源也必须的采用加密链接的,否则就是看不到小绿锁。在强迫症作用下,必须让这个小绿锁展示出来。根据网上的资料,一番折腾之后,终于得到解决。
首先我使用的主题next-mist
中存在两处多说的api和js调用,需要先将此处更改为https,打开主题index.hbs
文件,拖到文件末尾,可以看到下面的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> $(".ds-thread-count").each(function(){ var apiUrl = "http://api.duoshuo.com/threads/counts.jsonp?short_name=" + duoshuo_name + "&threads=" + $(this).attr("data-thread-key") + "&callback=?"; var currentObj = $(this); var test = $.getJSON(apiUrl, function(data){ //console.log(data.response[0].comments); //console.log(currentObj); var id = currentObj.attr("data-thread-key"); //console.log(id); var commentNumber = data.response[id].comments; //console.log(commentNumber); if(commentNumber == "0") { $(currentObj).html("暂无评论"); }else { $(currentObj).html(commentNumber + "条评论") } }); //console.log(test); }); </script> |
直接将上面的http://
修改为https://
保存即可。
3.多说留言框JS修改
当然除了上面的问题还有另外一处,我们打开post.hbs
可以看到下面的代码:
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> var duoshuoQuery = {short_name:duoshuo_name}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script> |
这里是根据协议选择多说的一个重要的embed.js,理论上是没有问题的,但是其实我们后来会发现,虽然这个js确实是用的https加密,但是多说的评论框头像竟然不是https加密的,这是由于这个js中的设置导致的,我们需要修改这个js,所以这里我们先下载这个js脚本:
1 |
https://static.duoshuo.com/embed.js |
把这个脚本存下来,然后打开这个脚本,因为这个是压缩过的js,因此修改起来略微费力一点。将下面的函数用notepad++找到:
1 2 3 |
avatarUrl: function(e) { return e.avatar_url || nt.data.default_avatar_url } |
修改为下面的样子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
avatarUrl: function(e) { if (e.avatar_url) { e.avatar_url = (document.location.protocol == "https:") ? e.avatar_url.replace(/http:/, "https:") : e.avatar_url; e.avatar_url = (document.location.protocol == "https:") ? e.avatar_url.replace(/ds\.cdncache\.org/, "ds.duoshuo.com") : e.avatar_url } else { if (nt.data.default_avatar_url){ nt.data.default_avatar_url = (document.location.protocol == "https:") ? nt.data.default_avatar_url.replace(/http:/, "https:") : nt.data.default_avatar_url; nt.data.default_avatar_url = (document.location.protocol == "https:") ? nt.data.default_avatar_url.replace(/ds\.cdncache\.org/, "ds.duoshuo.com") : nt.data.default_avatar_url; } else { nt.data.default_avatar_url = "https://orycho.com/ghost/deavatar.png" } } return e.avatar_url||nt.data.default_avatar_url} } |
这里要自己准备一张默认头像deavatar.png存放在/var/www/ghost/core/built/assets/
目录下,这是因为在用户没有登录的时候可以使用这个默认头像,并且这里的e.avatar_url
和nt.data.default_avatar_url
均需要在判别为真的情况下才能使用replace的替换属性,不然js脚本会出错,我参考的很多网站资料只有e.avatar_url
的判别,没有nt.data.default_avatar_url
的判别,这导致了再用户未登录的情况下该脚本出错,对话框加载不出来,这也就意味着已经登录多说的能看到对话框并留言,没登录的就看不见对话框也留不了言。
但是这样也存在缺点,那就是在未登录的情况下,用户的默认头像不见了。这个问题一直没有解决,索性直截了当的在else语句块内给nt.data.default_avatar_url
赋值,即在用户没登录情况下,直接设置为网站的默认头像。这样就成功解决了多说插件用户不登录显示不了头像的问题,只是这里要自己选择一张头像作为默认头像,并放在网站文件夹下面,这样才能生效。
至此我们已经弄了一张默认的头像,并且设置了好了embed.js文件,这时候我们将这个文件也存放到/var/www/ghost/core/built/assets/
目录下,并通过下面的链接进行访问:
1 |
https://orycho.com/ghost/embed.js |
这时候我们回到post.phd文件,将:
1 |
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; |
直接替换为:
1 |
ds.src = 'https://orycho.com/ghost/embed.js'; |
简单粗暴,直接解决。至此我们可以顺利的访问自己网站并留言了。
4.End小结
折腾了许久,虽然上面的内容看上去简单容易,但是要发现这么多问题并不容易,用chrome一点一点的检查网页,发现错误,然后修改,真的很困难。最后要提的就是我的多说一直是登录状态,这也就是没有发现js脚本出错,因为e.avatar_url
和nt.data.default_avatar_url
一直有值,没有发现留言框加载不出来的情况,后来我用手机查看的时候,发现没有留言框,郁闷了半天不知道为什么,以为是网页自适应的结果,回到chrome拖拉拖拉发现没问题,苦于手机不能调试网页,也就一直纠结着。不过幸好偶然的机会,退出了多说,发现竟然留言框消失了。仔细查看就是因为nt.data.default_avatar_url
为空的情况下使用了replace方法。真是不容易。
当然最后还是要感谢一下文末给我参考的网页,这些网站作者的努力让我少走了很多的弯路,不然这个折腾估计要通宵了。