为Hexo博客Next主题添加Wildfire评论系统

本文主要记录Wildfire评论系统搭建的过程。

Hexo配置步骤

Step 1

关于wildfire的设置,请直接参考官方帮助文档

Step 2

%BLOG_PATH%\themes\next\layout\_third-party\comments路径下创建wildfire.swig文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% if page.comments and theme.wildfire.enable %}
<script type="text/javascript">
var wildfireConfig = () => ({
databaseProvider: '{{ theme.wildfire.database_provider }}',
databaseConfig: {
{% if (theme.wildfire.database_provider) === 'wilddog' %}
siteId: '{{ theme.wildfire.site_id }}'
{% elseif (theme.wildfire.database_provider) === 'firebase' %}
apiKey: '{{ theme.wildfire.api_key }}',
authDomain: '{{ theme.wildfire.auth_domain }}',
databaseURL: '{{ theme.wildfire.database_url }}',
projectId: '{{ theme.wildfire.project_id }}',
storageBucket: '{{theme.wildfire.storage_bucket}}',
messagingSenderId: '{{theme.wildfire.messaging_sender_id}}'
{% endif %}
},
theme: '{{theme.wildfire.theme}}',
locale: '{{theme.wildfire.locale}}'
})
</script>
<script type="text/javascript" src='//unpkg.com/wildfire/dist/wildfire.auto.js'></script>
{% endif %}

Step 3

%BLOG_PATH%\themes\next\layout_third-party\comments\index.swig

文件中添加wildfire.swig的引用:
1
{% include 'wildfire.swig' %}

Step 4

%BLOG_PATH%\themes\next\layout\_partials\comments.swig文件中,添加一个elseif代码块:

1
2
3
4
{% elseif theme.wildfire.enable %}
<div class="comments" id="comments">
<div class="wildfire_thread"></div>
</div>

遇到的坑

  • [x] 由于之前配置过valine的评论系统,后来添加了wildfire后死活不生效,重试了好多遍,最后无意中发现valine的bug,原代码如下:
1
2
3
4
5
6
7
8
{% elseif theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>

{% elseif theme.wildfire.enable %}
<div class="comments" id="comments">
<div class="wildfire_thread"></div>
</div>

修改后如下:

1
2
3
4
5
6
7
8
{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<div class="comments" id="comments">
</div>

{% elseif theme.wildfire.enable %}
<div class="comments" id="comments">
<div class="wildfire_thread"></div>
</div>

因为我禁用valine的时候只是把_config.yml里面的enable改为了false,valine的appid和appkey都是有效值,所以导致这里的判断进入了valine分支。

  • [x] 页面会有报错 GET https://api.ipify.org/?format=json net::ERR_BLOCKED_BY_CLIENT,暂时未解决,等待原作者处理。
  • [x] 页面url不能有中文,否则Edge浏览器会一直处于正在启动 Wildfire……中。
  • [x] pageURL字段必须经过url编码,否则会报错,临时解决方案为:

    pageURL: ‘{{page.permalink|url_encode}}’

参考文章

在Hexo.NexT主题中部署Wildfire评论系统

发布时间: 2017年12月26日 - 14时18分
更新时间: 2018年10月17日 - 21时42分
原始链接: https://oaoa.me/posts/3c5544db/