本文原版教程来自好朋友六神~（被打），原文链接如下

查看原文

清羽飞扬Friend-Circle-Lite:轻量友链朋友圈

项目介绍

• 爬取文章: 爬取所有友链的文章，结果放置在根目录的all.json文件中，方便读取并部署到前端。

• 邮箱推送更新(对作者推送所有友链更新): 作者可以通过邮箱订阅所有rss的更新（未来开发）。

• issue邮箱订阅(对访客实时推送最新文章邮件): 基于GitHub issue的博客更新邮件订阅功能，游客可以通过简单的提交issue进行邮箱订阅站点更新，删除对应issue即可取消订阅。

• 自部署: 本项目支持自部署，通过较为简洁的方式实现在服务器上获取数据并返回，同时可以合并github 获取的数据，实现更高的准确率。

特点介绍

• 轻量化：对比原版友链朋友圈的功能，该友圈功能简洁，去掉了设置和fastAPI的臃肿，仅保留关键内容。

• 无数据库：因为内容较少，我采用json直接存储文章信息，减少数据库操作，提升action运行效率。

• 部署简单：原版友链朋友圈由于功能多，导致部署较为麻烦，本方案仅需简单的部署action即可使用，vercel仅用于部署前端静态页面和实时获取最新内容。

• 文件占用：对比原版4MB的bundle.js文件大小，本项目仅需要5.50KB的fclite.min.js文件即可轻量的展示到前端。

• 前端分离: 将前后端分离，前端文件放在page分支，后端文件放在主分支

功能概览

• 文章爬取：实现友圈基本功能。

• 暗色适配：适配本站暗色主题，理论上所有类butterfly主题均适配。

• 显示作者所有文章：点击作者头像即可弹出窗口并显示所有文章

• 随机钓鱼：通过前端实现的随机访问。

• 邮箱推送：可以向订阅者邮箱推送网站更新。

• 邮箱模板：内置简单邮箱模板，支持自定义。

• 自部署(2024-08-11添加)

• 前端单开分支(2024-09-05添加) @CCKNBC

以下为正式教程，为节省篇幅，具体解释不再转述，感兴趣的可以到原文去看哦

以下教程已对solitude主题完成适配

爬取服务部署

由于为了追求简单，我并没有实现从页面直接爬取友链信息，仅仅实现了从固定json格式中获取信息，所以我们先讲解一下怎么获取这种格式的json

json获取

在博客根目录添加文件link.js，写入以下代码：

const YML = require('yamljs')
const fs = require('fs')

const blacklist = ["友站名称1", "友站名称2", "友站名称3"]; // 由于某种原因，不想订阅的列表

