添加朋友圈

Butterfly主题魔改教程，添加朋友圈。

我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：贰猹の小窝的《友链朋友圈 3.0 食用说明书》和Akilarの糖果屋的《hexo-filter-fcircle》。

1.说明

友链朋友圈的后端运行由 3 部分组成，涉及 2 个仓库、3 个平台，难免感觉有些繁琐。

后端运行步骤为：

gh action 爬虫抓取友链文章并作基本处理，推送至 leancloud → vercel 获取 leancloud 数据后进行二次处理后生成 api

而前端只需要再对 api 返回的 json 数据做一次排序即可

2.步骤

2.1后端部署配置

2.1.1leancloud 数据库搭建

前往 leancloud 国际版官网（推荐国际版）注册账号并登录。
前往控制台新建应用，应用名称无限制
进入应用中，点击 设置 -> 应用凭证，记录 AppID 和 AppKet 即可。(之后两步部署均会使用到)

2.1.2github 爬虫仓库部署及配置项说明

fork 友链朋友圈的项目仓库 https://github.com/Rock-Candy-Tea/hexo-circle-of-friends
点击 fork 后的仓库的 Settings -> Secrets -> New repository secret创建环境变量。

Name 分别为： APPID、APPKEY、LINK ；

Value 分别填入刚刚保存 Leancloud 的应用 ID（AppID）和应用密钥（AppKey）以及你的友链链接（例如 https://noionion.top/link/）；

配置变量 1

配置变量 2

配置变量 3
启用友链朋友圈的 github action，点击 fork 后的仓库的 Actions -> I understand my workflows, go ahead and enable them
之后点击 update-friends-posts 并启用 workflow
之后点击仓库 star 来完成第一次程序运行，不出意外的话结果如下图
这时你应该能在 leancloud 上看到上传的数据啦（除非你不是已经适配的主题，在配置项中会有相应解决办法），此后在每天的 8,12,17,22 点各会有两次自动更新爬取。

编辑仓库中的 setting.py 文件，需要用户自行编辑的仅如下几项（使用了GitHub Action自动更新友链的才需要配置如下配置项）。对于非已适配主题的 hexo 用户（无 github 和 gitee 友链）和非 hexo 用户，请将友链自行按格式添加到 CONFIG_FRIENDS_LINKS[‘list’] 中并启用它。（这是目前通用化的一种方式，如果是 hexo 用户希望适配自己的主题，请提交 issue）

"""
功能 设置
"""
# github友链配置
GITHUB_FRIENDS_LINKS = {
    "enable": False,    # True 开启gitee issue兼容
    "type": "normal",  # volantis用户请在这里填写 volantis
    "owner": "Zfour",  # 填写你的github用户名
    "repo": "zfour-friends",  # 填写你的github仓库名
    "state": "open"  # 填写抓取的issue状态(open/closed)
}

# gitee友链配置
GITEE_FRIENDS_LINKS = {
    "enable": False,    # True 开启gitee issue兼容
    "type": "normal",  # volantis用户请在这里填写 volantis
    "owner": "Zfour",  # 填写你的github用户名
    "repo": "zfour-friends",  # 填写你的github仓库名
    "state": "open"  # 填写抓取的issue状态(open/closed)
}

# 屏蔽站点
BLOCK_SITE = [
    "https://example.com/",
    'https://blog.cyfan.top/' # 这位朋友伪造了atom不让抓咱也没办法
]

# 友链列表配置文件
CONFIG_FRIENDS_LINKS = {
    "enable": False, # 是否启用配置项友链 True/False（此项用于针对还未适配的主题用户）
    "list":[
        # 格式：["name", "link", "avatar"]，除最后一行外每行后面加","，"[]"不可省略
        # link的结尾最好加上'/'
        # 例如：
        ["贰猹の小窝", "https://noionion.top/", "https://pub-noionion.oss-cn-hangzhou.aliyuncs.com/head.jpg"],
        ["小冰博客", "https://zfe.space/", "https://zfe.space/images/headimage.png"]
    ]
}

2.1.3vercel 无服务器 API 部署

前往vercel 官网，直接用 github 创建账号并用手机号绑定（其实前端直接调用 leancloud 的数据也可以获取信息，但会暴露你的 AppID 和 AppKey，所以套一层 vercel 作为 api 较为安全）
点击 New Project 新建项目
点击 Import Third-Party Git Repository，输入 https://github.com/Rock-Candy-Tea/hexo-friendcircle-api。
然后点击 github，输入仓库名（无限制），生成 api 仓库。（此步骤会在 github 生成一个 api 仓库（不用理它，但也不要删除））
下一步骤 Create a Team 跳过 (Skip) 即可，等它构建完后点击 Go to Dashboard 即可
点击项目 Settings -> Environment Variables，在如图框中输入密钥，Name 分别以 LEANCLOUD_ID、LEANCLOUD_KEY 创建环境变量。
Value 分别填入刚刚保存 Leancloud 的应用 ID（AppID）和应用密钥（AppKey）。
回到项目首页，点击 View Build Logs 后在 Visit 左侧的选择框中点击 Redeploy 即可
回到上一页，点击 visit 后，在网址后面加上 /api 访问 api，如 https://hexo-friendcircle3-api.vercel.app/api，出现数据即为部署成功

2.2前端部署配置

2.2.1hexo 插件安装版

安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令（与旧版前端方案不兼容，如有安装旧版请先卸载）：
npm uninstall hexo-butterfly-fcircle --save
npm install hexo-filter-fcircle --save

添加配置信息
在站点配置文件_config.yml 或者主题配置文件例如_config.butterfly.yml 中添加

# fcircle
# see https://akilar.top/posts/8480b91c/
fcircle:
  enable: true #控制开关
  apiurl: https://hexo-friendcircle-api.vercel.app/api #api地址
  initnumber: 20 #【可选】页面初始化展示文章数量
  stepnumber: 10 #【可选】每次加载增加的篇数
  css: #【可选】开发者接口，自定义css链接
  js: #【可选】开发者接口，自定义js链接
  path: #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false

参数释义

参数	备选值 / 类型	释义
enable	true/false	控制开关
apiurl	URL	api 链接，配置教程参看友链朋友圈 3.0 食用说明书
initnumber	number	【可选】填写阿拉伯数字，页面展示文章数量，默认 20
stepnumber	number	【可选】填写阿拉伯数字，每次加载增加的篇数，默认 10
css	URL	【可选】开发者接口，自定义 css 链接
js	URL	【可选】开发者接口，自定义 js 链接
path	string	【可选】字符串，fcircle 的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
front_matter	object	【可选】写法见上文示例，fcircle 页面的 front_matter 配置