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-4.0协议，转载请注明出处
作者: Csome
Hits