给友链朋友圈加上收藏栏

最近逛友链博客，发现 Leonus 大佬又搞了不少新活，像“博主收藏”、“友链查询”等等，还有各种外链卡片，都是很实用的功能，非常奈斯啊。今天我也来整一个类似的文章收藏功能。

概述

首先要在原本的朋友圈文章卡片上新增一个收藏按钮，点击目标文章卡片上的按钮即可收藏该文章，然后在朋友圈文章列表的上方增加一条收藏栏，在收藏栏中显示所有的收藏文章列表。其次，一般只有博主本人才有权限增删收藏栏的文章，所以还要添加一个密码验证功能。

详细效果请前往 订阅 页面查看。

关于收藏栏的后端部分，这里采用的是Github+Supabase+Vercel的方案，另外配有缓存机制，首次进入页面调用云端数据库的数据，重新进入页面则调用本地缓存，缓存设有 1 天的有效期，过期后会自动拉取云端数据库以更新本地缓存。另外为实现多端同步，在收藏栏右上角设有刷新按钮，可以实现一键同步。收藏栏默认显示两行，多余部分折叠隐藏，可点击右上角按钮展开全部内容。

朋友圈配置

这个文章收藏是在友链朋友圈的基础上延伸出来的一个附加功能，所以基础是要先配置好友链朋友圈功能。朋友圈我是按照 官方文档 配置的，其中后端部分采用的是Github+Sqlite+Vercel的 无服务器部署 方式，前端部分采用的是 林木木 的方案。林木木的方案不带管理面板，如果需要更改设置的话，会比较麻烦，但优点是代码量少，简短易读，方便我二次修改。

林木木的朋友圈方案配有一个顶栏，可以显示“订阅”、“活跃”、“日志”等消息，点击“订阅”可以查看随机一个友链的文章列表，点击“活跃”可以切换私有友链库和公共库两种数据源，点击“日志”可以手动清空本地缓存，重新拉取云端数据库。另外支持“创建日期”和“更新日期”两种排列方式，可以自由手动切换。

数据库配置

Vercel 的 Integrations Marketplace 上提供有很多种数据库，其中 MongoDB Atlas 之前在部署 twikoo 评论的时候用过，Upstash 在配置个人网盘的时候用过，听群友推荐说 PlanetScale 和 Supabase 也不错。这里采用 Supabase 作为项目云端数据存储。

注册 Supabase 后进入 Dashboard，首先点击 New project 创建一个新的项目，设置项目名称和数据库密码，选择合适的地区，然后确认创建。整个创建过程有点长，需要耐心等待几十秒的时间。

创建完成会自动进入项目，页面左侧有一条纵向菜单栏，点击 Table Editor 可以对数据库进行可视化操作，点击 SQL Editor 可以进行命令行操作，这对于小白来说还是非常方便的。我们进入 Table Editor 点击 New table 创建一个新数据表，设置好表名、描述，最重要的是各列的参数配置，默认的 Column 有 id 和 created_at 两列，点击 Add column 新增几条参数，分别是 index、title、link、author、avatar、time 六个参数，参数类型均设置为 text，点击 save 保存。

进入数据表，点击 Insert 可以手动插入数据，因为是可视化界面，增删改查都十分直观。当然我们不需要在这里插入数据，而是要能够在外部调用它的增删改查能力。在左侧菜单栏中点击 API Docs 可以查看详细的使用方法，其中，Introduction 栏提供了初始化代码。

import { createClient } from "@supabase/supabase-js";
const supabaseUrl = "https://xxxxxxxxxxxxx.supabase.co";
const supabaseKey = process.env.SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

这里有两个重要参数supabaseUrl和supabaseKey，需要在设置里面查找。点击左侧菜单栏中的 Project Settings，点击 API 栏，其中 Project URL 即为 supabaseUrl，Project API keys 即为 supabaseKey。

回到 API Docs，在 Tables and Views 栏找到刚刚新建的表名，进入文档后可以看到详细的增删改查示例代码。

后端代码

Github 新建一个私有仓库，仓库内主要包含 3 个文件，内容如下。

index.js

注意这里 supabaseUrl 做了脱敏处理，要替换成自己的。

// 导入所需包和模块
const express = require("express");
require("dotenv").config(); // 导入 dotenv 并加载 .env 文件
const app = express();
app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});
// 创建 Express 应用程序
app.use(express.json());
const savedKey = process.env.KEY;
// 连接数据库
const { createClient } = require("@supabase/supabase-js");
const supabaseUrl = "https://xxxxxxxxxxxxxxxxx.supabase.co";
const supabaseKey = process.env.SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

