友链朋友圈4.X.X前端适配尝试【基于店长Akilar的旧版方案】

前言：

原来我是使用冰老师的前端方案，但是前天晚上我看见友链朋友圈的版本已经更新到4.0.0了，于是我进行了更新，回来发现冰老师的方案不能用了，还好店长Akilar的前端方案还留着，但是有些布局和配色，跟我的博客不太搭（另外移动端我还是希望能看到作者的信息，以免标题党）；更新时间显示的不是北京时间；另外今天下午我发现按文章生成时间排序的功能好像失效了。然后大佬好像还没出新方案，那么我干脆一不做二不休，自己动手改了🤣

有什么错误欢迎各位大佬指出😀

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

其他大佬的方案

由于我也不确定我改的会不会有什么bug

店长Akilar好像目前也还没出新方案（还是用大佬的方案更放心😂）

不过目前文档说林木木大佬的前端方案已经完成适配，看各位喜欢哪种风格了

适配

注：css部分我用的是适配 butterfly 主题样式的

本文有关代码基于店长Akilar的前端方案

店长的有关代码如下：

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/css/default.min.css

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fcircle.min.js

https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fetch.min.js

没弄过店长Akilar的前端方案的，可以按大佬的原方案走一遍再来改😆

预览

参考之前还是先看看效果有没有问题或者合不合自己胃口

可以直接去我的友链朋友圈查看效果【我的友链朋友圈】

移动端预览：

CSS

主要改动描述：

• 移动端显示作者头像、名称

• 修改了部分配色

• 增添了文章卡片:hover后的效果【借鉴自林木木大佬的方案](https://immmmm.com/hi-friends-circle/))】

代码：

 @font-face {
  font-family: 'SAOUI';
  src: url("https://cdn.jsdelivr.net/npm/akilar-candyassets/fonts/SAOUI.ttf");
  font-display: swap;
} 
#fMessageBoard {
  font-size: 20px;
  background: rgba(249,249,249,0.8);
  color: rgba(60,60,61,0.7);
  border-radius: 5px;
  font-weight: bolder;
  box-shadow: 2px 2px 10px #888;
  font-family: 'SAOUI' !important;
  width: 90%;
  max-width: 810px;
  margin: auto;
  height: 260px;
  overflow: hidden;
}
#fMessageBoard .fUpdatedTime {
  text-align: center;
  height: 40px;
}
#fMessageBoard .fMessageItem {
  background: rgba(207,207,207,0.8);
  box-shadow: 0px 0px 15px #bcbcbc inset;
}
#fMessageBoard .fMessageItem .fItem {
  height: 60px;
  background: transparent;
  display: flex;
}
#fMessageBoard .fMessageItem .fItem .fLabel {
  padding: 0 3%;
  align-self: center;
  text-align: center;
  width: 25%;
  overflow: hidden;
}
#fMessageBoard .fMessageItem .fItem .fMeasureBar {
  align-self: center;
  text-align: center;
  height: 20px;
  width: 50%;
  display: block;
  background: rgba(117,117,117,0.6);
  border-radius: 5px;
  overflow: hidden;
  display: block;
  box-shadow: 2px 2px 5px rgba(21,21,21,0.6);
}
#fMessageBoard .fMessageItem .fItem .fMeasureBar .fMeasure {
  display: block;
  height: 20px;
  text-align: center;
  font-size: 12px;
}
#fMessageBoard .fMessageItem .fItem .fMessage {
  align-self: center;
  text-align: center;
  padding: 0 3%;
  width: 25%;
}
#fMessageBoard #switchRankBtn {
  width: auto;
  max-width: 250px;
  height: 40px;
  display: flex;
  text-align: center;
  margin: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
}
#fMessageBoard #switchRankBtn #rankByCreated {
  font-size: 20px;
  height: 30px;
  width: 80px;
  display: inline-block;
  padding: 2px 5px;
}
#fMessageBoard #switchRankBtn #rankByUpdated {
  font-size: 20px;
  height: 30px;
  width: 80px;
  display: inline-block;
  padding: 2px 5px;
}
#fMessageBoard #switchRankBtn input#switchRankMode[type=checkbox] {
  display: none;
}
#fMessageBoard #switchRankBtn label#switchRank {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 20px;
  margin: 15px 0px;
  background: #f39c39;
  display: inline-block;
  border-radius: 10px;
  position: relative;
}
#fMessageBoard #switchRankBtn label#switchRank:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 8px;
  transition: 0.3s;
}
#fMessageBoard #switchRankBtn label#switchRank:active:after {
  width: 50px;
}
#fMessageBoard #switchRankBtn input#switchRankMode:checked + label {
  background: #239eeb;
}
#fMessageBoard #switchRankBtn input#switchRankMode:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}
#fcircleMoreBtn {
  width: 90%;
  max-width: 810px;
  height: 30px;
  margin: auto;
  background: rgba(249,249,249,0.8);
  color: rgba(60,60,61,0.7);
  box-shadow: 2px 2px 10px #888;
  border-radius: 5px;
  font-weight: bolder;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#fcircleContainer {
  font-family: 'SAOUI' !important;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: auto;
}
#fcircleContainer a {
  text-decoration: none;
}
#fcircleContainer a:hover {
  text-decoration: none !important;
}
#fcircleContainer .fArticleItem {
  margin: 20px 5%;
  height: 150px;
  display: flex;
  background: rgba(249,249,249,0.8);
  color: rgba(60,60,61,0.7);
  border-radius: 5px;
  font-weight: bolder;
  box-shadow: 2px 2px 10px #888;
  overflow: hidden;
}
#fcircleContainer .fArticleItem:hover {
  color: rgba(0, 0, 0, 0.7);
  transition: transform .3s;
  webkit-transform: scale(1.3);
  transform: scale(1.03)
}
#fcircleContainer .fArticleItem .fArticleAvatar {
  width: 30%;
  display: flex;
  flex-direction: column;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar {
  align-self: center;
  text-align: center;
  height: 70%;
}

