感谢来自 liushen 的轻量友链朋友圈官方文档：https://blog.liushen.fun/posts/4dc716ec/ 轻量朋友圈适配大部分博客本教程采用 Serverless

1. Fork 仓库#

:::button{text=“Github” url=“https://github.com/willow-god/Friend-Circle-Lite”}:::

2. 制作友链信息#

2.1自动制作#

首先，在博客根目录添加文件link.js，写入以下代码：

1
const YML = require('yamljs')
2
const fs = require('fs')
3

4
const blacklist = ["友站名称1", "友站名称2", "友站名称3"]; // 由于某种原因，不想订阅的列表
5

6
let friends = [],
7
    data_f = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));
8

9
data_f.forEach((entry, index) => {
10
    let lastIndex = 2;
11
    if (index < lastIndex) {
12
        const filteredLinkList = entry.link_list.filter(linkItem => !blacklist.includes(linkItem.name));
13
        friends = friends.concat(filteredLinkList);
14
    }
15
});
16

17
// 根据规定的格式构建 JSON 数据
18
const friendData = {
19
    friends: friends.map(item => {
20
        return [item.name, item.link, item.avatar];
21
    })
22
};
23

24
// 将 JSON 对象转换为字符串
25
const friendJSON = JSON.stringify(friendData, null, 2);
26

27
// 写入 friend.json 文件
28
fs.writeFileSync('./source/friend.json', friendJSON);
29

30
console.log('friend.json 文件已生成。');

随后安装依赖：

1
npm i yamljs --save

接着在根目录执行

1
node link.js

就会生成 friend.json 文件，丢入 source 上传即可

2.2 手动制作#

你可以手动制作该文件，格式如下：

1
{
2
  "friends": [
3
    [
4
      "清羽飞扬",
5
      "https://blog.liushen.fun/",
6
      "https://blog.liushen.fun/info/avatar.ico"
7
    ],
8
    [
9
      "ChrisKim",
10
      "https://www.zouht.com/",
11
      "https://cdn.qyliu.top/i/2024/06/27/667d880789765.webp"
12
    ],
13
    [
14
      "Akilar",
15
      "https://akilar.top/",
16
      "https://cdn.qyliu.top/i/2024/04/06/661170950f7a2.png"
17
    ],
18
      ……
19
}

3. 更改配置文件 `conf.yaml`#

1
# 爬虫相关配置
2
# 解释：使用request实现友链文章爬取，并放置到根目录的all.json下
3
spider_settings:
4
  enable: true
5
  json_url: "https://blog.liushen.fun/friend.json"
6
  article_count: 5
7
  merge_result:
8
    enable: false
9
    merge_json_url: "https://fc.liushen.fun"

值	说明
`enable`	必开啊，不开怎么用
`json_url`	获取友链的 `json` ，仅支持网络地址
`article_count`	每个地址最多获取的文章数
`merge_result`	合并其他的友链数据

4. 开启 Github Action#

4.1 配置 Action 权限#

把 Action 权限从只读改成可以读取和写入

4.2 启用 Action#

将Friend Circle Lite开启

开启后，每隔 4 小时便会运作一次。

5. 部署前端#

5.1 托管#

在托管商处，选择你 Fork 之后的仓库，将构建目录更改为 page 即可。

5.2 部署到页面#

在页面中直接放置如下内容：

1
<div id="friend-circle-lite-root"></div>
2
<script>
3
    if (typeof UserConfig === 'undefined') {
4
        var UserConfig = {
5
            // 填写你的fc Lite地址
6
            private_api_url: 'https://fc.liushen.fun/',
7
            // 点击加载更多时，一次最多加载几篇文章，默认20
8
            page_turning_number: 24,
9
            // 头像加载失败时，默认头像地址
10
            error_img: 'https://pic.imgdb.cn/item/6695daa4d9c307b7e953ee3d.jpg',
11
        }
12
    }
13
</script>
14
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">
15
<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>

其中 script 部分可以改成 js 文件提供。

6. 邮箱订阅#

共两个部分：

1
rss_subscribe:
2
  enable: true
3
  github_username: willow-god
4
  github_repo: Friend-Circle-Lite
5
  your_blog_url: https://blog.liushen.fun/

1
smtp:
2
  email: 3162475700@qq.com
3
  server: smtp.qq.com
4
  port: 587
5
  use_tls: true

说明：

github_username 与 github_repo 主要是用来拼接 issue api。
如果你开启这一部分，smtp 部分需要配置。
配置完后进入 issue 部分，新建 issue 即可看到邮件提醒模板，你可以删掉其他没用的模板。

设置 smtp 密码#

在你 Fork 的仓库中，依次进入 Settings -> Secrets -> New repository secret，添加以下 Secrets：

SMTP_PWD: SMTP 服务器的密码，用于发送电子邮件。

结语#

最后希望使用愉快！