这两天突然发现，之前使用极简模式部署好的友链朋友圈没法获取到数据了。看了Github仓库才知道原项目已经停止支持了，取而代之的就是这个轻量友链朋友圈。
不知道是不是因为这个项目是为了 hexo 打造的原因，项目看了很久，愣是没看明白。直到把详细文档研究了一通，才大概明白了运行的原理。
其实严格来讲，该项目主要分为三个步骤：
顾名思义，该步骤通过以下代码，将指定页面上的友链信息，直接转换成为一个 friend.json 。
原代码如下：
const YML = require('yamljs')
const fs = require('fs')
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 文件已生成。');
比较遗憾的是，该代码仅适用于 HEXO 博客程序，如果想要用在HUGO中，需要做如下修改：
const cheerio = require('cheerio');
const fs = require('fs');
const path = require('path');
// 获取项目根目录的路径
const projectRoot = process.cwd();
// 读取 HTML 文件内容
const htmlFilePath = path.join(projectRoot, 'public', 'links', 'index.html');
const htmlContent = fs.readFileSync(htmlFilePath).toString();
// 使用 cheerio 解析 HTML
const $ = cheerio.load(htmlContent);
// 创建一个空的 friends 数组
let friends = [];
// 假设在 HTML 中每个好友信息存储在 <div class="friend-item"> 中，
// 并且每个条目包含 <a class="username">、<img class="avatar"> 和 <a class="link">
$('.friend-item').each((index, element) => {
const username = $(element).find('.username').text().trim(); // 提取用户名
const link = $(element).find('.link').attr('href'); // 提取链接
const avatar = $(element).find('.avatar').attr('src'); // 提取头像
// 如果都存在，添加到 friends 数组
if (username && link && avatar) {
friends.push({
name: username,
link: link,
avatar: avatar
});
}
});
// 根据规定的格式构建 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(path.join(__dirname, 'friend.json'), friendJSON);
console.log('friend.json 文件已生成。');
将该代码文件保存在根目录Link.js文件中。运行：
node link.js
就可以得到 friend.json 文件。
需要注意的是，这里需要用到 cheerio 解析 HTML。所以在运行前，需要：
npm install cheerio
以下就是JSON格式文件示例：
{
"friends": [
[
"林木木",
"https://immmmm.com",
"https://cravatar.cn/avatar/ba83fa02fc4b2ba621514941307e21be.jpeg?s=400"
],
[
"山卜方",
"https://novcu.com",
"https://cravatar.cn/avatar/6ebab96f3131621c51c08370d3c996f0.jpeg?s=400"
],
[
"大大的小蜗牛",
"https://eallion.com",
"https://cravatar.cn/avatar/171e4c30959e8c077a6c58b958624b31.jpeg?s=400"
]
}
在 fork 了仓库：Friend-Circle-Lite 之后，只需要修改仓库中的 config.yaml 文件
spider_settings:
enable: true
json_url: "https://<你的地址>/friend.json"
article_count: 5
merge_result:
enable: true
merge_json_url: "<你的地址>"
如果需要邮件推送功能的，跟随官方文档完成相应配置即可。
在完成所有配置后，就可以手动或者自动的运行 Github Action ，该Action就会根据我们提供的 friend.json 拿到友链中所有朋友更新的文章啦。最后会在page分支中，生成一个 all.json ，通过调用这个文件，就可以做前端渲染了。
大功告成。
]]>曾经我常常感觉到，每一个独立的博客都像是一座彼此独立的孤岛。所以现在，有了越来越多的工具，把大家连接起来，像Memos、Twikoo等等。而友链朋友圈也是如此。你可以随时获取朋友网站的更新内容，并了解朋友的活跃情况，以此来将大家紧密的连接起来。
首先，友链页的抓取是通过css选择器进行的，所以我们需要将友链页按照友链朋友圈提供的规则进行修改。如果与对应规则不匹配，可能会遇到获取文章为0、管理面板出现status code 500、start error等错误。
/* 规则一（common1）：*/
/* avatar : '.cf-friends img::attr(src)' */
/* link : '.cf-friends a::attr(href)' */
/* name : '.cf-friends a::text' */
/* 规则二（common2）：*/
/* avatar : 'img.cf-friends-avatar' */
/* link : 'a.cf-friends-link' */
/* name : '.cf-friends-name' */
只要上述css选择器能够匹配到，就完成了适配。根据规则，你编写的友链页面的友链部分可以是这样：
<div class="cf-friends">
<div>
<img src="https://www.baidu.com" alt=""> <!-- 头像 -->
<a href="https://www.baidu.com">xxxx的博客</a> <!-- 链接 -->
</div>
<div>
<img src="https://www.baidu.com" alt="">
<a href="https://www.baidu.com">xxxx的博客</a>
</div>
<div>
<img src="https://www.baidu.com" alt="">
<a href="https://www.baidu.com">xxxx的博客</a>
</div>
<div>
<img src="https://www.baidu.com" alt="">
<a href="https://www.baidu.com">xxxx的博客</a>
</div>
</div>
也可以是：
<a class="cf-friends-link" href="https://www.baidu.com">
<img class="cf-friends-avatar" src="https://www.baidu.com" alt="">
<span class="cf-friends-name"> xxxx的博客</span>
</a>
使用时，只需要在fc_settings.yaml配置文件中配置为common1或者common2即可。
友链朋友圈提供了非常多的部署方式，可以根据自己的习惯选择自己喜欢的方式部署，让我觉得十分的贴心。而我选择了极简模式。
极简模式旨在最简程度运行程序，并输出最简化结果。
在极简模式下，友链朋友圈会使用 Github Action 抓取友链页中的连接，并将连接RSS中的文章输出为一个Data.json文件存放在Github仓库中。而我们只需要调用这个文件，做前端渲染就行了。
如果担心 data.json 放在Github仓库访问不稳定，也可以通过 up to aliyun oss 等Github Action 将文件推送到国内的CDN上进行访问。
- name: Setup aliyun oss
uses: manyuanrong/setup-ossutil@master
with:
endpoint: oss-cn-hangzhou.aliyuncs.com
access-key-id: ${{ secrets.ACCESS_KEY_ID }}
access-key-secret: ${{ secrets.ACCESS_KEY_SECRET }}
- name: To aliyun
run: ossutil cp -rf data.json oss://${{ secrets.BUCKET }}/
需要在仓库的setting–>Secrets and variables–>Actions–>New repository secret
配置好Action所需要的变量。
部署成功后，应该就可以在你 fork 的仓库中看到 data.json 文件了。那么接下来，就是在前端渲染了。
直接上代码：
<div class="links"></div>
var linksUrl = 'https://<你的Github仓库地址>/data.json';
var linksDom = document.querySelector('.links');
if (linksDom) {
getLinks()
}
function getLinks() {
fetch(linksUrl).then(res => res.json()).then(resdata => {
updateHtml(resdata.article_data);
});
}
function updateHtml(data){
var result = "",
resultAll = "";
for (var i = 0; i < data.length; i++) {
let author = data[i].author,
avatar = data[i].avatar,
title = data[i].title,
link = data[i].link,
floor = data[i].floor,
created = data[i].created;
result +=
'<div class="col-12 mt-3"><div class="item-body flex-fill p-3"><div class="item-header d-flex mb-3"><div class="item-avatar mr-3" style="background-image:url('+ avatar +')"></div><div class="item-sub"><div class="item-creator">'+ author +'</div></div></div><div class ="item-content d-flex flex-fill flex-column"><div class="item-inner flex-fill my-2"><a href="'+link+'" target="_blank">'+ title+'</a></div><div class="item-footer d-flex mt-2"><div class="item-time item-tag d-flex align-items-center px-2 text-xs">'+created+'</div><div class="d-flex flex-fill justify-content-end"><div class="item d-flex align-items-center"><i class="iconfont iconthunderbolt"></i><span class="ml-1">'+floor+'</span></div></div></div></div></div></div>';
}
resultAll = result
linksDom.insertAdjacentHTML('beforeend', resultAll);
}
其中result 内的HTML结构请根据主题自行修改。
搞定收工～
]]>