前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >轻量友圈及issue邮箱订阅实现

轻量友圈及issue邮箱订阅实现

作者头像
柳神
发布2024-07-20 18:18:40
940
发布2024-07-20 18:18:40
举报
文章被收录于专栏:清羽飞扬

碎碎念

前两天,友链朋友圈由于版本原因导致无法继续使用,在和朋友安小歪交流之后,最终修好了,结果不到一个小时之后,友圈就推送了新的更新,但是在经过我尝试,并没有成功部署,有一些看不懂的报错,很烦,于是突发奇想,为什么我不能自己写一个呢?说干就干,在查看了很多资料和参考了原版的友链朋友圈后,去掉了一些我不需要的功能,仅保留核心功能,随机api和作者文章卡片均在前端实现,最终达到了很好的效果,爬取的也非常快。并且在探索的过程中,偶然看到了github api,突发奇想,将issue邮箱订阅集成到了项目中,最终也实现了功能。

🪧引用站外地址,不保证站点的可用性和安全性

🐱一个无后端的精简版友链朋友圈程序,兼容fc的json格式信息

github.com@willow-god

这篇文章本来说的是回家后再写,结果byd火车半路调头了是我没想到的,一觉起来又回武汉了……没办法,只能买过两天的高铁咯,这篇也拖了很久了,干脆一起写了吧!

研发过程

项目的起因来自于友链朋友圈的版本问题,由于pip升级,导致很多的包都用不了了,只能一个个慢慢升级,虽然后面解决了,但是总感觉这样不是办法,因为代码是我的我也没办法维护,并且苦于前端bundle.js文件大小已久,于是我决定自己搞一个简易版,只保留我需要的功能,并且尽可能简化代码使文件缩小,最终而达到了我的目的。

刚开始,朋友安小歪搞了一个邮箱推送友圈更新的程序,于是开启了本次旅程,首先我想实现的就是友圈,并且为了兼容性我考虑了原版fc的通用格式1,以便于更好的过度,经过了几天的奋斗后,终于实现了基本功能。

在和朋友聊天的过程中,意外的想到了洪哥用的竹白,但是很可惜,好像并不对我开放,于是我想,能不能用GitHub action实现一个邮箱推送的功能呢?python可以发邮箱的呀!说干就干,为了他人的方便订阅,我用了issue的方式实现,如果不想订阅了可以随时删除issue,方便访客自行控制订阅,不会出现订阅了没法取消的尴尬情况……

至于邮箱推送所有的友圈文章更新,这个对于我来说作用好像并不大,于是我没有实现,但是保留了接口,后面如果需要可以实现一下嘿嘿。

项目介绍

  • 爬取文章: 爬取所有友链的文章,结果放置在根目录的all.json文件中,方便读取并部署到前端。
  • 邮箱推送更新(对作者推送所有友链更新): 作者可以通过邮箱订阅所有rss的更新(未来开发)。
  • issue邮箱订阅(对访客实时推送最新文章邮件): 基于GitHub issue的博客更新邮件订阅功能,游客可以通过简单的提交issue进行邮箱订阅站点更新,删除对应issue即可取消订阅。

本项目虽然没有提供自己部署的选项,但是理论上仅需要定时任务即可完成,如有需求请自行摸索

展示页面

🪧引用站外地址,不保证站点的可用性和安全性

清羽飞扬の友链朋友圈-lite

LiuShen's Blog

🪧引用站外地址,不保证站点的可用性和安全性

❖星港◎Star☆ 的友链朋友圈

❖星港◎Star☆

欢迎在评论区提交你的站点并展示在这里!

特点介绍

  • 轻量化:对比原版友链朋友圈的功能,该友圈功能简洁,去掉了设置和fastAPI的臃肿,仅保留关键内容。
  • 无数据库:因为内容较少,我采用json直接存储文章信息,减少数据库操作,提升action运行效率。
  • 部署简单:原版友链朋友圈由于功能多,导致部署较为麻烦,本方案仅需简单的部署action即可使用,vercel仅用于部署前端静态页面和实时获取最新内容。
  • 文件占用:对比原版4MBbundle.js文件大小,本项目仅需要5.50KBfclite.min.js文件即可轻量的展示到前端。

功能概览

  • 文章爬取:实现友圈基本功能。
  • 暗色适配:适配本站暗色主题,理论上所有类butterfly主题均适配。
  • 显示作者所有文章:点击作者头像即可弹出窗口并显示所有文章
  • 随机钓鱼:通过前端实现的随机访问。
  • 邮箱推送:可以向订阅者邮箱推送网站更新。
  • 邮箱模板:内置简单邮箱模板,支持自定义。

后端部署

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

json获取

下面就是该json格式的文件示例:

