后端部署概览

后端部署目前提供 GitHub、Server、Docker 三种方式，数据库可以选择 LeanCloud、MySQL、SQLite、MongoDB。

自 5.x 版本以后，LeanCloud 不再作为默认存储，改为更简单易用的 SQLite 作为默认。(这里数据库不建议用 SQLite)

LeanCloud 存储 MySQL 存储 SQLite 存储 MongoDB 存储
GitHub 部署 github+leancloud github+mysql github+sqlite(默认选项) github+mongodb
Server 部署 server+leancloud server+mysql server+sqlite server+mongodb
Docker 部署 docker+leancloud docker+mysql docker+sqlite docker+mongodb

部署方法：GitHub + Vercel + MongoDB

Fork 项目仓库

Fork 友链朋友圈的项目仓库，地址：友链朋友圈项目仓库

注意：如果前端部署采用 带管理面板的前端方案，则 Fork 时不要修改仓库名称，否则会导致管理面板部分功能不可用。

编辑配置文件

编辑 /hexo_circle_of_friends/fc_settings.yaml 文件，需要修改的配置如下：

1
2
LINK:
    - {link: "https://www.yyyzyyyz.cn/link/", theme: "butterfly"}  # link改为你的友链页地址，theme选择你的博客主题

添加 GitHub Secrets

点击仓库的 Settings → Secrets → New repository secret

添加 2 个环境变量 Secret：

变量名 值说明
MONGODB_URI MongoDB 提供的数据库链接（以 mongodb+srv 开头或 mongodb 开头）
STORAGE_TYPE 存储方式，填写 mongodb

配置完成后，应该如下图所示：

配置示例

开启 GitHub Actions 权限

点击仓库的 Settings → Actions → General → 勾选 Read and write permissions → Save

部署到 Vercel

  1. 前往 Vercel 官网，直接用 GitHub 创建账号并用手机号绑定
  2. 点击 New Project 新建项目
  3. 找到 Import Git Repository，选择你刚刚 Fork 的仓库，点击 Import

添加 Vercel 环境变量

添加以下环境变量：

变量名 说明
GH_NAME 你的 GitHub 用户名
GH_EMAIL 你的 GitHub 邮箱
GH_TOKEN GitHub Token，获取方法见 这里的 README.md
MONGODB_URI MongoDB 数据库链接
VERCEL_ACCESS_TOKEN Vercel Token，获取方法见下方

VERCEL_ACCESS_TOKEN 获取方法：

  1. 点击 Vercel 页面右上角的 Settings → Tokens → Create
  2. 随便输入一个名称后，点击 CREATE TOKEN
  3. 复制生成的 token，添加到 Vercel 环境变量中即可

添加完成后，应该如下图所示：

环境变量配置

重要提示：2022-8-27，*.vercel.app 在中国大陆遭遇污染导致无法访问，友链朋友圈的 Vercel 部署也会受到影响，可以通过解析到自定义域名来解决，或者切换部署方式。

配置友链列表（可选）

回到 GitHub，打开刚才 Fork 的项目，编辑 hexo_circle_of_friends/fc_settings.yaml这里我们需要手动添加SETTINGS_FRIENDS_LINKS因为我们的hexo友链魔改过了所以不会自动爬取

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
# 配置项友链
# enable：# 是否启用配置项友链 true/false（针对还未适配主题或者有定制需求的用户）
# json_api：通过json格式配置友链，详见：https://fcircle-doc.yyyzyyyz.cn/#/developmentdoc?id=配置项json友链
# list字段填写格式：["name", "link", "avatar","suffix"]，其中：
#       name：必填，友链的名字
#       link：必填，友链主页地址
#       avatar：必填，头像地址
#       suffix：选填，自定义订阅后缀，主要针对不规范的网站订阅后缀，见示例2
SETTINGS_FRIENDS_LINKS: {
    enable: true,
    json_api: "",
    list: [
        # 示例1：
        # ["贰猹の小窝", "https://noionion.top/", "https://pub-noionion.oss-cn-hangzhou.aliyuncs.com/head.jpg"],
        # ["Akilarの糖果屋", "https://akilar.top/", "https://akilar.top/images/headimage.png"],
        # 示例2：使用suffix的配置如下
        # 程序目前自动获取 "atom.xml", "feed/atom", "rss.xml", "rss2.xml", "feed", "index.xml" 这些后缀
        # 如果目标地址的后缀不在其中，就可以在这里添加
        # 比如 https://elizen.me/hello.xml ，填写：
        # ["elizen", "https://elizen.me/", "https://akilar.top/images/headimage.png", "hello.xml"]
        ["九弦之屋", "https://blog.sinzmise.top/", "https://sinzmiseblog.netlify.app/img/avatar.png"],
        ["千寻", "https://blog.qianxun7747.eu.org/", "https://cdn.staticaly.com/gh/qianxun7747/picx-images-hosting@master/xxx/tx.63ep7yknivg0.jpg"],
        ["福福不服", "https://ffbf.top/", "https://ffbf.top/upload/logo3.jpeg"],
        ["轻笑Chuckle", "https://www.qcqx.cn/", "https://www.qcqx.cn/img/head.webp"]
    ]
}

