文章摘取地点
本人hexo朋友圈由SZ・Ninty提供帮助完成！
特别感谢@SZ・Ninty的帮助！

心历路程

在@SZ・Ninty的帮助下一步一步完成，中间也是出错了emmm因为我打键盘速度过快然后打错了许多单词或者密码emmm导致认为后端部署出问题了呢~最后也是完成了，虽然当时弄得有点迷糊，没有跟上，现在弄清顺序思路了，笑哭.jpg

项目部署

项目部署分为后端部署和前端部署。

后端部署概览：

后端部署目前提供github，server，docker三种方式，数据库可以选择leancloud，mysql，sqlite，mongodb。
自5.x版本以后，leancloud不再作为默认存储，改为更简单易用的sqlite作为默认。(这里数据库不建议用sqlite)SZ・Ninty试过了好像不太行！

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友链朋友圈的项目仓库，地址：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends 注意：如果前端部署采用带管理面板的前端方案，则fork时不要修改仓库名称，否则会导致管理面板部分功能不可用。
编辑/hexo_circle_of_friends/fc_settings.yaml文件，需要修改的配置如下：

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

然后点击仓库的Settings—>Secrets—>New repository secret

添加2个环境变量secret：
MONGODB_URI ：mongodb提供的数据库链接以mongodb+srv开头或mongodb开头的
STORAGE_TYPE ：存储方式，填写mongodb
配置完成后，应该如下图所示：

然后点击仓库的setting—>Actions—>General—>勾选Read and write permissions—>Save

前往vercel官网，直接用github创建账号并用手机号绑定。
点击New Project新建项目
找到Import Git Repository，应该可以看见你刚刚fork的仓库，点击Import。

然后添加vercel环境变量,当然也可以Deploy以后在Settings—>Environment Variables添加（注意：VERCEL_ACCESS_TOKEN环境变量只能Deploy以后添加）
添加GH_NAME、GH_EMAIL、GH_TOKEN、MONGODB_URI，此外，还需要添加VERCEL_ACCESS_TOKEN
GH_TOKEN的获取方法在这里面的README.md中
VERCEL_ACCESS_TOKEN获取方法
点击vercel页面右上角的Settings—>Tokens—->Create

随便输入一个名称后，点击CREATE TOKEN，复制生成的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，启用fork后仓库的github action，点击Actions—>I understand my workflows, go ahead and enable them

之后点击update-friends-posts并启用workflow

然后点击Run workflow—->Run workflow进行第一次运行

等待运行完毕后，仓库应该会上传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.shangskr.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.shangskr.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，生成的页面为 fcircle/index.html
topIcon string 【可选】字符串，顶部按钮的图标类名
topLink URL 【可选】字符串，顶部按钮点击跳转的链接（仅支持 pjax 跳转
front_matter object 【可选】写法见上文示例，fcircle 页面的 front_matter 配置
top_background URL 【可选】字符串，页面顶部模块背景图

顶部图片样式修改
可以通过配置项top_background修改
最后添加到主题文件的_config.yml中的menu:
朋友圈: /fcircle/ ||
就完成了