前言

曾经我常常感觉到，每一个独立的博客都像是一座彼此独立的孤岛。所以现在，有了越来越多的工具，把大家连接起来，像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 文件了。那么接下来，就是在前端渲染了。

直接上代码：

  • HTML
<div class="links"></div>
  • JS
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结构请根据主题自行修改。

搞定收工～