---
title: 为Hexo博客Next主题添加Wildfire评论系统
date: 2017-12-26 14:18:11
tags: [vps, hexo]
categories: vps
---

本文主要记录[Wildfire](https://github.com/cheng-kang/wildfire)评论系统搭建的过程。

<!-- more -->

## Hexo配置步骤

{% note primary %} Step 1 {% endnote %}

关于wildfire的设置，请直接参考{% link 官方帮助文档 https://wildfire.js.org/#/zh-cn/usage?id=%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e %}。

{% note primary %} Step 2 {% endnote %}

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

```swig
{% 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 %}
```

{% note primary %} Step 3 {% endnote %}

在{% quote %}%BLOG_PATH%\themes\next\layout\_third-party\comments\index.swig{% endquote %}文件中添加wildfire.swig的引用：
{% code lang:swig %}
{% raw %}{% include 'wildfire.swig' %}{% endraw %}
{% endcode%}

{% note primary %} Step 4 {% endnote %}

在`%BLOG_PATH%\themes\next\layout\_partials\comments.swig`文件中，添加一个elseif代码块：

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

## 遇到的坑
- [x] 由于之前配置过valine的评论系统，后来添加了wildfire后死活不生效，重试了好多遍，最后无意中发现valine的bug，原代码如下：

```swig
{% 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>
```

修改后如下：

```swig
{% 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编码，否则会报错，临时解决方案为：{% quote %}
{% raw %}pageURL: '{{page.permalink|url_encode}}'{% endraw %}
{% endquote%}~~

## 参考文章
[在Hexo.NexT主题中部署Wildfire评论系统](http://mrliao.cn/2017/12/25/%E5%9C%A8Hexo.NexT%E4%B8%BB%E9%A2%98%E4%B8%AD%E9%83%A8%E7%BD%B2Wildfire%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/)