给hexo博客nexT主题添加Gitalk评论系统

 

写在前面

注意,此插件基于github开发,授权阶段需要获取的权限不局限于issues,还包括编辑你代码的权限,因此对这应用授权时需要十分小心
给hexo博客nexT主题添加Gitalk评论系统_第1张图片

       前段时间因为hexonexT主题崩了(载入博客时显示全白,原因在这),换了material主题,这主题很有安卓的风格,我也写过对它的一些折腾:hexo博客主题—material折腾笔记。
这些都不是重点,重点的是今年6月份,多说离开了。为此我专门注册了disqus,搭配着material主题进行使用。使用期间,让我很郁闷的是连黄图哥都懒得评论QAQ,再加上前几天博客莫名的多出来了很多有规律的访问(没错,是爬虫),所以为了防止攻击,我又回归了nexT的怀抱。
       下面主要记录下我将评论系统Gitalk集成到nexT的过程。

为什么选择Gitalk

        多说消失后,原先与多说竞争最激烈的disqus看起来似乎是最大赢家。然而在天朝的环境中,它没有像想象中那样一跃成为主流的评论系统。而在国内,随着多说的消失,畅言网易云跟帖等等产品都跃跃欲试,想取代多说。然而现实是,网易云跟帖活了不到两个月官方就宣布不再为第三方博客提供服务,畅言虽然很活跃,但鉴于国内的大环境,我还是决定寻找一款国外的评论系统。
nexT主题集成了很多第三方评论系统,其中有一款很和我意:gitment。它由国内大神编写,基于GitHub Issues编写。详细的内容可以看这里。然而不幸的是,作者似乎弃坑了,不再进行维护,而且查看issues发现gitment在移动端貌似使用不了。
然后,我就发现了Gitalk,这个评论系统和gitment类似,且有人一直在维护,移动端也可以使用。因此我决定模仿gitmentGitalk集成到nexT主题中。

GitalknexT主题目录的简要介绍

       在实际修改之前,我们先了解下Gitalk和nexT项目的目录文件,这方便我们理解后续集成的思路和使用的方法。

Gitalk 简介

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。

  • 特性:
    • 使用 Github 登录
    • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
    • 无干扰模式(设置 distractionFreeMode 为 true 开启)
    • 快捷键提交评论 (cmd|ctrl + enter)

        以上内容摘自github,详细的内容请查看Gitalk中文文档。

nexT 目录说明

        nexT 主题的源码结构非常清晰,下面对目录树进行简要说明。注意:主题迭代频繁,博主使用的版本是5.1.3,开发前请确认自己使用的版本目录树是否与本文所写一致

├── languages            博客语言配置
├── layout               博客的整体布局
│   ├── _custom          用户自定义配置文件(仅支持对主界面布局进行修改)
│   ├── _macro    
│   ├── _partials        博客组件的配置
│   ├── _scripts
│   └── _third-party     第三方插件
├── scripts
│   └── tags
├── source               博客使用的样式目录
│   ├── css              
│   ├── fonts
│   ├── images
│   ├── js
│   └── lib
└── test

集成的步骤

        如果要达到我们最初的目的,需要修改以下内容:

  • layout/_partials/comments.swig
  • layout/_third-party/comments/index.swig
  • _config.yml
    还需要在layout/_third-party/comments/路径下,添加我们自己的文件gitalk.swig。下面我们一步一步来。

        1. 编写我们自己的插件文件gitalk.swig

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitalk.enable and theme.gitalk.client_id %}

  {% set CommentsClass = "Gitalk" %}
  
  


    {% if page.comments %}
      
    {% endif %}

{% endif %}
{% endif %}

        2. 把编写好的插件添加到hexo主题中

        在layout/_third-party/comments/index.swig中添加下面语句:

{% include 'gitalk.swig' %}

        3. 根据条件判断是否启用该插件

        在layout/_partials/comments.swig中相应的地方加入如下语句:

{% elseif theme.gitalk.enable %}
    

        4. 在主题配置文件中配置有关Gitalk的信息

        编辑_config.yml文件,在需要配置gitalk的地方加入如下内容:

gitalk:
    enable: true
    github_user: # owner
    github_repo: # repo
    client_id: # clientID
    client_secret: # clientSecret     
    admin: # Github repository collaborators. (Ensure having write access to this repository)
    distractionFreeMode: # Facebook-like distraction free mode

        5. 至此,大功告成。但需要注意的是: 当使用hexo s -d本地调试时你可能会看到

未找到相关的 Issues 进行评论
请联系 @whtis 初始化创建

        出现了这个提示不要紧,你只要部署后,使用github登录就好了。

博客的其他修改

  • 因为很喜欢material主题同步bing每日壁纸的功能,所以也把hexo的背景图片与bing壁纸进行同步。实现这个功能,只需要编辑source/css/_custom/custom.styl文件,加入如下内容即可:
    html, body {
    height: 100%;
    background-image: url("http://api.dujin.org/bing/1920.php");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
    }
    

        其中,image的url是其他博主提供的api接口,目前看来还是很稳定的。后续也可以考虑自己抓取bing的壁纸,有关这部分内容,可以参考这篇博文:获取Bing每日图片API接口

  • postsidebarheader-inner透明度调成80%,这是为了较好的突出背景。实现方法:编辑source/css/_custom/custom.styl文件,加入如下内容即可:
.header-inner {
  opacity: 0.8;
}

.main-inner {
  opacity: 0.8;
}

.sidebar {
  opacity: 0.8;
}
  • 其他修改。参考文章见文末。

后记

        看了nextissues发现已经有人在两个月前Pull requests了,但还在open状态,怪不得我clone的时候找不到这个插件。

        最后,有同学如果也研究过hexo的,欢迎教我怎么把文章那块(post-block)调成半透明的。。。楞是没有找到修改哪里才能生效⊙﹏⊙

        最后的最后,附一个比较全面的hexo折腾总结:hexo的next主题个性化教程:打造炫酷网站

 

你可能感兴趣的:(博客美化,hexo)