在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
| {} {page.sticky ? <i class="fas fa-thumbtack level-item" title="Pinned"></i> : null}
|
同理,重启hexo即可