🤩完善文档，删除冗余文件，准备撰写文章
This commit is contained in:
parent
2e6cc22572
commit
82d824865b
29
index.html
29
index.html
@ -5,23 +5,24 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>文章卡片展示</title>
|
<title>文章卡片展示</title>
|
||||||
<link rel="stylesheet" href="./static/styles.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="random-article"></div>
|
<div id="friend-circle-lite-root"></div>
|
||||||
<div id="articles-container" class="articles-container"></div>
|
<script>
|
||||||
<button id="load-more-btn">显示更多</button>
|
if (typeof UserConfig === 'undefined') {
|
||||||
|
var UserConfig = {
|
||||||
<!-- 模态框结构 -->
|
// 填写你的fc Lite地址
|
||||||
<div id="modal" class="modal">
|
private_api_url: 'https://fc.liushen.fun/',
|
||||||
<div class="modal-content">
|
// 点击加载更多时，一次最多加载几篇文章，默认20
|
||||||
<img id="modal-author-avatar" src="" alt="">
|
page_turning_number: 20,
|
||||||
<a id="modal-author-name-link"></a>
|
// 头像加载失败时，默认头像地址
|
||||||
<div id="modal-articles-container"></div>
|
error_img: 'https://pic.imgdb.cn/item/6695daa4d9c307b7e953ee3d.jpg', // https://cdn.qyliu.top/i/2024/03/22/65fcea97b3ca6.png
|
||||||
</div>
|
}
|
||||||
</div>
|
}
|
||||||
<script src="./static/script.js"></script>
|
</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>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
173
readme.md
173
readme.md
@ -2,38 +2,74 @@
|
|||||||
|
|
||||||
# Friend-Circle-Lite
|
# 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 本仓库:**
|
1. **Fork 本仓库:**
|
||||||
点击页面右上角的 Fork 按钮，将本仓库复制到你自己的 GitHub 账号下。
|
点击页面右上角的 Fork 按钮，将本仓库复制到你自己的`GitHub`账号下。
|
||||||
|
|
||||||
2. **配置 Secrets:**
|
2. **配置 Secrets:**
|
||||||
在你 Fork 的仓库中，依次进入 `Settings` -> `Secrets` -> `New repository secret`，添加以下 Secrets：
|
在你 Fork 的仓库中，依次进入 `Settings` -> `Secrets` -> `New repository secret`，添加以下 Secrets：
|
||||||
- `PAT_TOKEN`: GitHub 的个人访问令牌，用于访问 GitHub API。
|
- `PAT_TOKEN`: GitHub 的个人访问令牌，用于访问 GitHub API。
|
||||||
- `SMTP_PWD`: SMTP 服务器的密码，用于发送电子邮件。
|
- `SMTP_PWD`: SMTP 服务器的密码，用于发送电子邮件。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2. **配置action权限：**
|
||||||
|
|
||||||
|
在设置中，点击`action`，拉到最下面，勾选`Read and write permissions`选项并保存，确保action有读写权限。
|
||||||
|
|
||||||
3. **启用 GitHub Actions:**
|
3. **启用 GitHub Actions:**
|
||||||
GitHub Actions 已经配置好在仓库的 `.github/workflows/*.yml` 文件中，当代码推送或定时触发时将自动执行。
|
GitHub Actions 已经配置好在仓库的 `.github/workflows/*.yml` 文件中，当到一定时间时将自动执行，也可以手动运行。
|
||||||
其中，每个action功能如下：
|
其中，每个action功能如下：
|
||||||
|
|
||||||
- `friend_circle_lite.yml`实现核心功能，爬取并发送邮箱；
|
- `friend_circle_lite.yml`实现核心功能，爬取并发送邮箱；
|
||||||
- `deal_subscribe_issue.yml`处理固定格式的issue，打上固定标签，评论，并关闭issue；
|
- `deal_subscribe_issue.yml`处理固定格式的issue，打上固定标签，评论，并关闭issue；
|
||||||
|
|
||||||
4. **设置issue格式：**
|
4. **设置issue格式：**
|
||||||
这个我已经设置好了，你只需要检查issue部分是否有对应格式即可。
|
这个我已经设置好了，你只需要检查issue部分是否有对应格式即可，可以自行修改对应参数以进行自定义。
|
||||||
|
|
||||||
5. **定制配置:**
|
### 配置选项
|
||||||
如果需要修改爬虫设置或邮件模板等配置，可以修改仓库中的 `config.yaml` 文件：
|
|
||||||
|
1. 如果需要修改爬虫设置或邮件模板等配置，需要修改仓库中的 `config.yaml` 文件：
|
||||||
|
|
||||||
- **爬虫相关配置**
|
- **爬虫相关配置**
|
||||||
使用 `requests` 库实现友链文章的爬取，并将结果存储到根目录下的 `all.json` 文件中。
|
使用 `requests` 库实现友链文章的爬取，并将结果存储到根目录下的 `all.json` 文件中。
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
spider_settings:
|
spider_settings:
|
||||||
enable: true
|
enable: true
|
||||||
@ -41,8 +77,15 @@
|
|||||||
article_count: 5
|
article_count: 5
|
||||||
```
|
```
|
||||||
|
|
||||||
|
`enable`：开启或关闭，默认开启；
|
||||||
|
|
||||||
|
`json_url`：友链朋友圈通用爬取格式第一种（下方有配置方法）;
|
||||||
|
|
||||||
|
`article_count`：每个作者留存文章个数。
|
||||||
|
|
||||||
- **邮箱推送功能配置**
|
- **邮箱推送功能配置**
|
||||||
暂未实现，预留用于将每天的友链文章更新推送给指定邮箱。
|
暂未实现，预留用于将每天的友链文章更新推送给指定邮箱。
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
email_push:
|
email_push:
|
||||||
enable: false
|
enable: false
|
||||||
@ -51,8 +94,11 @@
|
|||||||
body_template: "rss_template.html"
|
body_template: "rss_template.html"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**暂未实现**：该部分暂未实现，由于感觉用处不大，保留接口后期酌情更新。
|
||||||
|
|
||||||
- **邮箱 issue 订阅功能配置**
|
- **邮箱 issue 订阅功能配置**
|
||||||
通过 GitHub issue 实现向提取的所有邮箱推送博客更新的功能。
|
通过 GitHub issue 实现向提取的所有邮箱推送博客更新的功能。
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
rss_subscribe:
|
rss_subscribe:
|
||||||
enable: true
|
enable: true
|
||||||
@ -61,8 +107,17 @@
|
|||||||
your_blog_url: https://blog.qyliu.top/
|
your_blog_url: https://blog.qyliu.top/
|
||||||
```
|
```
|
||||||
|
|
||||||
|
`enable`：开启或关闭，默认开启，如果没有配置请关闭。
|
||||||
|
|
||||||
|
`github_username`：github用户名，用来拼接github api地址
|
||||||
|
|
||||||
|
`github_repo`：仓库名称，作用同上。
|
||||||
|
|
||||||
|
`your_blog_url`：用来定时检测是否有最新文章。
|
||||||
|
|
||||||
- **SMTP 配置**
|
- **SMTP 配置**
|
||||||
使用配置中的相关信息实现邮件发送功能。
|
使用配置中的相关信息实现邮件发送功能。
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
smtp:
|
smtp:
|
||||||
email: 3162475700@qq.com
|
email: 3162475700@qq.com
|
||||||
@ -71,9 +126,105 @@
|
|||||||
use_tls: true
|
use_tls: true
|
||||||
```
|
```
|
||||||
|
|
||||||
6. **贡献与定制:**
|
`email`：发件人邮箱地址
|
||||||
|
|
||||||
|
`server`：`SMTP` 服务器地址
|
||||||
|
|
||||||
|
`port`：`SMTP` 端口号
|
||||||
|
|
||||||
|
`use_tls`：是否使用 `tls` 加密
|
||||||
|
|
||||||
|
这部分配置较为复杂，请自行学习使用。
|
||||||
|
|
||||||
|
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
|
||||||
|
<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', // https://cdn.qyliu.top/i/2024/03/22/65fcea97b3ca6.png
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
```
|
||||||
|
|
||||||
|
其中第一个地址填入你自己的地址即可，**注意**尾部带`/`，不要遗漏。
|
||||||
|
|
||||||
|
然后你就可以在前端页面看到我们的结果了。效果图如上展示网站，其中两个文件你可以自行修改，在同目录下我也提供了未压缩版本，有基础的可以很便捷的进行修改。
|
||||||
|
|
||||||
## 问题与贡献
|
## 问题与贡献
|
||||||
|
|
||||||
如果遇到任何问题或有建议，请[提交一个 issue](https://github.com/willow-god/Friend-Circle-Lite/issues)。欢迎贡献代码！
|
如果遇到任何问题或有建议，请[提交一个 issue](https://github.com/willow-god/Friend-Circle-Lite/issues)。欢迎贡献代码！
|
||||||
|
|||||||
BIN
static/1.png
Normal file
BIN
static/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
132
static/script.js
132
static/script.js
@ -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 = `
|
|
||||||
<div class="random-container">
|
|
||||||
<div class="random-container-title">随机钓鱼</div>
|
|
||||||
<div class="random-title">${randomArticle.title}</div>
|
|
||||||
<div class="random-author">作者: ${randomArticle.author}</div>
|
|
||||||
</div>
|
|
||||||
<button class="random-link-button" onclick="window.open('${randomArticle.link}', '_blank')">过去转转</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user