friend-circle-lite 朋友圈的实现

xyx4042024-11-242024-12-09

cover

本文章操作均在 windows 操作系统下进行。

friend-circle-lite 朋友圈作者教程。

效果见本博客朋友圈。

搭建

1. fork 项目

进入此链接并 fork 本项目，fork 默认的就可以了，不用修改。

2. 修改 conf.yaml

在仓库里打开 conf.yaml 文件，点击 edit this file(像笔的图标)，然后把

spider_settings:
  enable: true
  json_url: "https://blog.liushen.fun/friend.json"
  article_count: 5
  merge_result:
    enable: false
    merge_json_url: "https://fc.liushen.fun"

里的 json_url 后的双引号里的链接改成你朋友圈的 json 的链接(下面会讲怎么获取)。

3. 设置 action

在项目里点击 Actions，然后点击绿色的按钮，之后进入 Friend Circle Lite，点 Enable workflow，等待加载，之后点 Run workflow，然后再点一次 Run workflow，点了后刷新下等待最上面的那个黄色圈变绿。

4. 搭建静态网站

之后打开 vercel，点击 Add New，点击 project，之后点 Import Git Repository 里的 Friend-Circle-Lite 后面的 import，之后点 Deploy，等一会点 Continue to Dashboard。

然后点 setting，再点 git，把 Branch Name 下的 main 改成 page 之后点 Save，再之后点 Deployments 点最上面的一次后的三个点，再点 Redeploy，之后还要再点一次 Redeploy。

之后如果框里出现了画面(可能要等会)就说明搭建好了，但是我们还要添加自定义域名，因为 vercel.app 在国内被墙了。

打开 vercel，点击 friend-circle-lite(你自己取的名字)，点击 Settings，点 Domains，然后在框里输入你的域名就可以了(初次绑定域名要等可能很久可能很快)。

当你的域名后面打了 √ 后你就可以打开你的域名查看页面了。

在你的域名后面加上 /all.json 就可以看的数据了。

获取朋友圈的 json

进入你的本地博客目录，在你的博客目录处新建 link.js 文件，并修改文件为：

const YML = require('yamljs')
const fs = require('fs')

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

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

data_f.forEach((entry, index) => {
    let lastIndex = 2;
    if (index < lastIndex) {
        const filteredLinkList = entry.link_list.filter(linkItem => !blacklist.includes(linkItem.name));
        friends = friends.concat(filteredLinkList);
    }
});

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

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

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

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

对着博客目录的空白处右键，点击 Open Git Bash here，然后输入 node link.js。

如果出现 Error: Cannot find module 'yamljs' 那么先运行 npm install yamljs 或 cnpm install yamljs，然后再运行 node link.js。

请注意，如果您博客里的友链配置是 links.yml，那么请把 data_f = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n')); 改成 data_f = YML.parse(fs.readFileSync('source/_data/links.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

在出现 friend.json 文件已生成。 这行字后就可以进入 source 文件夹查看 friend.json 文件了，如果是空的，就再生成一次或按照上面的操作重新弄下。

在这之后 hexo cl && hexo generate && hexo d，等待上传完并且 github 重新搭建好网站就可以通过 https://你的博客链接/friend.json 访问了，同时这也是你朋友圈的 json 的链接。

放进博客

在你的朋友圈的 index.md 里加上：

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

然后按照上面的注释进行填写就可以了，如我的是：

<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: 'https://pyqapi.xyx404.us.kg/',
            // 点击加载更多时，一次最多加载几篇文章，默认20
            page_turning_number: 20,
            // 头像加载失败时，默认头像地址
            error_img: 'https://i.p-i.vip/30/20240815-66bced9226a36.webp',
        }
    }
</script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">
<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>

注意

本文的方法与一些主题自带的朋友圈有冲突，如果您要按照我的方法请把您主题自带的朋友圈取消，如 anzhiyu 主题：需要把

# 朋友圈配置
friends_vue:
  enable: true
  vue_js: 
  apiurl:  # 朋友圈后端地址
  top_tips: 使用 友链朋友圈 订阅友链最新文章
  top_background:

改成

# 朋友圈配置
friends_vue:
  enable: false # 实际上只要改这。
  vue_js: 
  apiurl:  # 朋友圈后端地址
  top_tips: 使用 友链朋友圈 订阅友链最新文章
  top_background:

才行。

要在朋友圈看见朋友的文章需要朋友有 rss 订阅，如果不知道怎么弄 rss 订阅，可以看看本博客的文章。

每次更新友情链接都需要运行 node link.js，并 hexo 三连。