添加gitalk模块

发表于 | 分类于 | 阅读次数: | 本文被阅读 次
字数统计: 453 | 阅读时长 ≈ 2

paste image
惯例，首先进入作者的GitHub，看看使用方法。

链接：gitalk
介绍：Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。


安装

安装方式有2种：

  • 1. 直接引入
  • 2. npm安装

而我选择的是第一种

我们先来找到Hexo\themes\next\layout\_third-party\comments这个目录下，新建一个叫gitalk.swig的文件，里面写入下列代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
	<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
	<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    //这两句是调用作者的css和js文件
	<script type="text/javascript">
		var gitalk = new Gitalk({       //这里面的参数我们会在另一个文件中配置
			clientID:  '{{theme.gitalk.clientID}}',
			clientSecret: '{{theme.gitalk.clientSecret}}',
			repo: '{{theme.gitalk.repo}}',
			owner: '{{theme.gitalk.owner}}',
			admin: '{{theme.gitalk.admin}}',
			id: location.pathname,
			distractionFreeMode: '{{theme.gitalk.distractionFreeMode}}',
		  })
		  gitalk.render('gitalk-container')
	</script>
{% endif %}

同目录下的index.swig文件中，添加以下代码：

1
{% include 'gitalk.swig' %}

目的是使主页面包含上面新建的文件

配置

我们找到主题配置文件_config.yml，找到下列这段代码：

1
2
3
4
5
6
7
8
9
# Gitalk
gitalk:
  enable: true
  clientID: 'Github Application Client ID'
  clientSecret: 'Github Application Client Secret'
  repo: 'Github repo'   //你网站的仓库名
  owner: 'Github repo owner'  //你的GitHub用户名
  admin: ['Github repo owner and collaborators, only these guys can initialize github issues']  //同上
  distractionFreeMode: true  //这里指的是类似Facebook评论的遮罩效果

这里的重点是，需要在GitHub里申请applications的OAuth权限：地址这里
申请后把Client ID、Client Secret的数据填入到上面clientID和clientSecret里就可以了。

生效

最后找到\Hexo\themes\next\layout\_partials文件夹的comments.swig文件：这是评论模块的配置文件。
在倒数第二层的if-else判断里加入：

1
2
{% elseif theme.gitalk.enable %}
	<div id="gitalk-container"></div>

好啦，大功告成！

0%