giscus配置与置顶图标

在hexo-icarus主题中,使用giscus博客评论

觉得在众多博客评论系统中,giscus这个做的不错,挺好看的,支持很多种配置,所以想采用这个方案

但是目前icarus对giscus不太支持,有bug

需要手动在博客源码中嵌入js代码片段

具体是,在node_modules\hexo-theme-icarus\layout\comment中,添加giscus代码

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
const logger = require('hexo-log')();
const { Component } = require('inferno');
const view = require('hexo-component-inferno/lib/core/view');

module.exports = class extends Component {
render() {
const { config, page, helper } = this.props;
const { __ } = helper;
const { comment } = config;
if (!comment || typeof comment.type !== 'string') {
return null;
}

return <div class="card">
<div class="card-content">
<h3 class="title is-5">{__('article.comments')}</h3>
<script src="https://giscus.app/client.js"
data-repo="xxx"
data-repo-id="xxx"
data-category="Announcements"
data-category-id="xxx"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
{(() => {
try {
let Comment = view.require('comment/' + comment.type);
Comment = Comment.Cacheable ? Comment.Cacheable : Comment;
return <Comment config={config} page={page} helper={helper} comment={comment} />;
} catch (e) {
logger.w(`Icarus cannot load comment "${comment.type}"`);
return null;
}
})()}
</div>
</div>;
}
};

然后重新hexo server或者hexo generate + hexo deploy就可以

文章置顶图标

在post的front-matter里面加入sticky字段可以实现文章的指定,具体排序按照sticky后的数字大小从大到小排列

此时,我们想要在被置顶的文章标题前,加一个大头针图标,具体的添加方法为:

node_modules\hexo-theme-icarus\layout\common\article.jsx中的<div class="level-left">标签下,添加

1
2
{/* Pin icon */}
{page.sticky ? <i class="fas fa-thumbtack level-item" title="Pinned"></i> : null}

同理,重启hexo即可

Author

LULU

Posted on

2025-08-24

Updated on

2025-08-24

Licensed under

Comments