在hexo-icarus主题中,使用giscus博客评论
觉得在众多博客评论系统中,giscus这个做的不错,挺好看的,支持很多种配置,所以想采用这个方案
但是目前icarus对giscus不太支持,有bug
需要手动在博客源码中嵌入js代码片段
具体是,在node_modules\hexo-theme-icarus\layout\comment中,添加giscus代码
| 12
 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">标签下,添加
| 12
 
 | {}{page.sticky ? <i class="fas fa-thumbtack level-item" title="Pinned"></i> : null}
 
 | 
同理,重启hexo即可