代码语言:javascript
复制
{
  "friends": [
    [
      "清羽飞扬",
      "https://blog.qyliu.top/",
      "https://blog.qyliu.top/info/avatar.ico"
    ],
    [
      "ChrisKim",
      "https://www.zouht.com/",
      "https://cdn.qyliu.top/i/2024/06/27/667d880789765.webp"
    ],
    [
      "Akilar",
      "https://akilar.top/",
      "https://cdn.qyliu.top/i/2024/04/06/661170950f7a2.png"
    ],
      ……
}

由于主题较多,这里我仅实现了hexo-theme-butterfly获取该格式的json方法,其余主题可以根据自己的友链格式针对性实现代码。

首先,在博客根目录添加文件link.js,写入以下代码:

代码语言:javascript
复制
const YML = require('yamljs')
const fs = require('fs')

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

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

然后再在根目录执行:

代码语言:javascript
复制
node link.js

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

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

代码语言:javascript
复制
@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包下载命令,如下是一个示例:

github action实现
github action实现

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

哪怕你不需要轻量友圈,我也推荐你使用json格式生成并填入到友链朋友圈的对应配置中,首先,json文件的读取速度比网站快很多,并且不需要解析页面格式,可以更加快捷的实现爬取,其次,json文件有效文本密度大,比直接爬取友链页面更加节省流量。

action配置

前置工作
  1. Fork 本仓库: 点击页面右上角的 Fork 按钮,将本仓库复制到你自己的GitHub账号下。
  2. 配置 Secrets: 在你 Fork 的仓库中,依次进入 Settings -> Secrets -> New repository secret,添加以下 Secrets:
    • PAT_TOKEN: GitHub 的个人访问令牌,用于访问 GitHub API。
    • SMTP_PWD: SMTP 服务器的密码,用于发送电子邮件。
所需密钥
所需密钥

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

action权限
action权限
  1. 启用 GitHub Actions: GitHub Actions 已经配置好在仓库的 .github/workflows/*.yml 文件中,当到一定时间时将自动执行,也可以手动运行。 其中,每个action功能如下:
    • friend_circle_lite.yml实现核心功能,爬取并发送邮箱;
    • deal_subscribe_issue.yml处理固定格式的issue,打上固定标签,评论,并关闭issue;
  2. 设置issue格式: 这个我已经设置好了,你只需要进行自定义即可。
配置选项(必选)

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

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

代码语言:javascript
复制
spider_settings:
  enable: true
  json_url: "https://blog.qyliu.top/friend.json"
  article_count: 5

enable:开启或关闭,默认开启;

json_url:友链朋友圈通用爬取格式第一种,填写上面生成的json文件网络地址即可。

article_count:每个作者留存文章个数,建议不要太多,五个正好合适。

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

代码语言:javascript
复制
email_push:
  enable: false
  to_email: recipient@example.com
  subject: "今天的 RSS 订阅更新"
  body_template: "rss_template.html"

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

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

代码语言:javascript
复制
rss_subscribe:
  enable: true
  github_username: willow-god
  github_repo: Friend-Circle-Lite
  your_blog_url: https://blog.qyliu.top/

enable:开启或关闭,默认开启,如果没有配置请关闭。

github_username:github用户名,用来拼接github api地址

github_repo:仓库名称,作用同上。

your_blog_url:用来定时检测rss中是否有最新文章,如果有,将触发邮箱通知并更新最新的文章到对应目录下。

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

代码语言:javascript
复制
smtp:
  email: 3162475700@qq.com
  server: smtp.qq.com
  port: 587
  use_tls: true

email:发件人邮箱地址

serverSMTP 服务器地址

portSMTP 端口号

use_tls:是否使用 tls 加密

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

测试

由于在action中请求了github api,有较为严格的限额,所以我将更新后自动执行action的触发器关掉了,防止多次重复请求,你可以自行点击并运行action,如果在Check RSS feeds部分中,获取到了文章:

文章获取
文章获取

并且正常提交到仓库中,则基本实现友链朋友圈功能。你可以在仓库根目录下找到all.json文件,里面即为所有的文章,程序已经按照时间顺序进行排序。

如果你还启用了邮件提醒,你可以尝试提交issue,格式如下图所示:

订阅网站
订阅网站

如果格式正确,action将自动添加tags,回复并关闭issue,可以尝试删除rss_subscribe文件夹下的last_articles.json中文件内容,使下次对比有新文章出现,触发邮件通知。

模板修改(可选)

为了美观,我编写了一个简单的邮件模板,样式如下:

邮件模板
邮件模板

你可以尝试修改email_template.html文件以达到你想要的效果,这里不再详细解释。

前端部署

vercel加速

现在我们所需要的内容都在all.json中,为了及时的获取到文件内容并且获得良好的网络体验,我们可以选择vercel或者zeabur,将其部署为静态网站,在仓库更新后,vercel或者zeabur也会同步更新,这样就达到了定时更新的效果。本项目提供了一个简单的前端展示页面,地址如下:

🪧引用站外地址,不保证站点的可用性和安全性

文章卡片展示

Friend-Circle-Lite展示页面

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

部署到前端

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

代码语言:javascript
复制
<div id="friend-circle-lite-root"></div>
<script>
    if (typeof UserConfig === 'undefined') {
        var UserConfig = {
            // 填写你的fc Lite地址
            private_api_url: 'https://fc.liushen.fun/',
            // 点击加载更多时,一次最多加载几篇文章,默认20
            page_turning_number: 20,
            // 头像加载失败时,默认头像地址
            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三联后,即可查看效果,本站部署的页面你可以通过顶部导航栏直接进入查看效果。

效果展示

亮色模式暗色模式所有文章卡片

亮色模式
亮色模式
暗色模式
暗色模式
所有文章卡片
所有文章卡片

如果你对效果不满意,本项目还提供未压缩的css源码,在项目的main文件夹中,你可以自行修改并托管。

每日一图

小浣熊!
小浣熊!
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-07-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 碎碎念
  • 研发过程
  • 项目介绍
    • 展示页面
      • 特点介绍
        • 功能概览
        • 后端部署
          • json获取
            • action配置
              • 前置工作
              • 配置选项(必选)
              • 测试
            • 模板修改(可选)
            • 前端部署
              • vercel加速
                • 部署到前端
                • 效果展示
                • 每日一图
                相关产品与服务
                邮件推送
                邮件推送(Simple Email Service,SES)是一款基于腾讯云端的平台化服务, 为企业提供安全稳定、简单快速、精准高效的营销、通知和事务邮件的推送服务。产品提供灵活的 IP 部署、电子邮件身份验证以及企业专属定制的启动计划,以保护发件人声誉,同时提供精准智能的数据分析。产品的服务范围覆盖200+国家/地区,可即时触达全球各地的邮箱地址。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档