// 新增收藏
app.get("/subscribe", async (req, res) => {
  try {
    const key = req.query.key.toString();
    const index = req.query.index.toString();
    const title = req.query.title.toString();
    const link = req.query.link.toString();
    const author = req.query.author.toString();
    const avatar = req.query.avatar.toString();
    const time = req.query.time.toString();
    if (key == savedKey) {
      // 存入数据库
      const { data: filterData, error: error1 } = await supabase
        .from("Subscribe")
        .select()
        .eq("index", index);
      if (error1) {
        console.error("Error:", error1);
        res.status(500).json({ code: "500", message: "查询失败", content: "" });
      } else {
        if (!filterData.length) {
          const { data: createdData, error: error2 } = await supabase
            .from("Subscribe")
            .insert([
              {
                index: index,
                title: title,
                link: link,
                author: author,
                avatar: avatar,
                time: time,
              },
            ])
            .select();
          if (error2) {
            console.error("Error:", error2);
            res
              .status(500)
              .json({ code: "500", message: "存储失败", content: "" });
          } else {
            console.log("Data stored successfully:", createdData[0]);
            res.status(200).json({
              code: "200",
              message: "存储成功",
              content: createdData[0],
            });
          }
        } else {
          res
            .status(402)
            .json({ code: "402", message: "文章已存在", content: "" });
        }
      }
    } else {
      res.status(401).json({ code: "401", message: "密码错误", content: "" });
    }
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

// 文章删除
app.get("/delsavedtitles", async (req, res) => {
  try {
    const key = req.query.key.toString();
    const index = req.query.index.toString();
    if (key == savedKey) {
      const { data, error } = await supabase
        .from("Subscribe")
        .delete()
        .eq("index", index);
      if (error) {
        console.error("Error:", error);
        res.status(500).json({ code: "500", message: "删除失败", content: "" });
      } else {
        if (!data.length) {
          res
            .status(404)
            .json({ code: "404", message: "未找到文章", content: data });
        } else {
          console.log("Data delete completely");
          res
            .status(200)
            .json({ code: "200", message: "删除成功", content: data });
        }
      }
    } else {
      res.status(401).json({ code: "401", message: "密码错误", content: "" });
    }
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

// 收藏文章查询
app.get("/getsavedtitles", async (req, res) => {
  try {
    const mode = req.query.mode.toString();
    const column = req.query.column.toString();
    const value = req.query.value.toString();
    if (mode == "search") {
      const { data: filterData, error } = await supabase
        .from("Subscribe")
        .select()
        .eq(column, value);
      if (error) {
        console.error("Error:", error);
        res.status(404).json({ code: "404", message: "查询失败", content: "" });
      } else {
        console.log("Data serach completely:", filterData);
        res
          .status(200)
          .json({ code: "200", message: "查询成功", content: filterData });
      }
    } else if (mode == "all") {
      const { data: filterData, error } = await supabase
        .from("Subscribe")
        .select();
      if (error) {
        console.error("Error:", error);
        res.status(404).json({ code: "404", message: "查询失败", content: "" });
      } else if (mode == "all") {
        console.log("Data serach completely:", filterData);
        res
          .status(200)
          .json({ code: "200", message: "查询成功", content: filterData });
      }
    } else {
      res.status(401).json({ code: "401", message: "参数错误", content: "" });
    }
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

// 启动服务器
const server = app.listen(process.env.PORT || 3000, () => {
  const port = server.address().port;
  console.log(`Server is running on port ${port}`);
});

package.json

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "Echo \"error: error\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.27.2",
    "express": "^4.18.1",
    "dotenv": "^8.2.0",
    "@supabase/supabase-js": "^1.0.0"
  }
}

vercel.json

注意 KEY 和 SUPABASE_KEY 要换成自己的，其中KEY为 SHA256 加密后的前端身份验证密码，SUPABASE_KEY为 Supabase 密钥。

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ],
  "env": {
    "KEY": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "SUPABASE_KEY": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
}

仓库建好后，部署到 Vercel 上，在 Storage 栏进入 Integrations Marketplace 找到 Supabase，点击 Add Integration 将其添加进项目。然后就是配置自定义域名，自此后端配置完成。

前端代码

index.md

打开先前在配置友链朋友圈的时候创建的 /fcircle/index.md，配置如下：

---
title: 订阅
descr: 使用 友链朋友圈 订阅友链最新文章
cover: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
date: xxxxxxxxxxxxxxxxxxxxxxx
---

<h2 id="我的收藏">
    我的收藏
    <a class="refresh" onclick="localStorage.removeItem('savedArticles');location.reload();">
        <i class="blogfont icon-refresh"></i>
    </a>
    <a class="fold" onclick="foldSavedArticles(event)">
        <i class="blogfont icon-arrow-down"></i>
    </a>
</h2>

<div id="cf-saved-post">
</div>

<h2 id="最新文章">
    最新文章
</h2>

<div class="post-content">
    <div id="cf-container">
        与主机通讯中……
    </div>
</div>

<div class="inputBoxMain" id="fcircleInputBox">
  <div class="inputBox">
    <div class="content-body">
      <span class="title"></span>
      <span class="tips">请输入密码以验证您的身份</span>
      <input class="input-password" type="password" placeholder="密码">
    </div>
    <div class="content-bottom">
      <span class="btn close" onclick="switchSecretInput()">取消</span>
      <span class="btn" onclick="sendSubscribeInfo()">确认</span>
    </div>
  </div>
  <div class="noteBox hide">
    <a class="icon">
      <i class="fas fa-spinner fa-spin"></i>
    </a>
    <span class="tips">请稍候 ...</span>
  </div>
  <div class="inputBoxMask">
  </div>
</div>

<script type="text/javascript">
    var fdataUser = {
      apiurl: 'https://xxx.xxx.top/'
    };
    var article_index = '',
        article_title = '',
        article_link = '',
        article_author = '',
        article_avatar = '',
        article_time = '',
        article_pwd = '';
    var savedArticlesIndex = '';
    var catchNowTime = Date.now();
    var updateTime = localStorage.getItem("updateTime");
    updateTime == null || catchNowTime - updateTime < 86400000 ? null : localStorage.removeItem("savedArticles");//每隔1天刷新一次
    var savedArticles = localStorage.getItem("savedArticles");
    if (savedArticles != null) {
        console.log("内存读取成功");
        var savedArticlesJson = JSON.parse(savedArticles)
        addArticleCard(savedArticlesJson);
        savedArticlesIndex = savedArticlesJson.map(item => item.index);
    } else {
        fetch("https://xxx.xxx.top/getsavedtitles?mode=all&column=&value=&output=jsonp")
            .then(response => response.json())
            .then(data => {
                if (data.code == 200) {
                    console.log('获取收藏夹成功');
                    savedArticles = data.content;
                    localStorage.setItem("updateTime", catchNowTime);
                    localStorage.setItem("savedArticles", JSON.stringify(savedArticles));
                    console.log(savedArticles);
                    addArticleCard(savedArticles);
                    savedArticlesIndex = savedArticles.map(item => item.index);
                    console.log(savedArticlesIndex);
                    checkStared(savedArticlesIndex);
                } else {
                    console.log('获取收藏夹失败')
                }
            })
            .catch(error => {
                console.error('获取收藏夹失败', error);
            })
    }
    function checkStared(s) {
        for (let i = 0; i < s.length; i++) {
            var j = document.querySelector("#cf-container ." + s[i] + " .cf-star");
            if (j) {
                j.classList.contains("saved") ? null : j.classList.add("saved");
            }
        }
    }
    function addArticleCard(a) {
        var container = '';
        for (let i=0; i<a.length; i++) {
            var item = a[i];
            container += `
            <div class="cf-article ${item.index}">
                <a class="cf-article-title" href="${item.link}" target="_blank" rel="noopener nofollow" data-title="${item.title}">${item.title}</a>
                <a class="cf-star saved" onclick="switchSecretInput(event)"><i class="fa-regular fa-star"></i></a>
                <div class="cf-article-avatar no-lightbox flink-item-icon">
                    <img class="cf-img-avatar avatar" src="${item.avatar}" alt="avatar" onerror="this.src=''; this.onerror = null;">
                    <a class="" target="_blank" rel="noopener nofollow"><span class="cf-article-author">${item.author}</span></a>
                </div>
                <span class="cf-article-time">
                    <span class="cf-time-created">${item.time}</span>
                </span>
            </div>
            `;
        }
        document.getElementById("cf-saved-post").insertAdjacentHTML('beforeend', container);
    }
    function switchSecretInput(event) {
        const a = document.getElementById("fcircleInputBox");
        const b = a.querySelector(".input-password");
        const f = a.querySelector(".content-body .title");
        function c(e) { article_pwd = e.target.value; }
        if (a.classList.contains("open")) {
            a.classList.remove("open");
            b.removeEventListener('input', c);
            article_index = '';
            article_title = '';
            article_link = '';
            article_author = '';
            article_avatar = '';
            article_time = '';
        } else {
            a.classList.add("open");
            b.addEventListener('input', c);
            var d = '';
            if (event.target.nodeName.toUpperCase() == "A") {
                if (event.target.classList.contains("saved")) {
                    sendMode = 1;
                    f.innerHTML = "移出收藏";
                } else {
                    sendMode = 0;
                    f.innerHTML = "添加收藏";
                }
                d = event.target.parentElement.querySelector(".cf-article-title");
                article_author = event.target.parentElement.querySelector(".cf-article-avatar .cf-article-author").innerText;
                article_avatar = event.target.parentElement.querySelector(".cf-article-avatar .cf-img-avatar").src;
                article_time = event.target.parentElement.querySelector(".cf-article-time .cf-time-created").innerText;
            } else if (event.target.nodeName.toUpperCase() == "I") {
                if (event.target.parentElement.classList.contains("saved")) {
                    sendMode = 1;
                    f.innerHTML = "移出收藏";
                } else {
                    sendMode = 0;
                    f.innerHTML = "添加收藏";
                }
                d = event.target.parentElement.parentElement.querySelector(".cf-article-title");
                article_author = event.target.parentElement.parentElement.querySelector(".cf-article-avatar .cf-article-author").innerText;
                article_avatar = event.target.parentElement.parentElement.querySelector(".cf-article-avatar .cf-img-avatar").src;
                article_time = event.target.parentElement.parentElement.querySelector(".cf-article-time .cf-time-created").innerText;
            }
            article_title = d.innerText;
            article_link = d.getAttribute("href");
            article_index = "cf-" + CryptoJS.MD5(article_link).toString();
        }
    },
    function sendSubscribeInfo() {
        var key = CryptoJS.SHA256(article_pwd);
        var url = sendMode == 1
            ? "https://xxx.xxx.top/delsavedtitles?key=" + key + "&index=" + article_index
            : "https://xxx.xxx.top/subscribe?key=" + key + "&index=" + article_index + "&title=" + article_title + "&link=" + article_link + "&author=" + article_author + "&avatar=" + article_avatar + "&time=" + article_time;
        var inputBox = document.querySelector("#fcircleInputBox .inputBox");
        var noteBox = document.querySelector("#fcircleInputBox .noteBox");
        inputBox.classList.add("hide");
        noteBox.classList.remove("hide");
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.code == 200) {
                    var a = document.querySelector("#cf-saved-post ." + article_index);
                    if (a) { a.outerHTML = ""; }
                    var b = document.querySelector("." + article_index + " .cf-star");
                    if (typeof savedArticlesIndex != 'undefined') savedArticlesIndex = savedArticlesIndex.filter(element => element !== article_index);
                    if (b) {b.classList.contains("saved") ? b.classList.remove("saved") : b.classList.add("saved");}
                    if (sendMode == 0) {
                        var container = `
                            <div class="cf-article ${article_index}">
                                <a class="cf-article-title" href="${article_link}" target="_blank" rel="noopener nofollow" data-title="${article_title}">${article_title}</a>
                                <a class="cf-star saved" onclick="switchSecretInput(event)"><i class="fa-regular fa-star"></i></a>
                                <div class="cf-article-avatar no-lightbox flink-item-icon">
                                    <img class="cf-img-avatar avatar" src="${article_avatar}" alt="avatar" onerror="this.src=''; this.onerror = null;">
                                    <a class="" target="_blank" rel="noopener nofollow"><span class="cf-article-author">${article_author}</span></a>
                                </div>
                                <span class="cf-article-time">
                                    <span class="cf-time-created">${article_time}</span>
                                </span>
                            </div>
                            `;
                        document.getElementById("cf-saved-post").insertAdjacentHTML('beforeend', container);
                    }
                    tools.showMessage(data.message, "success", 2);
                    localStorage.removeItem("savedArticles");
                    inputBox.classList.remove("hide");
                    noteBox.classList.add("hide");
                    document.querySelector("#fcircleInputBox .btn.close").click();
                } else {
                    tools.showMessage(data.message, "error", 2);
                    inputBox.classList.remove("hide");
                    noteBox.classList.add("hide");
                    document.querySelector("#fcircleInputBox .btn.close").click();
                }
            })
            .catch(error => {
                console.error('收藏失败:', error);
            })
    }
    function foldSavedArticles(event) {
        var a = document.getElementById("cf-saved-post")
        var b = event.target.parentElement.querySelector("i")
        if (b.style.transform == "rotate(180deg)") {
            a.style.maxHeight = "240px"
            b.style.transform = ""
        } else {
            a.style.maxHeight = typeof savedArticlesIndex != 'undefined' ? (savedArticlesIndex.length * 130 - 20) + "px" : "fit-content"
            b.style.transform = "rotate(180deg)"
        }
    }
</script>

<link rel="stylesheet" href="/css/fcircle.css">
<script type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/crypto-js/4.1.1/crypto-js.min.js"></script>
<script type="text/javascript" src="/js/fcircle.js"></script>

注意，友链头像的链接含有 & 字符会产生干扰，建议采用图床存储头像图片，或者在上面代码中对 article_avatar 参数做 encodeURIComponent 和 decodeURIComponent 编解码处理。

另外，上面用到的 tools.showMessage 方法依赖于 ElementUI 库，如果你有自己的弹窗通知系统，可以将它替换掉，比如主题自带的 btf.snackbarShow。
如果你也要用 ElementUI 的弹窗，可以参照下面方法，更多用法参考文档：ElementUI文档 - Message

inject:
  head:
+    - <link rel="stylesheet" href="https://npm.elemecdn.com/element-ui@2.15.6/lib/theme-chalk/index.css"  media="defer" onload="this.media='all'">
  bottom:
+    - <script async src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> # 引入VUE
+    - <script async src="https://npm.elemecdn.com/element-ui@2.15.6/lib/index.js"></script> # 引入ElementUI

var tools = {
    showMessage(text, style, delay) {
        new Vue({
            data: function () {
                this.$message({
                    message: text,
                    showClose: true,
                    type: style,
                    duration: delay * 1000
                });
            }
        })
    }
}

fcircle.js

fcircle.js 的改动不多，主要是卡片 HTML 结构修改。

/*
Last Modified time : 20220326 15:38 by https://immmmm.com
已适配 FriendCircle 公共库和主库
*/

//默认数据
var fdata = {
  jsonurl: "",
  apiurl: "",
  apipublieurl: "https://fcircle-pub.rct.cool/", //默认公共库
  initnumber: 24, //首次加载文章数
  stepnumber: 12, //更多加载文章数
  article_sort: "created", //文章排序 updated or created
  error_img: "https://xxxxxxxxxxxxxx.webp",
};
//可通过 var fdataUser 替换默认值
if (typeof fdataUser !== "undefined") {
  for (var key in fdataUser) {
    if (fdataUser[key]) {
      fdata[key] = fdataUser[key];
    }
  }
}
var article_num = "",
  sortNow = "",
  UrlNow = "",
  friends_num = "";
var container =
  document.getElementById("cf-container") ||
  document.getElementById("fcircleContainer");
// 获取本地 排序值、加载apiUrl，实现记忆效果
var localSortNow = localStorage.getItem("sortNow");
var localUrlNow = localStorage.getItem("urlNow");
if (localSortNow && localUrlNow) {
  sortNow = localSortNow;
  UrlNow = localUrlNow;
} else {
  sortNow = fdata.article_sort;
  if (fdata.jsonurl) {
    UrlNow = fdata.apipublieurl + "postjson?jsonlink=" + fdata.jsonurl + "&";
  } else if (fdata.apiurl) {
    UrlNow = fdata.apiurl + "all?";
  } else {
    UrlNow = fdata.apipublieurl + "all?";
  }
  console.log("当前模式：" + UrlNow);
  localStorage.setItem("urlNow", UrlNow);
  localStorage.setItem("sortNow", sortNow);
}
// 打印基本信息
function loadStatistical(sdata) {
  article_num = sdata.article_num;
  friends_num = sdata.friends_num;
  var messageBoard = `
    <div id="cf-state" class="cf-new-add">
      <div class="cf-state-data">
        <div class="cf-data-friends" onclick="openToShow()">
          <span class="cf-label">订阅</span>
          <span class="cf-message">${sdata.friends_num}</span>
        </div>
        <div class="cf-data-active" onclick="changeEgg()">
          <span class="cf-label">活跃</span>
          <span class="cf-message">${sdata.active_num}</span>
        </div>
        <div class="cf-data-article" onclick="clearLocal()">
          <span class="cf-label">日志</span>
          <span class="cf-message">${sdata.article_num}</span>
        </div>
      </div>
      <div id="cf-change">
          <span id="cf-change-created" data-sort="created" onclick="changeSort(event)" class="${
            sortNow == "created" ? "cf-change-now" : ""
          }">Created</span> | <span id="cf-change-updated" data-sort="updated" onclick="changeSort(event)" class="${
    sortNow == "updated" ? "cf-change-now" : ""
  }" >Updated</span>
      </div>
    </div>
    `;
  var loadMoreBtn = `
      <div id="cf-more" class="cf-new-add" onclick="loadNextArticle()"><i class="fas fa-angle-double-down"></i></div>
      <div id="cf-footer" class="cf-new-add">
       <span id="cf-version-up" onclick="checkVersion()"></span>
       <span class="cf-data-lastupdated">更新于：${sdata.last_updated_time}</span>
        Powered by <a target="_blank" href="https://github.com/Rock-Candy-Tea/hexo-circle-of-friends" target="_blank">FriendCircle</a>
        <br>
        Designed by <a target="_blank" href="https://immmmm.com" target="_blank">林木木</a>
        <br>
        Adapted by <a target="_blank" href="https://gavin-chen.top" target="_blank">南方嘉木</a>
      </div>
      <div id="cf-overlay" class="cf-new-add" onclick="closeShow()"></div>
      <div id="cf-overshow" class="cf-new-add"></div>
    `;
  if (container) {
    container.insertAdjacentHTML("beforebegin", messageBoard);
    container.insertAdjacentHTML("afterend", loadMoreBtn);
  }
}
// 打印文章内容 cf-article          <span class="cf-article-floor">${item.floor}</span>
function loadArticleItem(datalist, start, end) {
  var articleItem = "";
  var articleNum = article_num;
  var endFor = end;
  if (end > articleNum) {
    endFor = articleNum;
  }
  if (start < articleNum) {
    for (var i = start; i < endFor; i++) {
      var item = datalist[i];
      var id = "cf-" + CryptoJS.MD5(item.link).toString();
      articleItem += `
        <div class="cf-article ${id}">
            <a class="cf-article-title" href="${
              item.link
            }" target="_blank" rel="noopener nofollow" data-title="${
        item.title
      }">${item.title}</a>
            <a class="cf-star" onclick="switchSecretInput(event)"><i class="fa-regular fa-star"></i></a>
            <div class="cf-article-avatar no-lightbox flink-item-icon">
                <img class="cf-img-avatar avatar" src="${
                  item.avatar
                }" alt="avatar" onerror="this.src='${
        fdata.error_img
      }'; this.onerror = null;">
                <a onclick="openMeShow(event)" data-link="${
                  item.link
                }" class="" target="_blank" rel="noopener nofollow" href="javascript:;"><span class="cf-article-author">${
        item.author
      }</span></a>
            </div>
            <span class="cf-article-time">
                <span class="cf-time-created" style="${
                  sortNow == "created" ? "" : "display:none"
                }">${item.created}</span>
                <span class="cf-time-updated" style="${
                  sortNow == "updated" ? "" : "display:none"
                }">${item.updated}</span>
            </span>
        </div>
        `;
    }
    container.insertAdjacentHTML("beforeend", articleItem);
    if (savedArticlesIndex != null) {
      checkStared(savedArticlesIndex);
    }
    // 预载下一页文章
    fetchNextArticle();
  } else {
    // 文章加载到底
    document.getElementById(
      "cf-more"
    ).outerHTML = `<div id="cf-more" class="cf-new-add" onclick="loadNoArticle()"><small>一切皆有尽头！</small></div>`;
  }
}
// 打印个人卡片 cf-overshow
function loadFcircleShow(userinfo, articledata) {
  var showHtml = `
        <div class="cf-overshow">
          <div class="cf-overshow-head">
            <img class="cf-img-avatar avatar" src="${userinfo.avatar}" alt="avatar" onerror="this.src='${fdata.error_img}'; this.onerror = null;">
            <a class="" target="_blank" rel="noopener nofollow" href="${userinfo.link}">${userinfo.name}</a>
          </div>
          <div class="cf-overshow-content">
    `;
  for (var i = 0; i < userinfo.article_num; i++) {
    var item = articledata[i];
    showHtml += `
        <p><a class="cf-article-title"  href="${item.link}" target="_blank" rel="noopener nofollow" data-title="${item.title}">${item.title}</a><span>${item.created}</span></p>
      `;
  }
  showHtml += "</div></div>";
  document
    .getElementById("cf-overshow")
    .insertAdjacentHTML("beforeend", showHtml);
  document.getElementById("cf-overshow").className = "cf-show-now";
}

// 预载下一页文章，存为本地数据 nextArticle
function fetchNextArticle() {
  var start = document.querySelectorAll("#cf-container .cf-article").length;
  var end = start + fdata.stepnumber;
  var articleNum = article_num;
  if (end > articleNum) {
    end = articleNum;
  }
  if (start < articleNum) {
    UrlNow = localStorage.getItem("urlNow");
    var fetchUrl =
      UrlNow + "rule=" + sortNow + "&start=" + start + "&end=" + end;
    //console.log(fetchUrl)
    fetch(fetchUrl)
      .then((res) => res.json())
      .then((json) => {
        var nextArticle = eval(json.article_data);
        console.log(
          "已预载" + "?rule=" + sortNow + "&start=" + start + "&end=" + end
        );
        localStorage.setItem("nextArticle", JSON.stringify(nextArticle));
      });
  } else if ((start = articleNum)) {
    document.getElementById(
      "cf-more"
    ).outerHTML = `<div id="cf-more" class="cf-new-add" onclick="loadNoArticle()"><small>一切皆有尽头！</small></div>`;
  }
}
// 显示下一页文章，从本地缓存 nextArticle 中获取          <span class="cf-article-floor">${item.floor}</span>

function loadNextArticle() {
  var nextArticle = JSON.parse(localStorage.getItem("nextArticle"));
  var articleItem = "";
  for (var i = 0; i < nextArticle.length; i++) {
    var item = nextArticle[i];
    var id = "cf-" + CryptoJS.MD5(item.link).toString();
    articleItem += `
        <div class="cf-article ${id}">
            <a class="cf-article-title" href="${
              item.link
            }" target="_blank" rel="noopener nofollow" data-title="${
      item.title
    }">${item.title}</a>
            <a class="cf-star" onclick="switchSecretInput(event)"><i class="fa-regular fa-star"></i></a>
            <div class="cf-article-avatar no-lightbox flink-item-icon">
                <img class="cf-img-avatar avatar" src="${
                  item.avatar
                }" alt="avatar" onerror="this.src='${
      fdata.error_img
    }'; this.onerror = null;">
                <a onclick="openMeShow(event)" data-link="${
                  item.link
                }" class="" target="_blank" rel="noopener nofollow" href="javascript:;"><span class="cf-article-author">${
      item.author
    }</span></a>
            </div>
            <span class="cf-article-time">
                <span class="cf-time-created" style="${
                  sortNow == "created" ? "" : "display:none"
                }">${item.created}</span>
                <span class="cf-time-updated" style="${
                  sortNow == "updated" ? "" : "display:none"
                }">${item.updated}</span>
            </span>
        </div>
        `;
  }
  container.insertAdjacentHTML("beforeend", articleItem);
  if (savedArticlesIndex != null) {
    checkStared(savedArticlesIndex);
  }
  // 同时预载下一页文章
  fetchNextArticle();
}
// 没有更多文章
function loadNoArticle() {
  var articleSortData = sortNow + "ArticleData";
  localStorage.removeItem(articleSortData);
  localStorage.removeItem("statisticalData");
  //localStorage.removeItem("sortNow")
  document.getElementById("cf-more").remove();
  window.scrollTo(0, document.getElementsByClassName("cf-state").offsetTop);
}
// 清空本地数据
function clearLocal() {
  localStorage.removeItem("updatedArticleData");
  localStorage.removeItem("createdArticleData");
  localStorage.removeItem("nextArticle");
  localStorage.removeItem("statisticalData");
  localStorage.removeItem("sortNow");
  localStorage.removeItem("urlNow");
  location.reload();
}
//
function checkVersion() {
  var url = fdata.apiurl + "version";
  fetch(url)
    .then((res) => res.json())
    .then((json) => {
      console.log(json);
      var nowStatus = json.status,
        nowVersion = json.current_version,
        newVersion = json.latest_version;
      var versionID = document.getElementById("cf-version-up");
      if (nowStatus == 0) {
        versionID.innerHTML = "当前版本：v" + nowVersion;
      } else if (nowStatus == 1) {
        versionID.innerHTML = "发现新版本：v" + nowVersion + " ↦ " + newVersion;
      } else {
        versionID.innerHTML = "网络错误，检测失败！";
      }
    });
}
// 切换为公共全库
function changeEgg() {
  //有自定义json或api执行切换
  if (fdata.jsonurl || fdata.apiurl) {
    document.querySelectorAll(".cf-new-add").forEach((el) => el.remove());
    localStorage.removeItem("updatedArticleData");
    localStorage.removeItem("createdArticleData");
    localStorage.removeItem("nextArticle");
    localStorage.removeItem("statisticalData");
    container.innerHTML = "";
    UrlNow = localStorage.getItem("urlNow");
    //console.log("新"+UrlNow)
    var UrlNowPublic = fdata.apipublieurl + "all?";
    if (UrlNow !== UrlNowPublic) {
      //非完整默认公开库
      changeUrl = fdata.apipublieurl + "all?";
    } else {
      if (fdata.jsonurl) {
        changeUrl =
          fdata.apipublieurl + "postjson?jsonlink=" + fdata.jsonurl + "&";
      } else if (fdata.apiurl) {
        changeUrl = fdata.apiurl + "all?";
      }
    }
    localStorage.setItem("urlNow", changeUrl);
    FetchFriendCircle(sortNow, changeUrl);
  } else {
    clearLocal();
  }
}
// 首次加载文章
function FetchFriendCircle(sortNow, changeUrl) {
  var end = fdata.initnumber;
  var fetchUrl = UrlNow + "rule=" + sortNow + "&start=0&end=" + end;
  if (changeUrl) {
    fetchUrl = changeUrl + "rule=" + sortNow + "&start=0&end=" + end;
  }
  //console.log(fetchUrl)
  fetch(fetchUrl)
    .then((res) => res.json())
    .then((json) => {
      var statisticalData = json.statistical_data;
      var articleData = eval(json.article_data);
      var articleSortData = sortNow + "ArticleData";
      loadStatistical(statisticalData);
      loadArticleItem(articleData, 0, end);
      localStorage.setItem("statisticalData", JSON.stringify(statisticalData));
      localStorage.setItem(articleSortData, JSON.stringify(articleData));
    });
}
// 点击切换排序
function changeSort(event) {
  sortNow = event.currentTarget.dataset.sort;
  localStorage.setItem("sortNow", sortNow);
  document.querySelectorAll(".cf-new-add").forEach((el) => el.remove());
  container.innerHTML = "";
  changeUrl = localStorage.getItem("urlNow");
  //console.log(changeUrl)
  initFriendCircle(sortNow, changeUrl);
  if (fdata.apiurl) {
    checkVersion();
  }
}
//查询个人文章列表
function openMeShow(event) {
  event.preventDefault();
  var parse_url =
    /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
  var meLink = event.currentTarget.dataset.link.replace(parse_url, "$1:$2$3");
  console.log(meLink);
  var fetchUrl = "";
  if (fdata.apiurl) {
    fetchUrl = fdata.apiurl + "post?num=5&link=" + meLink;
  } else {
    fetchUrl = fdata.apipublieurl + "post?num=5&link=" + meLink;
  }
  //console.log(fetchUrl)
  if (noClick == "ok") {
    noClick = "no";
    fetchShow(fetchUrl);
  }
}
// 关闭 show
function closeShow() {
  document.getElementById("cf-overlay").className -= "cf-show-now";
  document.getElementById("cf-overshow").className -= "cf-show-now";
  document.getElementById("cf-overshow").innerHTML = "";
}
// 点击开往
var noClick = "ok";
function openToShow() {
  var fetchUrl = "";
  if (fdata.apiurl) {
    fetchUrl = fdata.apiurl + "post";
  } else {
    fetchUrl = fdata.apipublieurl + "post";
  }
  //console.log(fetchUrl)
  if (noClick == "ok") {
    noClick = "no";
    fetchShow(fetchUrl);
  }
}
// 展示个人文章列表
function fetchShow(url) {
  var closeHtml = `
      <div class="cf-overshow-close" onclick="closeShow()"></div>
    `;
  document.getElementById("cf-overlay").className = "cf-show-now";
  document
    .getElementById("cf-overshow")
    .insertAdjacentHTML("afterbegin", closeHtml);
  console.log("开往" + url);
  fetch(url)
    .then((res) => res.json())
    .then((json) => {
      //console.log(json)
      noClick = "ok";
      var statisticalData = json.statistical_data;
      var articleData = eval(json.article_data);
      loadFcircleShow(statisticalData, articleData);
    });
}
// 初始化方法，如有本地数据首先调用
function initFriendCircle(sortNow, changeUrl) {
  var articleSortData = sortNow + "ArticleData";
  var localStatisticalData = JSON.parse(
    localStorage.getItem("statisticalData")
  );
  var localArticleData = JSON.parse(localStorage.getItem(articleSortData));
  container.innerHTML = "";
  if (localStatisticalData && localArticleData) {
    loadStatistical(localStatisticalData);
    loadArticleItem(localArticleData, 0, fdata.initnumber);
    console.log("本地数据加载成功");
    var fetchUrl =
      UrlNow + "rule=" + sortNow + "&start=0&end=" + fdata.initnumber;
    fetch(fetchUrl)
      .then((res) => res.json())
      .then((json) => {
        var statisticalData = json.statistical_data;
        var articleData = eval(json.article_data);
        //获取文章总数与第一篇文章标题
        var localSnum = localStatisticalData.article_num;
        var newSnum = statisticalData.article_num;
        var localAtile = localArticleData[0].title;
        var newAtile = articleData[0].title;
        //判断文章总数或文章标题是否一致，否则热更新
        if (localSnum !== newSnum || localAtile !== newAtile) {
          document.getElementById("cf-state").remove();
          document.getElementById("cf-more").remove();
          document.getElementById("cf-footer").remove();
          container.innerHTML = "";
          var articleSortData = sortNow + "ArticleData";
          loadStatistical(statisticalData);
          loadArticleItem(articleData, 0, fdata.initnumber);
          localStorage.setItem(
            "statisticalData",
            JSON.stringify(statisticalData)
          );
          localStorage.setItem(articleSortData, JSON.stringify(articleData));
          console.log("热更新完成");
        } else {
          console.log("API数据未更新");
        }
      });
  } else {
    FetchFriendCircle(sortNow, changeUrl);
    console.log("第一次加载完成");
  }
}
// 执行初始化
initFriendCircle(sortNow);

CSS 样式部分比较冗杂，可自行 F12 获取。