From 82d824865bab50cc75efdbd51325d53bf507b59e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=B3=E7=A5=9E?= <3162475700@qq.com> Date: Fri, 19 Jul 2024 00:45:10 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=A9=E5=AE=8C=E5=96=84=E6=96=87?= =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99=E6=96=87?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=87=86=E5=A4=87=E6=92=B0=E5=86=99=E6=96=87?= =?UTF-8?q?=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 29 ++-- readme.md | 181 ++++++++++++++++++++-- static/1.png | Bin 0 -> 20801 bytes static/script.js | 132 ----------------- static/styles.css | 371 ---------------------------------------------- 5 files changed, 181 insertions(+), 532 deletions(-) create mode 100644 static/1.png delete mode 100644 static/script.js delete mode 100644 static/styles.css diff --git a/index.html b/index.html index 1185d87..11faf1e 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,24 @@ 文章卡片展示 - -
-
- - - - - +
+ + + \ No newline at end of file diff --git a/readme.md b/readme.md index 367913e..9d80052 100644 --- a/readme.md +++ b/readme.md @@ -2,47 +2,90 @@ # Friend-Circle-Lite -友链朋友圈简单版，实现了[友链朋友圈](https://github.com/Rock-Candy-Tea/hexo-circle-of-friends)的基本功能，能够定时爬取rss文章并输出有序内容，为了匹配，输入格式与友链朋友圈的json格式一致，暂不支持从友链页面自动爬取。 +[前端展示](https://fc.liushen.fun) | [详细文档](https://blog.qyliu.top/posts/4dc716ec/) -## 功能介绍 +友链朋友圈简单版，实现了[友链朋友圈](https://github.com/Rock-Candy-Tea/hexo-circle-of-friends)的基本功能，能够定时爬取rss文章并输出有序内容，为了较好的兼容性，输入格式与友链朋友圈的json格式一致，为了轻量化，暂不支持从友链页面自动爬取，下面会附带`hexo-theme-butterfly`主题的解决方案，其他主题可以类比。 -- **友链朋友圈**: 爬取所有友链的文章，结果放置在根目录的all.json文件中。 -- **邮件推送**: 作者可以通过邮箱订阅所有rss的更新（未来开发）。 -- **RSS 订阅**: 基于 GitHub issue 的博客更新邮件订阅功能，游客可以通过简单的提交issue进行邮箱订阅站点更新，支持删除。 +## 展示页面 + +* [清羽飞扬の友链朋友圈](https://blog.qyliu.top/fcircle-lite/) + +* [❖星港◎Star☆ 的友链朋友圈](https://blog.starsharbor.com/fcircle/) +* 欢迎更多 + +## 项目介绍 + +- **爬取文章**: 爬取所有友链的文章，结果放置在根目录的all.json文件中，方便读取并部署到前端。 +- **邮箱推送更新(对作者推送所有友链更新)**: 作者可以通过邮箱订阅所有rss的更新（未来开发）。 +- **issue邮箱订阅(对访客实时推送最新文章邮件)**: 基于`GitHub issue`的博客更新邮件订阅功能，游客可以通过简单的提交`issue`进行邮箱订阅站点更新，删除对应`issue`即可取消订阅。 + +## 特点介绍 + +* **轻量化**：对比原版友链朋友圈的功能，该友圈功能简洁，去掉了设置和fastAPI的臃肿，仅保留关键内容。 +* **无数据库**：因为内容较少，我采用`json`直接存储文章信息，减少数据库操作，提升`action`运行效率。 +* **部署简单**：原版友链朋友圈由于功能多，导致部署较为麻烦，本方案仅需简单的部署action即可使用，vercel仅用于部署前端静态页面和实时获取最新内容。 +* **文件占用**：对比原版`4MB`的`bundle.js`文件大小，本项目仅需要`5.50KB`的`fclite.min.js`文件即可轻量的展示到前端。 + +## 功能概览 + +* 文章爬取 +* 暗色适配 +* 显示作者所有文章 +* 随机钓鱼 +* 邮箱推送 +* 美观邮箱模板 ## 使用方法 +### 前置工作 + 1. **Fork 本仓库:** - 点击页面右上角的 Fork 按钮，将本仓库复制到你自己的 GitHub 账号下。 + 点击页面右上角的 Fork 按钮，将本仓库复制到你自己的`GitHub`账号下。 2. **配置 Secrets:** 在你 Fork 的仓库中，依次进入 `Settings` -> `Secrets` -> `New repository secret`，添加以下 Secrets： - `PAT_TOKEN`: GitHub 的个人访问令牌，用于访问 GitHub API。 - `SMTP_PWD`: SMTP 服务器的密码，用于发送电子邮件。 + ![](./static/1.png) + +2. **配置action权限：** + + 在设置中，点击`action`，拉到最下面，勾选`Read and write permissions`选项并保存，确保action有读写权限。 + 3. **启用 GitHub Actions:** - GitHub Actions 已经配置好在仓库的 `.github/workflows/*.yml` 文件中，当代码推送或定时触发时将自动执行。 + GitHub Actions 已经配置好在仓库的 `.github/workflows/*.yml` 文件中，当到一定时间时将自动执行，也可以手动运行。 其中，每个action功能如下： + - `friend_circle_lite.yml`实现核心功能，爬取并发送邮箱； - `deal_subscribe_issue.yml`处理固定格式的issue，打上固定标签，评论，并关闭issue； - + 4. **设置issue格式：** - 这个我已经设置好了，你只需要检查issue部分是否有对应格式即可。 + 这个我已经设置好了，你只需要检查issue部分是否有对应格式即可，可以自行修改对应参数以进行自定义。 -5. **定制配置:** - 如果需要修改爬虫设置或邮件模板等配置，可以修改仓库中的 `config.yaml` 文件： +### 配置选项 + +1. 如果需要修改爬虫设置或邮件模板等配置，需要修改仓库中的 `config.yaml` 文件： - **爬虫相关配置** 使用 `requests` 库实现友链文章的爬取，并将结果存储到根目录下的 `all.json` 文件中。 + ```yaml spider_settings: enable: true json_url: "https://blog.qyliu.top/friend.json" article_count: 5 ``` - + + `enable`：开启或关闭，默认开启； + + `json_url`：友链朋友圈通用爬取格式第一种（下方有配置方法）; + + `article_count`：每个作者留存文章个数。 + - **邮箱推送功能配置** 暂未实现，预留用于将每天的友链文章更新推送给指定邮箱。 + ```yaml email_push: enable: false @@ -50,9 +93,12 @@ subject: "今天的 RSS 订阅更新" body_template: "rss_template.html" ``` - + + **暂未实现**：该部分暂未实现，由于感觉用处不大，保留接口后期酌情更新。 + - **邮箱 issue 订阅功能配置** 通过 GitHub issue 实现向提取的所有邮箱推送博客更新的功能。 + ```yaml rss_subscribe: enable: true @@ -60,9 +106,18 @@ github_repo: Friend-Circle-Lite your_blog_url: https://blog.qyliu.top/ ``` - + + `enable`：开启或关闭，默认开启，如果没有配置请关闭。 + + `github_username`：github用户名，用来拼接github api地址 + + `github_repo`：仓库名称，作用同上。 + + `your_blog_url`：用来定时检测是否有最新文章。 + - **SMTP 配置** 使用配置中的相关信息实现邮件发送功能。 + ```yaml smtp: email: 3162475700@qq.com @@ -70,10 +125,106 @@ port: 587 use_tls: true ``` + + `email`：发件人邮箱地址 + + `server`：`SMTP` 服务器地址 + + `port`：`SMTP` 端口号 + + `use_tls`：是否使用 `tls` 加密 + + 这部分配置较为复杂，请自行学习使用。 -6. **贡献与定制:** +2. **贡献与定制:** 欢迎对仓库进行贡献或根据需要进行定制。 +### 友圈json生成 + +1. 将以下文件放置到博客根目录： + + ```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 文件已生成。'); + ``` + +2. 在根目录下运行： + + ```bash + node link.js + ``` + + 你将会在source文件中发现文件`friend.json`，即为对应格式文件，下面正常hexo三件套即可放置到网站根目录。 + +3. (可选)添加运行命令到脚本中方便执行，在根目录下创建： + + ```bash + @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文件。 + +## 部署到网页 + +首先，将该项目部署到vercel，部署到vercel的目的主要是利用vercel检测仓库并实时刷新的功能，及时获取all.json文件内容。任意平台均可。 + +部署完成后，你将获得一个地址，建议自行绑定域名。 + +在前端页面的md文件中写入： + +```html +
+ + + +``` + +其中第一个地址填入你自己的地址即可，**注意**尾部带`/`，不要遗漏。 + +然后你就可以在前端页面看到我们的结果了。效果图如上展示网站，其中两个文件你可以自行修改，在同目录下我也提供了未压缩版本，有基础的可以很便捷的进行修改。 + ## 问题与贡献 如果遇到任何问题或有建议，请[提交一个 issue](https://github.com/willow-god/Friend-Circle-Lite/issues)。欢迎贡献代码！ diff --git a/static/1.png b/static/1.png new file mode 100644 index 0000000000000000000000000000000000000000..75aef417b61616506b517d77a19fb7cd8aeed96c GIT binary patch literal 20801 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 V`U9!A$#A`D7UpNn%Hiju{sx}b8>0XK literal 0 HcmV?d00001 diff --git a/static/script.js b/static/script.js deleted file mode 100644 index 13e952f..0000000 --- a/static/script.js +++ /dev/null @@ -1,132 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const container = document.getElementById('articles-container'); - let start = 0; - const batchSize = 20; // 每次加载的卡片数量 - - function loadMoreArticles() { - fetch('https://fc.liushen.fun/all.json') - .then(response => response.json()) - .then(data => { - allArticles = data.article_data; - const randomArticle = allArticles[Math.floor(Math.random() * allArticles.length)]; - const articles = data.article_data.slice(start, start + batchSize); - const randomArticleElement = document.getElementById('random-article'); - - randomArticleElement.innerHTML = ` -
-
随机钓鱼
-
${randomArticle.title}
-
作者: ${randomArticle.author}
-
- - `; - - articles.forEach(article => { - const card = document.createElement('div'); - card.className = 'card'; - - const title = document.createElement('div'); - title.className = 'card-title'; - title.innerText = article.title; - card.appendChild(title); - - title.onclick = () => { - window.open(article.link, '_blank'); - }; - - const author = document.createElement('div'); - author.className = 'card-author'; - const authorImg = document.createElement('img'); - authorImg.src = article.avatar; - author.appendChild(authorImg); - author.appendChild(document.createTextNode(article.author)); - card.appendChild(author); - - author.onclick = () => { - showAuthorArticles(article.author, article.avatar, article.link); - }; - - const date = document.createElement('div'); - date.className = 'card-date'; - date.appendChild(document.createTextNode(article.created.substring(0, 10))); - card.appendChild(date); - - const bgImg = document.createElement('img'); - bgImg.className = 'card-bg'; - bgImg.src = article.avatar; - card.appendChild(bgImg); - - container.appendChild(card); - }); - - start += batchSize; - - if (start >= data.article_data.length) { - // 如果加载完所有卡片，隐藏加载更多按钮 - document.getElementById('load-more-btn').style.display = 'none'; - } - }); - } - - // 显示作者文章的函数 - function showAuthorArticles(author, avatar, link) { - const modal = document.getElementById('modal'); - const modalArticlesContainer = document.getElementById('modal-articles-container'); - const modalAuthorAvatar = document.getElementById('modal-author-avatar'); - const modalAuthorNameLink = document.getElementById('modal-author-name-link'); - - modalArticlesContainer.innerHTML = ''; // 清空之前的内容 - modalAuthorAvatar.src = avatar; - modalAuthorNameLink.innerText = author; - modalAuthorNameLink.href = new URL(link).origin; - - const authorArticles = allArticles.filter(article => article.author === author); - authorArticles.forEach(article => { - const articleDiv = document.createElement('div'); - articleDiv.className = 'modal-article'; - - const title = document.createElement('a'); - title.className = 'modal-article-title'; - title.innerText = article.title; - title.href = article.link; - title.target = '_blank'; - articleDiv.appendChild(title); - - const date = document.createElement('div'); - date.className = 'modal-article-date'; - date.innerText = "--" + article.created.substring(0, 10); - articleDiv.appendChild(date); - - modalArticlesContainer.appendChild(articleDiv); - }); - - // 设置类名以触发显示动画 - modal.style.display = 'block'; - setTimeout(() => { - modal.classList.add('modal-open'); - }, 10); // 确保显示动画触发 - } - - // 隐藏模态框的函数 - function hideModal() { - const modal = document.getElementById('modal'); - modal.classList.remove('modal-open'); - modal.addEventListener('transitionend', () => { - modal.style.display = 'none'; - }, { once: true }); - } - - // 初始加载 - loadMoreArticles(); - - // 加载更多按钮点击事件 - document.getElementById('load-more-btn').addEventListener('click', loadMoreArticles); - - // 点击遮罩层关闭模态框 - window.onclick = function(event) { - const modal = document.getElementById('modal'); - if (event.target === modal) { - hideModal(); - } - }; -}); diff --git a/static/styles.css b/static/styles.css deleted file mode 100644 index 8717593..0000000 --- a/static/styles.css +++ /dev/null @@ -1,371 +0,0 @@ -/* 浅色模式颜色 */ -[data-theme=light] { - --card-title-color: #000000; - --body-background-color: #f4f4f9; - --random-container-title-color: #000000; - --random-article-bg-color: white; - --random-article-shadow-color: rgba(0, 0, 0, 0.1); - --random-container-hover-color: #3498db; - --random-author-color: gray; - --random-title-color: #000000; - --modal-bg-color: rgba(255, 255, 255, 0.5); - --modal-bg-blur: 25px; - --modal-content-bg-color: rgba(239, 250, 255, 0.7); - --modal-content-border-color: #ccc; - --modal-article-title-color: #000000; - --modal-article-date-color: #313131; - --load-more-btn-bg-color: white; - --load-more-btn-border-color: #b5b5b5; - --load-more-btn-hover-color: #0088ff; - --card-bg-color: white; - --card-border-color: #e3e8f7; - --card-title-hover-color: #007bff; - --card-author-color: #313131; - --card-author-bg-color: white; - --card-author-shadow-color: rgba(0, 0, 0, 0.1); -} - -/* 深色模式颜色 */ -[data-theme=dark] { - --card-title-color: #ffffff; - --body-background-color: #181818; - --random-container-title-color: #ffffff; - --random-article-bg-color: #2c2c2c; - --random-article-shadow-color: rgba(255, 255, 255, 0.1); - --random-container-hover-color: #3498db; - --random-author-color: #b3b3b3; - --random-title-color: #ffffff; - --modal-bg-color: rgba(0, 0, 0, 0.3); - --modal-bg-blur: 25px; - --modal-content-bg-color: rgba(20, 20, 20, 0.5); - --modal-content-border-color: #42444a; - --modal-article-title-color: #ffffff; - --modal-article-date-color: #b3b3b3; - --load-more-btn-bg-color: #2c2c2c; - --load-more-btn-border-color: #42444a; - --load-more-btn-hover-color: #0088ff; - --card-bg-color: #2c2c2c; - --card-border-color: #42444a; - --card-title-hover-color: #0088ff; - --card-author-color: #dddddd; - --card-author-bg-color: #2c2c2c; - --card-author-shadow-color: rgba(255, 255, 255, 0.1); -} - -/* 以下是原有样式，使用新定义的变量 */ -body { - font-family: Arial, sans-serif; - background-color: var(--body-background-color); - margin: 0px; - padding: 20px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; -} - -/* 随机友链文章卡片 */ -#random-article { - display: flex; - position: relative; - width: 100%; - margin: 10px 20px; - background-color: var(--random-article-bg-color); - border-radius: 10px; - box-shadow: 0 4px 8px var(--random-article-shadow-color); - height: 210px; -} - -.random-container { - position: relative; - margin: 20px; - width: 100%; - height: 170px; -} - -.random-container:hover .random-title { - font-size: 32px; -} - -.random-author { - font-size: 14px; - color: var(--random-author-color); - margin-bottom: 10px; -} - -.random-container-title { - color: var(--random-container-title-color); - font-size: 20px; - font-weight: 700; - margin-bottom: 20px; -} - -.random-link-button { - position: absolute; - bottom: 20px; - right: 20px; - padding: 10px 20px; - border: none; - border-radius: 20px; - background-color: var(--random-container-hover-color); - color: #fff; - cursor: pointer; - font-size: 14px; - transition: background-color 0.3s ease-in-out; -} - -.random-title { - margin-bottom: 10px; - font-size: 30px; - color: var(--random-title-color); - transition: font-size 0.3s ease-in-out; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* 模态框样式 */ -.modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--modal-bg-color); - backdrop-filter: blur(var(--modal-bg-blur)); - /* 应用高斯模糊效果，可以根据需要调整模糊程度 */ - -webkit-backdrop-filter: blur(var(--modal-bg-blur)); - /* 兼容性前缀，适用于一些旧版本的浏览器 */ - z-index: 999; - opacity: 0; - /* 初始透明度 */ - visibility: hidden; - /* 初始不可见 */ - transition: opacity 0.3s; - /* 过渡效果，持续时间为 0.3 秒 */ -} - -.modal-open { - opacity: 1; - /* 透明度变为完全不透明 */ - visibility: visible; - /* 可见 */ -} - -.modal-content { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 320px; - /* transform: translate(-50%, -50%); */ - background-color: var(--modal-content-bg-color); - padding: 20px; - border: 1px solid var(--modal-content-border-color); - z-index: 1000; - max-height: 90%; - overflow-y: auto; - border-radius: 20px; - transition: opacity 0.3s; - /* 过渡效果，持续时间为 0.3 秒 */ -} - -@media screen and (max-width: 400px) { - .modal-content { - width: 80%; - } -} - -#modal-author-avatar { - display: block; - margin: 0 auto 10px; - /* 垂直方向上自动居中，底部留出间距 */ - border-radius: 50%; - /* 圆形图标 */ - width: 80px; - height: 80px; -} - -#modal-author-name-link { - display: block; - text-align: center; - font-size: 15px; - margin: 25px 0; - color: var(--random-container-hover-color); - text-decoration: none; -} - -#modal-author-name-link:hover { - text-decoration: underline; -} - -.modal-content hr { - margin: 20px 0; -} - -#modal-articles-container { - border-top: var(--random-container-hover-color) double 2px; - margin-top: 20px; - padding-top: 10px; -} - -.modal-article { - display: flex; - flex-wrap: wrap; - /* This property allows the elements to wrap onto multiple lines */ - margin-bottom: 10px; - padding-bottom: 10px; - border-bottom: var(--random-container-hover-color) dashed 1px; -} - -.modal-article .modal-article-title { - font-size: 18px; - cursor: pointer; - color: var(--modal-article-title-color); - height: 2.5em; /* 两行高度 */ - width: 100%; - margin-bottom: 5px; - text-decoration: none; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} - -.modal-article .modal-article-title:hover { - color: var(--random-container-hover-color); - text-decoration: underline; -} - -.modal-article .modal-article-date { - font-size: 12px; - width: 100%; - color: var(--modal-article-date-color); - padding: 5px; - cursor: default; - text-align: right; - /* Add this line to align the text to the right */ -} - -/* 其他样式... */ - -.articles-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 8px; - width: 100%; -} - -#load-more-btn { - font-size: 15px; - color: var(--modal-article-date-color); - background-color: var(--load-more-btn-bg-color); - margin-top: 20px; - width: 200px; - border-radius: 20px; - padding: 3px; - border: var(--load-more-btn-border-color) solid 1px; - transition: all 0.3s; -} - -#load-more-btn:hover { - background-color: var(--load-more-btn-hover-color); - width: 300px; - color: white; -} - -.card { - background-color: var(--card-bg-color); - border-radius: 10px; - padding: 10px; - border: 1px solid var(--card-border-color); - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: space-between; - height: 120px; -} - -.card-title { - color: var(--card-title-color); - z-index: 1; - font-size: 17px; - cursor: pointer; - margin-bottom: 10px; - line-height: 1.5; - max-height: 4.5em; - /* 三行高度 */ - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - transition: color 0.3s; - /* 添加过渡效果 */ -} - -.card-title:hover { - /* 字体变成蓝色，下划线 */ - color: var(--card-title-hover-color); - text-decoration: underline; -} - -.card-author, -.card-date { - font-size: 12px; - color: var(--card-author-color); - padding: 5px; - /* 内边距 */ - transition: box-shadow 0.2s; - /* 过渡效果 */ -} - -.card-author:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - /* 鼠标悬停时加深阴影 */ -} - -.card-author { - cursor: pointer; - background-color: var(--card-author-bg-color); - /* 白色背景 */ - box-shadow: 0 2px 4px var(--card-author-shadow-color); - /* 阴影 */ - border-radius: 15px; - /* 圆角 */ - display: flex; - padding-right: 10px; - width: fit-content; - align-items: center; -} - -.card-author img { - border-radius: 50%; - width: 15px; - height: 15px; - margin-right: 5px; -} - -.card-date { - position: absolute; - z-index: 1; - bottom: 10px; - cursor: default; - right: 10px; - display: flex; - align-items: center; -} - -.card-bg { - z-index: 0; - border-radius: 50%; - position: absolute; - bottom: -20px; - right: -15px; - width: 140px; - height: 140px; - opacity: 0.4; -} \ No newline at end of file