#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar img {
  width: 75px;
  height: 75px;
  margin: 15px 5px !important;
  border-radius: 25px;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fAvatar .img-alt.is-center {
  display: none;
}
#fcircleContainer .fArticleItem .fArticleAvatar .fArticleAuthor {
  width: 80%;
  margin: 3px 0px;
  align-self: center;
  text-align: center;
  transform: skewX(-10deg);
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fcircleContainer .fArticleItem .fArticleMessage {
  display: flex;
  flex-direction: column;
  width: 70%;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
  align-self: center;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  max-width: 80%;
  padding: 0;
  color: rgba(60,60,61,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
  position: fixed;
  width: fit-content;
  max-width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  top: 20%;
  border-radius: 10px;
  text-align: center;
  z-index: 100;
  content: attr(data-title);
  font-size: 20px;
  color: #fff;
  padding: 10px;
  background-color: rgba(60,60,61,0.7);
  white-space: break-spaces;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime {
  width: 100%;
  height: 100px;
  text-align: center;
  display: flex;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleCreated {
  width: 40%;
  margin: 5% 0% 5% 10%;
  text-align: center;
  align-self: center;
  padding: 15px 0;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleUpdated {
  width: 40%;
  margin: 5% 10% 5% 0%;
  text-align: center;
  align-self: center;
  padding: 15px 0;
}
#fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i:before {
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  #fMessageBoard {
    font-size: 16px;
  }
}
@media screen and (max-width: 400px) {

  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i {
    display: none;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fAvatar {
    height: 70%;
  }
  #fMessageBoard {
    font-size: 12px;
  }
  #fMessageBoard #switchRankBtn #rankByCreated {
    font-size: 12px;
  }
  #fMessageBoard #switchRankBtn #rankByUpdated {
    font-size: 12px;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar {
    /* display: none; */
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fArticleAuthor {
    width: 100%;
  }
  #fcircleContainer .fArticleItem .fArticleMessage {
    width: 70%;
  }
  #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
    font-size: 16px;
  }


  #fcircleContainer .fArticleItem {
    height: 125px;
  }
  #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
    line-height: 5;
    width: 100%;
    height: 80%;
  }
  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime {
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
  }


  

}
@media screen and (max-width: 300px) {
  #fMessageBoard .fUpdatedTime span.fLabel {
    display: none;
  }
  #fMessageBoard .fMessageItem .fItem .fLabel {
    width: 50%;
  }
  #fMessageBoard .fMessageItem .fItem meter.fMeasureBar {
    display: none;
  }
  #fMessageBoard .fMessageItem .fItem .fMessage {
    width: 50%;
  }
  #fMessageBoard span#rankByCreated {
    display: none !important;
  }
  #fMessageBoard span#rankByUpdated {
    display: none !important;
  }



  #fcircleContainer .fArticleItem .fArticleAvatar {
    display: none;
  }


  #fcircleContainer .fArticleItem .fArticleMessage {
    width: 100%;
  }
}
[data-theme="dark"] #fMessageBoard {
  background: rgba(21,21,21,0.7);
  color: rgba(249,249,249,0.8);
  box-shadow: 0px 0px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fMessageBoard .fMessageItem {
  background: rgba(21,21,21,0.7);
  box-shadow: 0px 0px 5px rgba(222,221,174,0.5) inset;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn input#switchRankMode[type=checkbox] {
  display: none;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn label#switchRank {
  background: #f39c39;
}
[data-theme="dark"] #fMessageBoard #switchRankBtn label#switchRank:after {
  background: rgba(21,21,21,0.7);
}
[data-theme="dark"] #fMessageBoard #switchRankBtn input#switchRankMode:checked + label {
  background: #239eeb;
}
[data-theme="dark"] #fcircleMoreBtn {
  background: rgba(21,21,21,0.7);
  color: rgba(249,249,249,0.8);
  box-shadow: 2px 2px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleMoreBtn:hover {
  box-shadow: 0px 0px 2px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem {
  background: rgba(21,21,21,0.7);
  color: rgba(249,249,249,0.8);
  box-shadow: 2px 2px 5px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem:hover {
  box-shadow: 0px 0px 2px rgba(102,218,215,0.5);
}
[data-theme="dark"] #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
  color: rgba(249,249,249,0.8);
}
[data-theme="dark"] #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
  color: rgba(60,60,61,0.7);
  background-color: rgba(249,249,249,0.8);
}




