Hugo 添加Wildfire野火评论系统

选了诸多评论,决定暂时先用Wildfire 野火评论系统。 官方文档

由于我注册野狗收不到邮件,故选用google的Firebase

配置FireBase数据库

具体可以参考官方文档,但是还是有一些区别的.

开发Database

  1. 项目里创建Realtime Database数据库(中间的可以一系列默认)
  2. 配置规则
{
  "rules": {
    "users": {
      "$uid": {
        "isAdmin": {
          ".write": false
        },
        ".write": "auth.uid === $uid || root.child('users/'+auth.uid+'/isAdmin').val() === true"
      },
      ".read": true,
      ".indexOn": ["email"]
    },
    "pages": {
      ".write": true,
      ".read": true
    },
    "comments": {
      "$commentId": {
        ".write": "!data.exists() || root.child('users/'+auth.uid+'/isAdmin').val() === true || ((data.child('rootCommentUid').val() === auth.uid || data.child('uid').val() === auth.uid) && !newData.exists())"
      },
      ".read": true,
      ".indexOn": ["rootCommentId", "pageURL"]
    },
    "votes": {
      ".write": true,
      ".read": true
    },
    "commentReplies": {
      ".write": true,
      ".read": true
    },
    "notifications": {
      "$notifId": {
        ".write": "!data.exists() || root.child('users/'+auth.uid+'/isAdmin').val() === true || data.child('uid').val() === auth.uid"
      },
      ".read": true,
      ".indexOn": "uid"
    },
    "reported": {
      "$commentId": {
        "$uid": {
          ".write": "root.child('users/'+auth.uid+'/isAdmin').val() === true || (!data.exists() && $uid === auth.uid)",
          ".read": "root.child('users/'+auth.uid+'/isAdmin').val() === true || $uid === auth.uid"
        },
        ".write": "root.child('users/'+auth.uid+'/isAdmin').val() === true"
      },
      ".read": "root.child('users/'+auth.uid+'/isAdmin').val() === true"
    },
    "ban": {
      ".write": "root.child('users/'+auth.uid+'/isAdmin').val() === true",
      ".read": true
    },
    ".write": "root.child('users/'+auth.uid+'/isAdmin').val() === true",
    ".read": false
  }
}

开发Authentication

  • 登录提供商

默认都是停用的,这里需要启用第一项电子邮件地址/密码 启用允许用户使用电子邮件地址和密码注册即可

  • 已获授权的网域

添加需要使用域名,如 blog.spanda.io

获取Firebase配置

获取Firebase相关配置留用

    apiKey: "AIzaSyCIWT-NL7lXPfMB5Inqt5LRaWQsLPRjt_M",
    authDomain: "ysbot-af0b5.firebaseapp.com",
    databaseURL: "https://ysbot-af0b5.firebaseio.com",
    projectId: "ysbot-af0b5",
    storageBucket: "ysbot-af0b5.appspot.com",
    messagingSenderId: "157399509161"

配置hugo评论

这里仅针对我的博客主题而言

# script.html
{{ if .IsPage }}
 {{ if not (eq .Site.Params.Comment.wildfire false) }}
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
  // 你可以自定义一些配置
  //
  // databaseProvider: 必须为 'wilddog' 或者 'firebase'
  // databaseConfig: 请从你的数据库控制台复制过来。
  // pageURL(可选): 默认为当前页面的 URL。
  // pageTitle(可选): 默认为当前页面的 title。
  // theme(可选): 'light'(默认)或者 'dark'。
  // locale(可选): 'en'(默认)或者 'zh-CN'
  // defaultAvatarURL(可选): 默认头像是一个可爱的消防员 :-D
  var wildfireConfig = () => ({
    databaseProvider: 'firebase',
    databaseConfig: {
      apiKey: "AIzaSyCIWT-NL7lXPfMB5Inqt5LRaWQsLPRjt_M", 
      authDomain: "ysbot-af0b5.firebaseapp.com", 
      databaseURL: "https://ysbot-af0b5.firebaseio.com",
      projectId: "ysbot-af0b5", 
      storageBucket: "ysbot-af0b5.appspot.com", 
      messagingSenderId: "157399509161"
    },
    theme: 'light',
    locale: 'zh-CN',
    defaultAvatarURL: 'https://image.flaticon.com/icons/svg/621/621863.svg'
  })
</script>

<script src="https://i.spanda.io/libs/wildfire/0.3.8/wildfire.auto.js"></script>
<script src="https://i.spanda.io/libs/wildfire/0.3.8/wildfire.firebase.min.js"></script>
{{ end }}
{{ end }}

# head.html
 {{ if .IsPage }} 
 {{ if not (eq .Site.Params.Comment.wildfire false) }}
<link rel="stylesheet" href="https://i.spanda.io/libs/wildfire/0.3.8/wildfire.firebase.css" />
{{ end }} {{ end }}

# post/content.html
{{ partial "post/comment.html" . }}

# comment.html

{{ if not (eq .Site.Params.Comment.wildfire false) }}
<div class="post-action">
<style type="text/css">
    .wildfire_thread a {
        border-bottom: none
    }
</style>
    <div class="wildfire_thread"></div>
</div>
{{ end }}

  [[comment]]
    wildfire = true
    # support wilddog/firebase
    dbtype = "firebase"

大概就这些,官方文档已经很详细啦