為 hexo NexT 添加 Gitment 評論插件

Gitment 是作者imsun實作的一款基于 GitHub Issues 的評論系統. 支援在前端直接引入, 不需要任何後端代碼. 可以在頁面進行登入, 檢視, 評論, 點贊等操作. 同時有完整的 Markdown / GFM 和代碼高亮支援. 尤為适合各種基于 GitHub Pages 的靜态部落格或項目頁面.

另外, 本教程的按鈕樣式和代碼均直接取自 ehlxr 部落客.

在 next/source/css/_common/components 目錄中建立一個 gitment.styl 的 css 樣式檔案, 複制以下代碼

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

.gitment_title:hover {

color: #fff;

background: #0a9caf;

background-image: initial;

background-position-x: initial;

background-position-y: initial;

background-size: initial;

background-repeat-x: initial;

background-repeat-y: initial;

background-attachment: initial;

background-origin: initial;

background-clip: initial;

background-color: rgb(10, 156, 175);

}

.gitment_title {

border: 1px solid #0a9caf;

border-top-color: rgb(10, 156, 175);

border-top-style: solid;

border-top-width: 1px;

border-right-color: rgb(10, 156, 175);

border-right-style: solid;

border-right-width: 1px;

border-bottom-color: rgb(10, 156, 175);

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: rgb(10, 156, 175);

border-left-style: solid;

border-left-width: 1px;

border-image-source: initial;

border-image-slice: initial;

border-image-width: initial;

border-image-outset: initial;

border-image-repeat: initial;

border-radius: 4px;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

border-bottom-left-radius: 4px;

display: inline-block;

padding: 0 15px;

padding-top: 0px;

padding-right: 15px;

padding-bottom: 0px;

padding-left: 15px;

color: #0a9caf;

cursor: pointer;

font-size: 14px;

然後打開同目錄中的 components.styl 檔案, 找個順眼的位置添加一句

@import "gitment"

打開 /next/layout/_partials/comments.swig 檔案, 在最後一個 elseif 代碼塊下面添加 Gitment 的内容.

例如我的就是這樣

... // 上面内容省略了..

{% elseif theme.changyan.appid and theme.changyan.appkey %}

<div id="SOHUCS"></div>

{% elseif theme.gitment.enable %}

<div onclick="showGitment()" id="gitment_title" class="gitment_title">顯示 Gitment 評論</div>

<div id="container" style="display:none"></div>

<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">

<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>

<script>

const myTheme = {

render(state, instance) {

const container = document.createElement('div');

container.lang = "en-US";

container.className = 'gitment-container gitment-root-container';

container.appendChild(instance.renderHeader(state, instance));

container.appendChild(instance.renderEditor(state, instance));

container.appendChild(instance.renderComments(state, instance));

container.appendChild(instance.renderFooter(state, instance));

return container;

function showGitment() {

$("#gitment_title").attr("style", "display:none");

$("#container").attr("style", "").addClass("gitment_container");

var gitment = new Gitment({

id: window.location.pathname,

theme: myTheme,

owner: '{{ theme.gitment.owner }}',

repo: '{{ theme.gitment.repo }}',

oauth: {

client_id: '{{ theme.gitment.client_id }}',

client_secret: '{{ theme.gitment.client_secret }}'

});

gitment.render('container');

</script>

{% endif %}

然後打開 NexT 主題的 _config.yml 檔案, 在評論相關設定的區域添加下面的代碼, 并根據 Gitment 文檔說明來添加相應的值

# Gitment comments

gitment:

enable: true

owner: xxxx

repo: xxxx

client_id: xxxx

client_secret: xxxx

lazy: true

lazy屬性為是否直接顯示評論子產品，true會顯示”顯示評論”按鈕，false會直接顯示