.img-alt.is-center::before {content: "" !important;}
#article-container ul > li:not(.tab)::before {
  top: unset !important;
  width: unset !important;
  height: unset !important;
  border: unset !important;
  border-radius: unset !important;
  background: unset !important;
  content: unset !important;
  line-height: unset !important;
}
.social-share {
  font-size: 0.85em !important;
}
.reward-item {
  padding: 1rem .5rem 0 .5rem !important;
}
.post-reward .reward-main .reward-all {
  display: inline-block;
  margin: 0;
  padding: 0 .5rem 1rem .5rem !important;
}
.post-reward .post-qr-code-desc {
  margin-bottom: 0 !important;
}
.post-qr-code-img.entered.loaded {
  display: unset !important;
  margin: unset !important;
}
.wechat-qrcode .help p {
  margin: unset !important;
}

JS

这里需要对fcircle.js和fetch.js两个文件进行修改

fcircle.js

主要改动描述：

• 最近更新时间的提示时间改为北京时间【借鉴至冰老师的方案】

• 增添更新描述（可去掉）比如我的<span class="fLabel">【预计每半小时更新一次】</span>

代码：

// ======================================================

// 打印友链基本信息
function loadStatistical(sdata) {
  // 友链页面的挂载容器
  var container = document.getElementById('fcircleContainer');
  // 最近更新时间
  var Last_updated_time = formatDate(sdata.last_updated_time);
  // 基本信息的html结构
  var messageBoard = `
  <div id="fMessageBoard">
    <div class="fUpdatedTime">
      <span class="fLabel">最近更新时间：</span><span class="fMessage" style="color: #1E90FF">${Last_updated_time}</span><span class="fLabel">【预计每半小时更新一次】</span>
    </div>
    <div class="fMessageItem">
      <div class="fActiveFriend fItem">
        <span class="fLabel">活跃友链数</span>
        <span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.active_num/sdata.friends_num * 100).toFixed(2)}%; background: rgba(0,191,255,0.8);">${(sdata.active_num/sdata.friends_num * 100).toFixed(2)}%</span></span>
        <span class="fMessage">${sdata.active_num}/${sdata.friends_num}</span>
      </div>
      <div class="fErrorSite fItem">
        <span class="fLabel">失联友链数</span>
        <span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.error_num/sdata.friends_num * 100).toFixed(2)}%; background: rgba(193,205,205, 0.8);">${(sdata.error_num/sdata.friends_num * 100).toFixed(2)}%</span></span>
        <span class="fMessage">${sdata.error_num}/${sdata.friends_num}</span>
      </div>
      <div class="fArticleNum fItem">
        <span class="fLabel">当前库存</span>
        <span class="fMeasureBar"><span class="fMeasure" style="width:${(sdata.article_num/Math.ceil(sdata.article_num / 100)).toFixed(2)}%; background: rgba(255,165,0, 0.8);">${(sdata.article_num/Math.ceil(sdata.article_num / 100)).toFixed(2)}%</span></span>
        <span class="fMessage">${sdata.article_num}/${Math.ceil(Number( sdata.article_num) / 100) * 100}</span>
      </div>
    </div>
    <div id="switchRankBtn">
      <span id="rankByCreated">created</span>
      <span>
      <input type="checkbox" id="switchRankMode" checked="true" onchange="checkRankMode()"/><label for="switchRankMode" id="switchRank">Toggle</label>
      </span>
      <span id="rankByUpdated">updated</span>
    </div>
  </div>
  `;
  // 加载更多按钮
  var loadMoreBtn = `
  <div id="fcircleMoreBtn" onclick="loadMoreArticle()">
    <i class="fas fa-angle-double-down"></i>
  </div>
  `

  var hexobutterfly=`<div class="post-reward">
  <div class="reward-button button--animated">
    <i class="fas fa-qrcode"></i>打赏</div>
  <div class="reward-main">
    <ul class="reward-all">
      <li class="reward-item">
          <img class="post-qr-code-img entered loaded" src="/medias/reward/wechat.png" ></a>
        <div class="post-qr-code-desc">微信</div></li>
      <li class="reward-item">
          <img class="post-qr-code-img entered loaded" src="/medias/reward/alipay.jpg" ></a>
        <div class="post-qr-code-desc">支付宝</div></li>
    </ul>
  </div>
  </div>
  </div>`
    loadMoreBtn+= hexobutterfly

  // 原则上信息面板应该在最前面，所以用beforebegin表示从开始符前面插入
  if (container) {
    container.insertAdjacentHTML('beforebegin', messageBoard);
    // 为了不影响文章加载，选择afterend表示从结束符后面插入
    container.insertAdjacentHTML('afterend', loadMoreBtn);
  }
}