# get links from gitee
# 从gitee issue中获取友链
GITEE_FRIENDS_LINKS: {
    enable: false, # true 开启gitee issue兼容
    type: "normal",  # volantis/stellar用户请在这里填写volantis
    owner:  "ccknbc",  # 填写你的gitee用户名
    repo:  "blogroll",  # 填写你的gitee仓库名
    state:  "open",  # 填写抓取的issue状态(open/closed)
}

启用 GitHub Actions

  1. 回到 GitHub，启用 Fork 后仓库的 GitHub Action：Actions → I understand my workflows, go ahead and enable them
  2. 点击 update-friends-posts 并启用 workflow
  3. 点击 Run workflow → Run workflow 进行第一次运行
  4. 等待运行完毕后，仓库应该会上传 data.db，并且 Vercel 也会同步更新

前端部署概览

前端采用 安知鱼方案

安装插件

在博客根目录 [Blogroot] 下打开终端，运行以下指令：（与旧版前端方案不兼容，如有安装旧版请先卸载,这里我只运行了第一个插件，请自行选择）

1
2
3
npm uninstall hexo-butterfly-fcircle --save
npm uninstall hexo-filter-fcircle --save
npm install hexo-filter-fcircle-anzhiyu --save

添加配置信息

在站点配置文件 _config.yml 或者主题配置文件（如 _config.butterfly.yml）中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# fcircle
# see https://anheyu.com/posts/3753.html
fcircle:
  enable: true #控制开关
  apiurl: https://friends.anxy.top/ #api地址
  initnumber: 30 #【可选】页面初始化展示文章数量
  stepnumber: 30 #【可选】每次加载增加的篇数
  css: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/css/default.css #【可选】开发者接口，自定义css链接
  js: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fcircle.js #【可选】开发者接口，自定义js链接
  fetchJs: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fetch.js
  randomFriendsPostJS: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/random-friends-post.js
  topIcon: fas fa-arrow-right
  topLink: /about/
  top_background: https://hexo.anxy.top/img/guangyu.jpg
  path: /fcircle #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false
    aside: false
    top_img: false

插件参数释义

参数 备选值/类型 释义
enable true/false 控制开关
apiurl URL api 链接，配置教程参看 后端部署文档
initnumber number 页面展示文章数量，默认 20
stepnumber number 每次加载增加的篇数，默认 10
error_img URL 头像图片加载失败时的默认头像
css URL 自定义 css 链接
js URL 自定义 js 链接
fetchJs URL 自定义 fetchJs 链接
randomFriendsPostJS URL 自定义 randomFriendsPostJS 链接
path string fcircle 的路径名称，默认为 fcircle
topIcon string 顶部按钮的图标类名
topLink URL 顶部按钮点击跳转的链接（仅支持 pjax 跳转）
front_matter object fcircle 页面的 front_matter 配置
top_background URL 页面顶部模块背景图

顶部图片样式修改

可以通过配置项 top_background 修改背景图。

添加到导航菜单

最后添加到主题文件的 _config.yml 中的 menu:

1
朋友圈: /fcircle/ || fas fa-users