Hexo博客yilia使用Gitalk作评论插件

转载天雷：Hexo博客yilia使用Gitalk作评论插件

作为一个技术类博客怎能面得了一个评论插件呢。多说挂了，本想跟随yilia的主人Litten使用畅言，无奈这厮居然要备案(这种一看就很麻烦的对我这种懒人，pass)。
然后我就找了一个国人自制开源的插件:gitalk，挺小众我喜欢。
网上没有找到yilia搭载该插件的相关教程，索性写一个，仅希望各位同仁少走弯路。

正文

概述

本文主要针对使用yilia的同学使用gitalk的一个小教程

特性

• 使用 Github 登录
• 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
• 支持个人或组织
• 无干扰模式（设置 distractionFreeMode 为 true 开启）
• 快捷键提交评论 （cmd|ctrl + enter）
• 在线实例
• 博客实例

安装(二选一)

直接引入

npm安装

npm i --save gitalk

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

使用

新建仓库

1. Github上新建一个仓库，命名随便只要记得住，关于github建仓库，不懂的百度一大堆
2. 创建OAuth Application，没有的小伙伴点击这里

完成后会生成相应的clientID and clientSecret。

 

修改主题文档

1.不同的主题目录和模板引擎不同，可以自己修改。修改主题配置文档_config.yml,添加字段

# Gitalk
gitalk: 
  enable: true  #是否启用
  clientID: your clientId #上面生成的id
  clientSecret: your clientSecret #同上 
  repo: 你创建的仓库名称
  owner: github的用户名(master权限)
  admin: github的用户名(master权限)
  distractionFreeMode: true

2.在主题目录yilia/layout/_partial/post下创建文档gitalk.ejs

复制以下代码:

3.最后修改yilia/layout/_partial/article.ejs文档,找到代码

<% if (!index && post.comments){ %>

并在其后添加以下代码

<% if (theme.gitalk.enable && theme.gitalk.distractionFreeMode){ %>
<%- partial('post/gitalk', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

插件添加完成。

结

移动端也可实现了

文中阐述不妥之处还望雅正，不吝感激。

以上。

参考文章

Hexo添加Gitalk评论插件 from erbiduo