// ======================================================
// 打印友链内容
function loadArticleItem(datalist, start, end) {
  var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
  // 声明友链页面的挂载容器
  var container = document.getElementById('fcircleContainer');
  // 循环读取输出友链信息
  for (var i = start; i < end; i++) {
    var item = datalist[i];
    var articleItem = `
    <div class="fArticleItem">
      <div class="fArticleAvatar">
        <a class="fArticlelink fAvatar" target="_blank" rel="noopener nofollow" href="${item.link}">
          <img src="${item.avatar}" alt="avatar"  onerror="this.src='${fdatalist.error_img}'; this.onerror = null;">
        </a>
        <div class="fArticleAuthor">
          ${item.author}
        </div>
      </div>
      <div class="fArticleMessage">
        <a class="fArticleTitle"  href="${item.link}" target="_blank" rel="noopener nofollow" data-title="${item.title}">
          ${item.title}
        </a>
        <div class="fArticleTime">
          <span class="fArticleCreated"><i class="far fa-calendar-alt">发表于</i>${item.created}</span>
          <span class="fArticleUpdated"><i class="fas fa-history">更新于</i>${item.updated}</span>
        </div>
      </div>
    </div>
  `;

    if (container) {
      // 为了便于和后续拼接，选择从容器尾部插入
      container.insertAdjacentHTML('beforeend', articleItem);
    }
  }

}


