Hugo Blowfish 主题配置 Firebase 阅读量和点赞功能

概述

#

Blowfish 主题通过 Firebase 作为后端服务来存储和展示文章的阅读量（Views）和点赞数（Likes）。配置过程主要分为以下几个步骤：

1. 创建 Firebase 项目
2. 启用 Authentication（身份验证）
3. 创建 Firestore Database
4. 配置数据库权限
5. 在主题配置文件中填入 Firebase 配置信息

步骤一：创建 Firebase 项目

#

1. 打开 Firebase Console
2. 点击 创建项目
3. 输入项目名称（如 myblog）
4. 关闭 Google Analytics（可选）
5. 等待项目创建完成

步骤二：启用 Authentication

#

Blowfish 主题需要使用匿名登录来记录阅读量和点赞。

1. 在 Firebase 控制台左侧，点击 Build → Authentication
2. 点击 开始使用 或 Get Started
3. 切换到 Sign-in method 标签页
4. 点击 Add provider
5. 选择 Anonymous（匿名）
6. 将开关设置为 启用 (Enabled)
7. 点击 Save 保存

步骤三：创建 Firestore Database

#

1. 在 Firebase 控制台左侧，点击 Build → Firestore Database
2. 点击 Create Database
3. 选择 Start in test mode（测试模式，允许读写）
4. 选择一个离你最近的区域
5. 点击 Done

步骤四：配置数据库权限

#

默认的测试模式权限可能不够，需要设置允许匿名用户写入数据。

1. 在 Firestore Database 页面，点击 Rules 标签页
2. 将规则修改为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

3. 点击 Publish 发布

步骤五：获取 Firebase 配置信息

#

1. 在 Firebase 控制台，点击左侧 项目设置（齿轮图标）
2. 向下滚动到 你的应用 部分
3. 点击 </>（Web 应用）
4. 注册应用（输入昵称如 “blog”）
5. 复制 Firebase 配置对象：

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "myblog.firebaseapp.com",
  projectId: "myblog",
  storageBucket: "myblog.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:...",
  measurementId: "G-XXXXXXXXXX"
};

步骤六：配置 Blowfish 主题

#

打开 config/_default/params.toml 文件，找到 [firebase] 部分并填入配置：

[firebase]
  apiKey = "你的 API Key"
  authDomain = "你的项目.firebaseapp.com"
  projectId = "你的项目 ID"
  storageBucket = "你的项目.appspot.com"
  messagingSenderId = "你的发送者 ID"
  appId = "你的 App ID"
  measurementId = "你的 Measurement ID"

步骤七：开启文章显示功能

#

在 config/_default/params.toml 的 [article] 部分，确保以下配置为 true：

[article]
  showViews = true   # 显示阅读量
  showLikes = true  # 显示点赞数

验证配置

#

完成以上步骤后：

1. 重启 Hugo 服务器：

   hugo server -D

2. 打开博客文章页面

3. 刷新页面几次

4. 打开浏览器开发者工具（F12），查看控制台是否有错误

常见问题

#

Q: 为什么阅读量不增加？

#

A: 检查以下几点：

1. 浏览器是否有广告拦截插件（可能阻止 Firebase 请求）
2. Firebase 配置是否正确
3. Firestore Database 是否已创建
4. 尝试在隐私模式下访问

Q: 可以使用 Realtime Database 吗？

#

A: Blowfish 主题默认使用 Firestore。如果一定想用 Realtime Database，可能需要修改主题代码。

Q: 如何防止刷量？

#

A: 可以配置更严格的 Firestore 安全规则，例如限制同一 IP 的写入频率，或者使用 Firebase 的速率限制功能。

总结

#

通过以上步骤，你的博客就已经配置好了阅读量和点赞功能：

• ✅ Firebase 项目已创建
• ✅ 匿名登录已启用
• ✅ Firestore Database 已创建
• ✅ 数据库权限已配置
• ✅ 主题配置已填入
• ✅ 文章显示功能已开启

访客访问文章时，系统会自动记录阅读量；点击点赞按钮后，会记录点赞数。这些数据都存储在 Firebase 中，实时显示在文章页面。