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

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

Hexo配置步骤

Step 1

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

Step 2

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

Step 3

%BLOG_PATH%\themes\next\layout\_third-party\comments\index.swig文件中添加wildfire.swig的引用:

{% raw %}{% include 'wildfire.swig' %}{% endraw %}

Step 4

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

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

遇到的坑

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

参考文章

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


vpshexo

768 Words

2017-12-26 22:18