曾经我常常感觉到，每一个独立的博客都像是一座彼此独立的孤岛。所以现在，有了越来越多的工具，把大家连接起来，像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结构请根据主题自行修改。
搞定收工～
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。