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

说在前面

前一段时间,蹭着@CHENG KANG的项目和他一起做了Wildfire在线评论系统。本来最开始我是抱着做着玩的心态的,结果随着功能的逐渐增多,以及CHENG KANG的精益求精的追求,我发现这个东西突然变得还可以用来着。所以这就屁颠屁颠的打开了我万年不更新的博客,把这个评论系统加到自己的博客里了。

所以本文主要讲在HexoNexT主题中如何使用Wildfire,至于其他的博客以及其他的主题中如何使用的问题,我就不多说了。有需求的朋友可以去项目主页提问,或者在这里提问也可以。如果我懂得话一定会回答的。

修改NexT评论模板

  1. 在你的博客项目中,打开./themes/next/layout/_partials/comments.swig 这个文件。

  2. 将文件尾部的内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {% 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
35
36
37
{% 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 %}

然后保存。

增加设置内容

  1. 打开主题设置文件./themes/next/_config.yml注意:不是站点设置文件

  2. 将下面的代码复制到合适的位置(包含全部注释):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # 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
    ## Firebase配置
    # database_provider: firebase
    # api_key: apiKey
    # auth_domain: authDomain
    # database_url: databaseURL
    # project_id: projectId
    # storage_bucket: storageBucket
    # messaging_sender_id: messagingSenderId

需要注意的是,复制的时候不要修改这个配置的缩进关系。另外WilddogFirebase两者的配置只能选择其一。比如要使用Wilddog的话,配置内容就如下:

1
2
3
4
5
6
7
wildfire:
enable: true
theme: light
locale: zh-CN
database_provider: wilddog
site_id: wdg_my_site_id

如果要使用Firebase则配置选择为如下:

1
2
3
4
5
6
7
8
9
10
11
12
wildfire:
enable: true
theme: light
locale: zh-CN
database_provider: firebase
api_key: your_apiKey
auth_domain: your_authDomain
database_url: your_databaseURL
project_id: your_projectId
storage_bucket: your_storageBucket
messaging_sender_id: your_messagingSenderId

上面的值呢,就需要大家从自己建好的数据库拷贝过来了。

完成部署

下面就可以直接 hexo generate生成就可以了。很简单吧~
当然如果还有什么问题,欢迎在这里提问哦。