Fork me on GitHub

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

发表于 | 本文总阅读量 次

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

前一段时间，发现了一个评论系统很好用，果断把这个评论系统换到自己的博客里了。

本文主要讲在Hexo的NexT主题中如何使用Wildfire+Wilddog ，至于其他的博客以及其他的主题中如何使用的问题，我就不多说了。有需求的朋友可以去项目主页提问。

修改 NexT 评论模板

在你的博客项目中，打开./themes/next/layout/_partials/comments.swig 这个文件。
将文件尾部的内容：

1
2
3
4
5
6
7
8
9
10
{% if page.comments %}
  <div class="comments" id="comments">
    ...
    ...
    {% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
      <!-- 添加内容的位置在这里 -->
    {% endif %}
  </div>
{% endif %}

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% if page.comments %}
  <div class="comments" id="comments">
    ...
    ...
    {% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    {% elseif theme.wildfire.enable %}
      <style type="text/css">
        .wildfire_thread a {border-bottom: none}
      </style>
      <div class="wildfire_thread"></div>
      <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 src='https://unpkg.com/wildfire/dist/wildfire.auto.js'></script>
    {% endif %}
  </div>
{% endif %}

然后保存。

增加设置内容

打开主题设置文件 ./themes/next/_config.yml，注意：不是站点设置文件。
将下面的代码复制到合适的位置（包含全部注释）：

1
2
3
4
5
6
7
8
9
10
11
12
# Wildfire Support
wildfire:
  ## 开启Wildfire支持
  enable: true
  ## 主题颜色，目前可选值为light/dark两种，默认为light
  theme: light
  ## 系统语言，目前可选值为en/zh-CN两种，默认为en
  locale: zh-CN
  ## Wilddog配置
  database_provider: wilddog
  site_id: site_id   //这里是Wilddog提供的ID
  defaultAvatarURL: https://image.flaticon.com/icons/svg/621/621863.svg

需要注意的是，复制的时候不要修改这个配置的缩进关系。另外 Wilddog 和 Firebase 两者的配置只能选择其一。上面的示例就是使用的Wilddog。

完成部署

接下来素质三连

1
2
3
hexo clean
hexo g
hexo d

就完成了

由于野火是新的系统或许存在BUG
如果遇到BUG的话请到项目的主页提问