pug语法

入门指南 – Pug 模板引擎中文文档 | Pug 中文网 (pugjs.cn)

html基础都不牢的我也是能看懂pug语法的

Anatolo源码分析

D:\CSOMEBLOG\THEMES\ANATOLO\LAYOUT 目录下文件内容
│ archive.pug
│ category.pug
│ index.pug
│ mixins.pug
│ page.pug
│ post.pug
│ tag.pug
│ tags.pug

└─partial
comments.pug
footer.pug
head.pug
layout.pug
nav.pug
search.pug
sidebar.pug
social_links.pug
toc.pug

不难看出是有comments.pug的,不过阅读之后发现并没有gitalk的设置,打开post.pug发现在最底下有一个comment.pug的引用

根据gitalk官方文档需要将下列代码加入主题中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <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>
上面两个选一个加入head块中

<div id="gitalk-container"></div> 这一行加入到对应需要评论模组的地方

<script>
var gitalk = new Gitalk({
clientID: '', // GitHub Application Client ID
clientSecret: '', // GitHub Application Client Secret
repo: '' // 存放评论的仓库
owner: '', // 仓库的创建者,
admin: [''], // 如果仓库有多个人可以操作,那么在这里以数组形式写出
id: location.pathname, // 用于标记评论是哪个页面的,确保唯一,并且长度小于50
})

gitalk.render('gitalk-container'); // 渲染Gitalk评论组件
</script>

首先是head部分,不难发现在head.pug是初始化head内容的pug文件

只需将head中加入下列代码即可

1
2
3
4
if theme.gitalk
if theme.gitalk.enable
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")

然后就是评论模块的位置

在commemts.pug中加入一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if theme.gitalk
if theme.gitalk.enable
div#gitalk-container(style="padding-left: 50px;padding-right: 50px;padding-bottom: 70px")
script.
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: md5(decodeURI(location.pathname)), // Ensure uniqueness and length less than 50
language: 'zh-CN'
})
gitalk.render('gitalk-container')

在_config.pug加入如下属性

1
2
3
4
5
6
7
gitalk:
enable: false
clientID: ""
clientSecret: ""
repo: ""
owner: ""
admin: ""

根据gitalk设置好github application就可以啦

Gitalk评论插件使用教程 - SegmentFault 思否

本文采用CC-BY-SA-3.0协议,转载请注明出处
作者: Csome