Hexo Next 主题添加 Artalk 评论系统

Artalk 是一款自托管、自建后端的评论系统,项目地址:Artalk

20201228更新:已迁移至更加完善的 Waline 评论系统。

部署后端

1
2
3
4
git clone https://github.com/qwqcode/ArtalkServerPhp.git
cd ArtalkServerPhp
composer install
php -r "copy('Config.example.php', 'Config.php');"

打开Config.php文件,按照注释来修改配置。

默认的邮件通知模板比较简陋,可以找到email-tpl/default.html自行修改,这里我用 Valine 的 rainbow 邮件模板 修改了一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head></head>
<body>
<table style="width: 99.8%;height:99.8% ">
<tbody>
<tr>
<td>
<div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
<div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
<p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="<%=siteUrl%>"> {{conf.site_name}} </a>博客上的留言有新回复啦! </p>
</div>
<div style="margin:40px auto;width:90%">
<p>{{comment.nick}} 同学,您在博客上发表的评论得到了回复:</p>
<div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{{reply.content_html}}</div>
<p>您可以点击 <a style="text-decoration:none; color:#12addb" href="{{reply_link}}">查看回复的完整內容。</a></p>
<style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
</div>
</div> </td>
</tr>
</tbody>
</table>
</body>
</html>

在 Nginx 里面将后端的访问路径改为ArtalkServerPhp/public,浏览器直接访问后端,出现以下信息代表后端部署成功:

1
2
3
4
5
6
Artalk Server Php v0.0.2

> https://github.com/qwqcode/ArtalkServerPhp
> https://artalk.js.org
> https://github.com/qwqcode/Artalk
> https://qwqaq.com

部署前端

Next 主题对于自定义内容的插入可以通过custom_file_path的方式,只需在 Next 主题配置文件中找到custom_file_path配置项,取消相应的注释,在hexo/source/_data中创建或修改对应的文件并添加自定义内容即可。

但对于评论系统,custom_file_path预设的注入点不能精准的插入在文章翻页的后面。

有更高级一点的插入方式:theme_inject,但我看了大半天文档也不知道咋弄。

这里就用不太优雅的办法:修改主题源代码的方式,增加custom_file_path注入点。

修改themes/next/layout/_macro/post.njk文件,找到最后翻页的段落,添加新的注入点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
<div class="post-nav-item">
{%- if next %}
<a href="{{ url_for(next.path) }}" rel="next" title="{{ next.title }}">
{{ next.title }} <i class="fa fa-chevron-right"></i>
</a>
{%- endif %}
</div>
</div>
{{- next_inject('postBodyEnd1') }} {## 新的注入点 ##}
{%- endif %}
{%- endif %}
</footer>
</article>
</div>

修改themes/next/scripts/events/lib/utils.js文件,添加新的注入点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
···
const points = {
views: [
'head',
'header',
'sidebar',
'postMeta',
'postBodyEnd',
'postBodyEnd1', // 新的注入点
'footer',
'bodyEnd',
'comment'
],
···

修改或创建hexo/source/_data/head.njk文件,添加 CSS

1
<link href="//cdn.jsdelivr.net/npm/artalk@1.0.6/dist/Artalk.css" rel="stylesheet">

修改或创建hexo/source/_data/body-end.njk文件,添加脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="//cdn.jsdelivr.net/npm/artalk@1.0.6/dist/Artalk.js"></script>
<script>
new Artalk({
el: '#ArtalkComments', // 元素选择
placeholder: '来啊,快活啊 ( ゜- ゜)', // 占位符
noComment: '快来成为第一个评论的人吧~', // 无评论时显示
defaultAvatar: 'mp', // 参考 https://cn.gravatar.com/site/implement/images/#default-image
pageKey: '{{ page.permalink }}',
serverUrl: 'https://xx.com/index.php', //你的后端地址
readMore: { // 阅读更多配置
pageSize: 15, // 每次请求获取评论数
autoLoad: true // 滚动到底部自动加载
}
});
</script>

创建hexo/source/_data/post-body-end1.njk文件,添加评论元素。这里可能有人会问,为啥要把脚本部分放2个文件?如果都放post-body-end1.njk后无法结合pjax,第一次进入页面需要刷新一次才会显示评论。如果不开pjax,那么可以都放在post-body-end1.njk

1
2
3
4
5
<div>
<br />
<br />
<div id="ArtalkComments"></div>
</div>

最后,修改 Next 主题配置文件,引入插入的文件

1
2
3
4
custom_file_path:
head: source/_data/head.njk
postBodyEnd1: source/_data/post-body-end1.njk
bodyEnd: source/_data/body-end.njk

其他

  • 此方法后续更新主题的时候会导致修改被覆盖掉,望大佬在评论区贴出更好的教程。
  • 网页控制台会有#ArtalkComments was not found的错误提示,应该不影响使用。