专栏首页梦魇小栈在Hexo博客 NexT主题中部署Wildfire评论系统

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

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

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

修改 NexT 评论模板

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

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

修改为成下面的内容:

{% 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,注意:不是站点设置文件。 将下面的代码复制到合适的位置(包含全部注释):

# 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
  avatarURL: https://image.flaticon.com/icons/svg/621/621863.svg
  ## 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 的话,配置内容就如下:

wildfire:
  enable: true
  theme: light
  locale: zh-CN
  database_provider: wilddog
  site_id: wdg_my_site_id

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

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

上面的值呢,就需要大家从自己建好的 APP 应用中拷贝过来了。

完成部署

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git 常用命令学习及整理

    最近用Git比较多,所以大概整理下 Git是目前世界上最先进的分布式版本控制系统。

    ihoey
  • JQuery分析及实现part5之事件模块功能及实现

    ihoey
  • Merry Christmas

    ihoey
  • [源码解析] GroupReduce,GroupCombine 和 Flink SQL group by

    本文从源码和实例入手,为大家解析 Flink 中 GroupReduce 和 GroupCombine 的用途。也涉及到了 Flink SQL group by...

    罗西的思考
  • C++中输出流的刷新问题和 endl和 \n的区别

    用户1653704
  • Qt音乐播放器[1]-介绍

    基于Qt写的音乐播放器,主要功能有添加音乐,上一曲,下一曲,暂停/播放,拖动快进,歌词滚动显示。

    Qt君
  • “互金圈”2018年又要搞事情!

    回顾2017年,互联网金融遭遇冰火两重天:一方面,现金贷、ICO、网贷等业态遭遇监管重拳;另一方面,互联网金融公司出海东南亚、涌现赴美上市潮,迎来资本盛宴。展望...

    用户1310347
  • 1500万个数据,打造个性胸罩!

    大数据文摘
  • 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

    葡萄城控件
  • jquery 介绍

    引入jquery: <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    用户5760343

扫码关注云+社区

领取腾讯云代金券