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 官方文档需要将下列代码加入主题中
<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 中加入下列代码即可
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 中加入一下代码
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 加入如下属性
gitalk: enable: false clientID: "" clientSecret: "" repo: "" owner: "" admin: ""根据 gitalk 设置好 github application 就可以啦
Translate by Kimi-K3
Pug Syntax
Getting Started – Pug Template Engine Chinese Documentation | Pug Chinese Site (pugjs.cn)
Even someone like me, whose HTML fundamentals aren’t solid, can understand Pug syntax.
Anatolo Source Code Analysis
Contents of the D:\CSOMEBLOG\THEMES\ANATOLO\LAYOUT directory │ 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
It’s easy to see there’s a comments.pug, but after reading through it I found no Gitalk configuration. Opening post.pug, I noticed a reference to comment.pug at the very bottom.
According to the official Gitalk documentation, the following code needs to be added to the theme:
<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>Pick one of the two above and add it to the head block.
<div id="gitalk-container"></div> Add this line where the comment module should go.
<script>var gitalk = new Gitalk({ clientID: '', // GitHub Application Client ID clientSecret: '', // GitHub Application Client Secret repo: '' // The repository where comments are stored owner: '', // The repository's creator admin: [''], // If multiple people can operate the repository, list them here as an array id: location.pathname, // Used to identify which page the comments belong to; must be unique and shorter than 50 characters})
gitalk.render('gitalk-container'); // Render the Gitalk comment component</script>First, the head part. It’s easy to see that head.pug is the Pug file that initializes the head content.
You just need to add the following code to head:
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")Next is the location of the comment module.
Add the following code to comments.pug:
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')Add the following properties to _config.pug:
gitalk: enable: false clientID: "" clientSecret: "" repo: "" owner: "" admin: ""Then set up the GitHub application according to Gitalk’s instructions and you’re done.