// 初始化方法
function initFriendCircle() {
  // 获取友链挂载容器
  var fcircleContainer = document.getElementById('fcircleContainer')
  // 获取本地存储的友链基本信息
  var statistical_data = JSON.parse(localStorage.getItem("statisticalList"));
  // 从本地内存读取配置信息
  var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
  // 只有当容器、基本信息均存在时才执行初始化
  if (fcircleContainer && statistical_data && fdatalist) {
    // 加载基本信息面板
    loadStatistical(statistical_data);
    // 获取切换排序按钮
    var switchRankMode = document.getElementById("switchRankMode");
    //根据当前选择的排序方案加载对应的排序内容
    if (switchRankMode.checked) {
      // console.log("按更新时间排序");
      var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
      loadArticleItem(article_sortupdated, 0, fdatalist.initnumber)
    } else {
      // console.log("按创建时间排序");
      var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
      loadArticleItem(article_sortcreated, 0, fdatalist.initnumber)
    }
  }
}

// 加载更多文章
function loadMoreArticle() {
  // 获取当前已加载的文章数
  var currentArticle = document.getElementsByClassName('fArticleItem').length;
  // 获取当前选择的排序方式
  var switchRankMode = document.getElementById("switchRankMode");
  // 从本地内存读取配置信息
  var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
  // 只有当两者均存在时才继续执行
  if (switchRankMode && fdatalist) {
    if (switchRankMode.checked) {
      // console.log("按更新时间排序");
      var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
      // 从当前文章的下一篇开始，加载下一阶程篇数
      loadArticleItem(article_sortupdated, currentArticle, currentArticle + fdatalist.stepnumber)
    } else {
      // console.log("按创建时间排序");
      var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
      // 从当前文章的下一篇开始，加载下一阶程篇数
      loadArticleItem(article_sortcreated, currentArticle, currentArticle + fdatalist.stepnumber)
    }
  }
  // 向上滚动一篇文章的距离
  window.scrollBy(0, 180)
}

//切换按钮
function checkRankMode() {
  // 首先清空现有的文章内容
  document.getElementById('fcircleContainer').innerHTML = ''
  // 获取当前选择的排序方式
  var switchRankMode = document.getElementById("switchRankMode");
  // 从本地内存读取配置信息
  var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
  // 只有当两者均存在时才继续执行
  if (switchRankMode && fdatalist) {
    //按更新时间排序
    if (switchRankMode.checked) {
      // console.log("按更新时间排序");
      var article_sortupdated = JSON.parse(localStorage.getItem("updatedList"));
      //加载配置项中指定的初始化篇数
      loadArticleItem(article_sortupdated, 0, fdatalist.initnumber)
    } else {
      // console.log("按创建时间排序");
      var article_sortcreated = JSON.parse(localStorage.getItem("createdList"));
      //加载配置项中指定的初始化篇数
      loadArticleItem(article_sortcreated, 0, fdatalist.initnumber)
    }
  }
}