let friends = [],
    data_f = YML.parse(fs.readFileSync('source/_data/links.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

data_f.links.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 文件已生成。');

按照需求修改其中的黑名单，该黑名单可以用于排除一些采集站之类的灌水文章，其中填写对应站点的名称，然后再在根目录执行：

node link.js

执行此命令时，此处若弹出报错，提示缺少yamljs，请执行以下命令

BASH

npm install yamljs --save

你将会在source文件中发现文件friend.json，即为对应格式文件，下面正常hexo三件套即可放置到网站根目录。

为了更加方便，可以在博客根目录添加运行脚本：

@echo off
E:
cd E:\Programming\HTML_Language\willow-God\blog
node link.js && hexo g && hexo algolia && hexo d

注意：地址改成自己的，上传时仅需双击即可完成。

如果是github action，可以在hexo g脚本前添加即可完整构建，注意需要安装yaml包才可解析yml文件，请在执行前额外添加对应npm包下载命令，如下是一个示例：

# 前略
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 生成静态文件
          run: |
            node ./link.js
            hexo generate
# 后略

如果一切正常，在你的网站根目录将会出现一个friend.json文件，这个就是我们需要的json啦！

action配置

{% link 'Friend-Circle-Lite' '🐱一个精简版，无后端，且仅利用github action运行的精简版友链朋友圈程序，兼容fc的json格式信息，同时支持推送友圈更新，支持他人订阅个人站点并在更新时发送邮箱推送。' 'https://github.com/willow-god/Friend-Circle-Lite' %}

前置工作

1. Fork 本仓库: 点击页面右上角的 Fork 按钮，将本仓库复制到你自己的GitHub账号下

2. 配置action权限： 在设置中，点击action，拉到最下面，勾选Read and write permissions选项并保存，确保action有读写权限。

3. 启用 GitHub Actions: GitHub Actions 已经配置好在仓库的 .github/workflows/*.yml 文件中，当到一定时间时将自动执行，也可以手动运行。 其中，每个action功能如下：

   • friend_circle_lite.yml实现核心功能，爬取并发送邮箱；

   • deal_subscribe_issue.yml处理固定格式的issue，打上固定标签，评论，并关闭issue；

4. 设置issue格式： 这个项目内已经设置好了，你只需要进行自定义即可

配置选项

1. 如果需要修改爬虫设置或邮件模板等配置，需要修改仓库中的 config.yaml 文件：

• 爬虫相关配置(必选)

  使用 requests 库实现友链文章的爬取，并将结果存储到根目录下的 all.json 文件中。

  YAML

  spider_settings:
    enable: true
    json_url: "https://blog.liushen.fun/friend.json"
    article_count: 5
    merge_result:
      enable: true
      merge_json_url: "https://fc.liushen.fun"
  

  enable：开启或关闭，默认开启； json_url：友链朋友圈通用爬取格式第一种，填写上面生成的json文件网络地址即可。 article_count：每个作者留存文章个数，建议不要太多，五个正好合适。 marge_result：是否合并多个json文件，若为true则会合并指定网络地址和本地地址的json文件，建议在自部署部分使用，如果你有多个结果需要合并也可以使用，该部分需要/all.json和/errors.json地址可访问。

  • enable：是否启用合并功能，该功能提供与自部署的友链合并功能，可以解决服务器部分国外网站，服务器无法访问的问题

  • marge_json_path：请填写网络地址的json文件，用于合并，不带最后的斜杠！！！

• 邮箱推送功能配置(可选)

  暂未实现，预留用于将每天的友链文章更新推送给指定邮箱。

  YAML

  email_push:
    enable: false
    to_email: recipient@example.com
    subject: "今天的 RSS 订阅更新"
    body_template: "rss_template.html"
  

  暂未实现：该部分暂未实现，由于感觉用处不大，保留接口后期酌情更新。

• 邮箱 issue 订阅功能配置(可选)

  通过 GitHub issue 实现向提取的所有邮箱推送博客更新的功能。

  YAML

  rss_subscribe:
    enable: true
    github_username: willow-god
    github_repo: Friend-Circle-Lite
    your_blog_url: https://blog.liushen.fun/
  

  enable：开启或关闭，默认开启，如果没有配置请关闭。 github_username：github用户名，用来拼接github api地址 github_repo：仓库名称，作用同上。 your_blog_url：用来定时检测rss中是否有最新文章，如果有，将触发邮箱通知并更新最新的文章到对应目录下。

• SMTP 配置(可选)

  使用配置中的相关信息实现邮件发送功能。

  YAML

  smtp:
    email: 3162475700@qq.com
    server: smtp.qq.com
    port: 587
    use_tls: true
  

  email：发件人邮箱地址 server：SMTP 服务器地址 port：SMTP 端口号 use_tls：是否使用 tls 加密

  这部分讲解起来较为复杂，请自行寻找相关资料进行学习并配置。

• 特定RSS地址(可选)

  YAML

  specific_RSS:
    - name: "Redish101"
      url: "https://reblog.redish101.top/api/feed"
   # - name: "無名小栈"
   #   url: "https://blog.imsyy.top/rss.xml"
  

  name：友链名称，需要严格匹配 url：该友链对应RSS地址

  该部分可以添加多个，如果不需要也可以置空。

前端部署

静态网站部署

现在我们所需要的内容都在all.json中，为了及时的获取到文件内容并且获得良好的网络体验，我们可以选择vercel或者CloudFlare Page等，将其部署为静态网站，注意，一定要部署到page分支上！

vercel 需要在部署完成后，通过 setting-git-Production Branch ，填写为page并重新进行部署即可（建议在仓库重新运行action以触发重新部署，否则有报错的可能）

CloudFlare Page 也可以在构建时即选择对应的分支，这里不再细讲。

在仓库更新后，vercel或者CloudFlare Page也会同步更新，这样就达到了定时更新的效果。

这样，我们就可以通过地址https://你的域名/all.json访问到你的文章内容，并且因为文件非常小，访问体验也非常不错，并且不会因为频繁请求不同api而过量使用vercel提供的edge requests次数

部署到博客页面

在终端中输入以下命令，它将在source文件夹下生成fcircle文件夹，其中包含index.md​文件

hexo new page fcircle

下面在你的页面md文件中直接放置以下内容：

<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: '此处地址注意替换',
            // 点击加载更多时，一次最多加载几篇文章，默认20
            page_turning_number: 24,
            // 头像加载失败时，默认头像地址
            error_img: 'https://pic.imgdb.cn/item/6695daa4d9c307b7e953ee3d.jpg',
        }
    }
</script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.css">
<script src="https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite/main/fclite.min.js"></script>

注意其中的private_api_url尾部需要/防止拼接路径时出现错误。

hexo三连后，访问该页面即可查看效果，本站部署的页面你可以通过顶部导航栏直接进入查看效果。

更多

如果你有一台服务器，并希望将他部署到服务器，你也可以通过以下操作将其部署到你的服务器上，以提高网站爬取的准确率。具体操作请查看原文：

查看原文

自部署Friend-Circle-Lite:轻量友链朋友圈