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

前言

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

正文

概述

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

特性

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

安装(二选一)

直接引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

  <!-- or -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

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

复制以下代码:

<div id="gitalk-container" style="padding: 0px 30px 0px 46px;"></div> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
        clientID:  '<%=theme.gitalk.clientID%>', 
        clientSecret: '<%=theme.gitalk.clientSecret>',
        id: window.location.pathname,
        repo: '<%=theme.gitalk.repo%>', 
        owner: '<%=theme.gitalk.owner%>', 
        admin: '<%=theme.gitalk.admin%>', 
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>',
     })
gitalk.render('gitalk-container')
</script>

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

谢谢你请我吃糖果