//时区优化
var formatDate = (strDate) => {
  try {
    var date = new Date(Date.parse(strDate.replace(/-/g, "/")));
    var gettimeoffset;
    if (new Date().getTimezoneOffset()) {
      gettimeoffset = new Date().getTimezoneOffset();
    } else {
      gettimeoffset = 8;
    }
    var timeoffset = gettimeoffset * 60 * 1000;
    var len = date.getTime();
    var date2 = new Date(len - timeoffset);
    var sec = date2.getSeconds().toString();
    var min = date2.getMinutes().toString();
    if (sec.length === 1) {
      sec = "0" + sec;
    }
    if (min.length === 1) {
      min = "0" + min;
    }
    return date2.getFullYear().toString() + "-" + (date2.getMonth() + 1).toString() + "-" + date2.getDate().toString() + " " + date2.getHours().toString() + ":" + min + ":" + sec
  } catch (e) {
    return ""
  }
};

//执行初始化方法
initFriendCircle()

fetch.js

主要改动描述：

适配最新版本，按文章创建时间排序

这里其实不需要改多少，也就是// 按创建时间排序那一部分的代码中time改成created即可

代码：

//===========================================================
// 排序算法
function quickSort(arr, keyword){
  // keyword传入值'time'（按发布时间排序）或'updated'（按更新时间排序）
  if(arr.length == 0){return [];}
  var left = [];
  var right = [];
  var selectItem = arr[0];
  for(var i = 1; i < arr.length; i++){
    if(arr[i][keyword] > selectItem[keyword]){
      left.push(arr[i]);
    }
    else{
      right.push(arr[i]);
    }
  }
  return quickSort(left, keyword).concat(selectItem, quickSort(right, keyword));
}
// ======================================================
// 从本地内存读取配置信息
var fdatalist = JSON.parse(localStorage.getItem("fdatalist"));
// 抓取友链api信息并进行分割处理。存入本地存储
if (fdatalist){
  fetch(fdatalist.apiurl)
    .then(res => res.json())
    .then(json =>{
      // 获取友链朋友圈基本信息
      var statistical_data = json.statistical_data;
      //存入本地存储
      localStorage.setItem("statisticalList",JSON.stringify(statistical_data))
      // console.log(statistical_data);
      // 获取友链朋友圈文章列表
      var article_data = eval(json.article_data);
      // console.log(article_data);
      // 按创建时间排序
      var article_sortcreated = quickSort(article_data,'created');
      //存入本地存储
      localStorage.setItem("createdList",JSON.stringify(article_sortcreated))
      // 按更新时间排序
      var article_sortupdated = quickSort(article_data,'updated');
      //存入本地存储
      localStorage.setItem("updatedList",JSON.stringify(article_sortupdated))
      // console.log(article_sortcreated);
      // console.log(article_sortupdated);
    }
  )
}

配置:

然后就是把上面的文件在配置中引入

我的参考如下：

# fcircle
# see https://zfe.space/friendcircle/
# see https://akilar.top/posts/8480b91c/
fcircle:
  enable: true #控制开关
  apiurl: https://blog-friends-xi.vercel.app/all #api地址
  initnumber: 20 #【可选】页面初始化展示文章数量
  stepnumber: 10 #【可选】每次加载增加的篇数
  error_img: /img/404.jpg #【可选】头像图片加载失败时的默认头像
  opentype: '_blank' #【可选】'_blank'打开新标签,'_self'本窗口打开,默认为'_blank'
  nofollow: false #【可选】开启禁止搜索引擎抓取,默认开启
  preload: #【可选】加载动画图片链接
  css: /css/butterfly.css  #https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/css/butterfly.min.css # 【可选】开发者接口，自定义css链接
  js: /js/fcircle.js  #https://cdn.jsdelivr.net/npm/hexo-filter-fcircle/assets/js/fcircle.min.js #/js/fcircle.js  #【可选】开发者接口，自定义js链接
  fetchJs: /js/fetch.js
  path: #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 友链朋友圈
    comments: true

最后

暂时就写到这了，有什么错误欢迎各位大佬指出😀

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github：226YZY (星空下的YZY) (github.com)

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。