blog/content/posts/为Hexo博客Next主题添加Wildfire评论系统.md

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

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

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文件

{% 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代码块：

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

遇到的坑

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

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

修改后如下：

{% 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分支。

• 页面会有报错 GET https://api.ipify.org/?format=json net::ERR_BLOCKED_BY_CLIENT，暂时未解决，等待原作者处理。
• 页面url不能有中文，否则Edge浏览器会一直处于正在启动 Wildfire……中。
• pageURL字段必须经过url编码，否则会报错，临时解决方案为：{% quote %} {% raw %}pageURL: '{{page.permalink|url_encode}}'{% endraw %} {% endquote%}

参考文章

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