定制ghost(评论,语法高亮,主题)

  ghost用他简介优雅的界面吸引了不少用户,但是正因为他如此简洁,所以很多功能都没有了(o(╯□╰)o),需要我们自己添加。下面我们来看看如何定制ghost,主要实现下面三个基本的功能

  • 添加评论功能
  • 实现语法高亮
  • 定制主题



1、添加评论功能

功能是一个博客的基本功能,可以让博主很好的和读者交流,但是ghost默认没有这个功能,我们需要自己添加。

目前有很多第三方的评论的插件,我选择的是多说,大家也可以选择其他的类似的插件

1.1、获取多说js代码

先去多说官网注册一个账号,然后按照步骤创建一个管理后台,找到下面这段代码

<!-- 多说评论框 start -->  
    <div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->  
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->  
<script type="text/javascript">  
var duoshuoQuery = {short_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>
<!-- 多说公共JS代码 end -->  
1.2、给每篇文章增加评论功能

这里我们需要默认主题casper-zh的模板文件post.hbs,如下所示

#进入你的ghost目录下面的/content/themes/casper-zh,编辑post.hbs文件
nano post.hbs  

添加1.1步骤的js代码到如下位置 这里要注意把粗线红框部分替换为如图所示才可以正常使用

重启ghost应该就可以看到效果了,如下所示:

1.3、管理评论

多说提供了评论管理功能,大家可以登录多说的管理后台,对垃圾评论进行删除或者过滤,多说功能比较强大,大家可以去尝试下。

2、语法高亮

语法高亮选择的是highlight.js,非常强大,常见的语言都支持,而且样式非常多,下载地址

如何更换不同的代码高亮效果,大家可以参照这个博客

3、定制主题

这是ghost另外一个吸引人的地方,虽然没有wordpress的主题多,但是也够大家选择了。大家可以去这里下载主题

切换主题的方法也很简单,网上摘录的

Ghost 的主题放在 content/themes/ 如果你想自己做个主题,我们建议你复制 casper 文件夹,然后在复制的文件夹里修改模版,按你喜欢来做。

要切换到你新添加的主题:

  1. 重启 Ghost 。Ghost 不会立即发现你往content/themes新添加了文件夹,所以你需要重启 Ghost。
  2. 登录 Ghost 管理后台,进入/ghost/settings/general/页面。
  3. 在“Theme”下拉菜单里选择你的主题的名字。
  4. 点“保存”。
  5. 查看博客的前端,欣赏你的新主题吧!



参考

  1. http://anyinfa.com/wei-ghosttian-jia-yu-fa-gao-liang-2/
  2. http://docs.ghost.org/zh/themes/
comments powered by Disqus