⏱️ 2025年05月12日-20时02分 GitHub Actions定时更新
This commit is contained in:
github-actions[bot]
commit
ec0d773f9c
BIN
bg-dark.webp
Normal file
BIN
bg-dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
bg-light.webp
Normal file
BIN
bg-light.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
72
errors.json
Normal file
72
errors.json
Normal file
@ -0,0 +1,72 @@
|
||||
[
|
||||
[
|
||||
"LINUX DO",
|
||||
"https://linux.do/?source=blog_liushen_fun",
|
||||
"https://p.liiiu.cn/i/2024/11/11/67321caaa4447.webp"
|
||||
],
|
||||
[
|
||||
"听风小屋",
|
||||
"https://blog.ifeng.asia/",
|
||||
"https://p.liiiu.cn/i/2024/03/31/6608e2697634c.png"
|
||||
],
|
||||
[
|
||||
"雾林博客",
|
||||
"https://www.baiwulin.com/",
|
||||
"https://p.liiiu.cn/i/2024/08/02/66ac3b75826cb.webp"
|
||||
],
|
||||
[
|
||||
"陌颜Hao",
|
||||
"https://blog.imoyan.top/",
|
||||
"https://p.liiiu.cn/i/2024/08/04/66af3318f1d1c.webp"
|
||||
],
|
||||
[
|
||||
"Dreamaker",
|
||||
"https://dreamakerr.cn/",
|
||||
"https://p.liiiu.cn/i/2024/06/05/66604a6f8dba9.webp"
|
||||
],
|
||||
[
|
||||
"GuKaifeng",
|
||||
"https://gukaifeng.cn/",
|
||||
"https://p.liiiu.cn/i/2024/04/09/6614ef03406cc.png"
|
||||
],
|
||||
[
|
||||
"晚夜",
|
||||
"https://www.iczrx.cn",
|
||||
"https://p.liiiu.cn/i/2024/10/06/6702aa07d5bd8.webp"
|
||||
],
|
||||
[
|
||||
"SCFC",
|
||||
"https://blog.scfc.top/",
|
||||
"https://p.liiiu.cn/i/2025/03/10/67ce83a222bc9.webp"
|
||||
],
|
||||
[
|
||||
"L1nSn0w",
|
||||
"https://linsnow.cn/",
|
||||
"https://p.liiiu.cn/i/2024/10/03/66fd7a9e365a0.webp"
|
||||
],
|
||||
[
|
||||
"webfem",
|
||||
"https://webfem.com",
|
||||
"https://p.liiiu.cn/i/2025/02/05/67a2f35452a3e.webp"
|
||||
],
|
||||
[
|
||||
"技研录",
|
||||
"https://linmohan.fun/",
|
||||
"https://p.liiiu.cn/i/2025/03/16/67d6eb9ceca73.webp"
|
||||
],
|
||||
[
|
||||
"Eily",
|
||||
"https://ngc2237.love",
|
||||
"https://p.liiiu.cn/i/2025/01/19/678c7bf47c438.webp"
|
||||
],
|
||||
[
|
||||
"虫不知喔",
|
||||
"https://blog.ssyc.moe/",
|
||||
"https://p.liiiu.cn/i/2025/05/03/6815fc6873afb.webp"
|
||||
],
|
||||
[
|
||||
"fishcpy",
|
||||
"https://blog.fishcpy.top/",
|
||||
"https://p.liiiu.cn/i/2025/04/16/67ff9e8d5175d.webp"
|
||||
]
|
||||
]
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
220
index.html
Normal file
220
index.html
Normal file
@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
||||
<meta name="description" content="🐱一个精简版，无后端，且仅利用github action运行的精简版友链朋友圈程序，兼容fc的json格式信息，同时支持推送友圈更新，支持他人订阅个人站点并在更新时发送邮箱推送。">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Friend-Circle-Lite</title>
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('./bg-light.webp');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: fit-content;
|
||||
}
|
||||
#theme-toggle {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.root-container {
|
||||
max-width: 95%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.button {
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 2px solid #007BFF;
|
||||
color: #007BFF;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-author,
|
||||
.card-date {
|
||||
height: fit-content !important;
|
||||
}
|
||||
|
||||
.scroll-down-icon {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
height: 24px;
|
||||
color: #007BFF;
|
||||
animation: bounce 1.5s infinite;
|
||||
}
|
||||
.scroll-down-icon::before,
|
||||
.scroll-down-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: .8;
|
||||
border-left: 3px solid #007BFF;
|
||||
border-bottom: 3px solid #007BFF;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
.scroll-down-icon::after {
|
||||
top: 80%;
|
||||
opacity: .6;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
opacity: .6;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] body {
|
||||
background-image: url('./bg-dark.webp');
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .container {
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="dark"] p {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .button {
|
||||
background-color: #333333;
|
||||
border: 2px solid #007BFF;
|
||||
color: #007BFF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .button:hover {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .scroll-down-icon {
|
||||
color: #007BFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<img src="./favicon.ico" alt="Avatar" class="avatar">
|
||||
<p>Friend-Circle-Lite<br>服务已运行</p>
|
||||
<div class="button-container">
|
||||
<a href="https://blog.liushen.fun/posts/4dc716ec/" class="button" target="_blank">查看文档</a>
|
||||
<a href="/all.json" class="button">测试接口</a>
|
||||
</div>
|
||||
<a href="#" class="scroll-down-icon" id="scroll-down-button"></a>
|
||||
</div>
|
||||
<div class="root-container">
|
||||
<div id="friend-circle-lite-root"></div>
|
||||
</div>
|
||||
<button id="theme-toggle">暗色模式</button>
|
||||
<script>
|
||||
if (typeof UserConfig === 'undefined') {
|
||||
var UserConfig = {
|
||||
// 填写你的fc Lite地址
|
||||
private_api_url: './',
|
||||
// 点击加载更多时，一次最多加载几篇文章，默认20
|
||||
page_turning_number: 24,
|
||||
// 头像加载失败时，默认头像地址
|
||||
error_img: './favicon.ico' // 'https://i.p-i.vip/30/20240815-66bced9226a36.webp'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
const scrollButton = document.getElementById('scroll-down-button');
|
||||
const targetElement = document.getElementById('friend-circle-lite-root');
|
||||
scrollButton.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const button = document.getElementById('theme-toggle');
|
||||
button.addEventListener('click', () => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
button.textContent = newTheme === 'light' ? '暗色模式' : '亮色模式';
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="./main/fclite.css">
|
||||
<script src="./main/fclite.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
402
main/fclite.css
Normal file
402
main/fclite.css
Normal file
@ -0,0 +1,402 @@
|
||||
:root {
|
||||
--text-color-light: #000000;
|
||||
--text-color-dark: #F7F7FA;
|
||||
--background-color-light: #f4f4f9;
|
||||
--background-color-dark: #181818;
|
||||
--container-bg-color-light: white;
|
||||
--container-bg-color-dark: #1D1E22;
|
||||
--hover-color: #3498db;
|
||||
--author-color-light: gray;
|
||||
--author-color-dark: #b3b3b3;
|
||||
--modal-bg-blur: 25px;
|
||||
--shadow-color-light: rgba(0, 0, 0, 0.1);
|
||||
--shadow-color-dark: rgba(255, 255, 255, 0.1);
|
||||
--border-color-light: #e3e8f7;
|
||||
--border-color-dark: #42444a;
|
||||
}
|
||||
|
||||
[data-theme=light] {
|
||||
--text-color: var(--text-color-light);
|
||||
--background-color: var(--background-color-light);
|
||||
--tag-bg-color: #bfbfbf;
|
||||
--container-bg-color: var(--container-bg-color-light);
|
||||
--author-color: var(--author-color-light);
|
||||
--shadow-color: var(--shadow-color-light);
|
||||
--border-color: var(--border-color-light);
|
||||
--modal-bg-color: rgba(255, 255, 255, 0.5);
|
||||
--modal-content-bg-color: rgba(239, 250, 255, 0.5);
|
||||
--load-more-btn-bg-color: var(--container-bg-color);
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
--text-color: var(--text-color-dark);
|
||||
--background-color: var(--background-color-dark);
|
||||
--tag-bg-color: #474747;
|
||||
--container-bg-color: var(--container-bg-color-dark);
|
||||
--author-color: var(--author-color-dark);
|
||||
--shadow-color: var(--shadow-color-dark);
|
||||
--border-color: var(--border-color-dark);
|
||||
--modal-bg-color: rgba(0, 0, 0, 0.3);
|
||||
--modal-content-bg-color: rgba(20, 20, 20, 0.5);
|
||||
--load-more-btn-bg-color: var(--container-bg-color);
|
||||
}
|
||||
|
||||
#friend-circle-lite-root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#random-article {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
background-color: var(--container-bg-color);
|
||||
border-radius: 10px;
|
||||
border:1px solid var(--border-color);
|
||||
height: 210px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
.random-container {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
width: 90%;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.random-container:hover .random-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.random-author {
|
||||
font-size: 14px;
|
||||
color: var(--author-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.random-container-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.random-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease-in-out;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.random-button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.random-button-container a {
|
||||
margin-right: 10px;
|
||||
color: #aaaaaa !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.random-link-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: var(--hover-color);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.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 ease-in-out, visibility 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) translateY(-50px);
|
||||
width: 350px;
|
||||
background-color: var(--modal-content-bg-color);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
z-index: 1000;
|
||||
max-height: 90%;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modal.modal-open .modal-content {
|
||||
transform: translate(-50%, -50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content:hover #modal-bg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 440px) {
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
#modal-bg {
|
||||
position: absolute;
|
||||
filter: blur(5px);
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
border-radius: 125px 125px 12px 125px !important;
|
||||
margin: 0 !important;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
right: -20px;
|
||||
bottom: -20px;
|
||||
transition: transform 0.6s ease !important;
|
||||
}
|
||||
|
||||
#modal-author-avatar {
|
||||
display: block;
|
||||
margin: 5px auto !important;
|
||||
border-radius: 50% !important;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
#modal-author-name-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
margin: 15px 0;
|
||||
color: var(--hover-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#modal-author-name-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.modal-content hr {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#modal-articles-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-top: var(--hover-color) double 2px;
|
||||
margin-top: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.modal-article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: var(--hover-color) dashed 1px;
|
||||
}
|
||||
|
||||
.modal-article .modal-article-title {
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
max-height: 2.5em;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
text-decoration: none;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.modal-article .modal-article-title:hover {
|
||||
color: var(--hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.modal-article .modal-article-date {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
color: var(--author-color);
|
||||
padding: 5px;
|
||||
cursor: default;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.articles-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--container-bg-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 150px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
#random-article:hover {
|
||||
border: 1px solid var(--hover-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
z-index: 1;
|
||||
font-size: 17px;
|
||||
color: var(--text-color);
|
||||
font-weight: 520;
|
||||
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;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card-title:hover {
|
||||
color: var(--hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-author,
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: var(--author-color);
|
||||
padding: 5px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.card-author:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-author {
|
||||
cursor: pointer;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
padding-right: 10px;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
#friend-circle-lite-root .card-author img {
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 2px !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 10px;
|
||||
cursor: default;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#friend-circle-lite-root .card-bg {
|
||||
cursor: default;
|
||||
z-index: 0;
|
||||
border-radius: 50% !important;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: -16px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
opacity: 0.4;
|
||||
transition: transform 0.6s ease, bottom 0.3s ease, right 0.3s ease;
|
||||
}
|
||||
|
||||
#friend-circle-lite-root .card:hover .card-bg {
|
||||
transform: scale(1.1);
|
||||
bottom: -10px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
#load-more-btn {
|
||||
color: var(--text-color);
|
||||
font-size: 15px;
|
||||
background-color: var(--container-bg-color);
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 3px;
|
||||
transition: all 0.3s;
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#load-more-btn:hover {
|
||||
background-color: var(--hover-color);
|
||||
width: 300px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#stats-container {
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#stats-container > * {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#stats-container a {
|
||||
color: var(--author-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
238
main/fclite.js
Normal file
238
main/fclite.js
Normal file
@ -0,0 +1,238 @@
|
||||
function initialize_fc_lite() {
|
||||
|
||||
// 用户配置
|
||||
// 设置默认配置
|
||||
UserConfig = {
|
||||
private_api_url: UserConfig?.private_api_url || "",
|
||||
page_turning_number: UserConfig?.page_turning_number || 20, // 默认20篇
|
||||
error_img: UserConfig?.error_img || "https://fastly.jsdelivr.net/gh/willow-god/Friend-Circle-Lite@latest/static/favicon.ico" // 默认头像
|
||||
};
|
||||
|
||||
const root = document.getElementById('friend-circle-lite-root');
|
||||
|
||||
if (!root) return; // 确保根元素存在
|
||||
|
||||
// 清除之前的内容
|
||||
root.innerHTML = '';
|
||||
|
||||
const randomArticleContainer = document.createElement('div');
|
||||
randomArticleContainer.id = 'random-article';
|
||||
root.appendChild(randomArticleContainer);
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'articles-container';
|
||||
container.id = 'articles-container';
|
||||
root.appendChild(container);
|
||||
|
||||
const loadMoreBtn = document.createElement('button');
|
||||
loadMoreBtn.id = 'load-more-btn';
|
||||
loadMoreBtn.innerText = '再来亿点';
|
||||
root.appendChild(loadMoreBtn);
|
||||
|
||||
// 创建统计信息容器
|
||||
const statsContainer = document.createElement('div');
|
||||
statsContainer.id = 'stats-container';
|
||||
root.appendChild(statsContainer);
|
||||
|
||||
let start = 0; // 记录加载起始位置
|
||||
let allArticles = []; // 存储所有文章
|
||||
|
||||
function loadMoreArticles() {
|
||||
const cacheKey = 'friend-circle-lite-cache';
|
||||
const cacheTimeKey = 'friend-circle-lite-cache-time';
|
||||
const cacheTime = localStorage.getItem(cacheTimeKey);
|
||||
const now = new Date().getTime();
|
||||
|
||||
if (cacheTime && (now - cacheTime < 10 * 60 * 1000)) { // 缓存时间小于10分钟
|
||||
const cachedData = JSON.parse(localStorage.getItem(cacheKey));
|
||||
if (cachedData) {
|
||||
processArticles(cachedData);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
fetch(`${UserConfig.private_api_url}all.json`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
localStorage.setItem(cacheKey, JSON.stringify(data));
|
||||
localStorage.setItem(cacheTimeKey, now.toString());
|
||||
processArticles(data);
|
||||
})
|
||||
.finally(() => {
|
||||
loadMoreBtn.innerText = '再来亿点'; // 恢复按钮文本
|
||||
});
|
||||
}
|
||||
|
||||
function processArticles(data) {
|
||||
allArticles = data.article_data;
|
||||
// 处理统计数据
|
||||
const stats = data.statistical_data;
|
||||
statsContainer.innerHTML = `
|
||||
<div>Powered by: <a href="https://github.com/willow-god/Friend-Circle-Lite" target="_blank">FriendCircleLite</a><br></div>
|
||||
<div>Designed By: <a href="https://www.liushen.fun/" target="_blank">LiuShen</a><br></div>
|
||||
<div>订阅:${stats.friends_num} 活跃:${stats.active_num} 总文章数:${stats.article_num}<br></div>
|
||||
<div>更新时间:${stats.last_updated_time}</div>
|
||||
`;
|
||||
|
||||
displayRandomArticle(); // 显示随机友链卡片
|
||||
|
||||
const articles = allArticles.slice(start, start + UserConfig.page_turning_number);
|
||||
|
||||
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.className = 'no-lightbox';
|
||||
authorImg.src = article.avatar || UserConfig.error_img; // 使用默认头像
|
||||
authorImg.onerror = () => authorImg.src = UserConfig.error_img; // 头像加载失败时使用默认头像
|
||||
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.innerText = "🗓️" + article.created.substring(0, 10);
|
||||
card.appendChild(date);
|
||||
|
||||
const bgImg = document.createElement('img');
|
||||
bgImg.className = 'card-bg no-lightbox';
|
||||
bgImg.src = article.avatar || UserConfig.error_img;
|
||||
bgImg.onerror = () => bgImg.src = UserConfig.error_img; // 头像加载失败时使用默认头像
|
||||
card.appendChild(bgImg);
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
start += UserConfig.page_turning_number;
|
||||
|
||||
if (start >= allArticles.length) {
|
||||
loadMoreBtn.style.display = 'none'; // 隐藏按钮
|
||||
}
|
||||
}
|
||||
|
||||
// 显示随机文章的逻辑
|
||||
function displayRandomArticle() {
|
||||
const randomArticle = allArticles[Math.floor(Math.random() * allArticles.length)];
|
||||
randomArticleContainer.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>
|
||||
<div class="random-button-container">
|
||||
<a href="#" id="refresh-random-article">刷新</a>
|
||||
<button class="random-link-button" onclick="window.open('${randomArticle.link}', '_blank')">过去转转</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 为刷新按钮添加事件监听器
|
||||
const refreshBtn = document.getElementById('refresh-random-article');
|
||||
refreshBtn.addEventListener('click', function (event) {
|
||||
event.preventDefault(); // 阻止默认的跳转行为
|
||||
displayRandomArticle(); // 调用显示随机文章的逻辑
|
||||
});
|
||||
}
|
||||
|
||||
function showAuthorArticles(author, avatar, link) {
|
||||
// 如果不存在，则创建模态框结构
|
||||
if (!document.getElementById('fclite-modal')) {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'modal';
|
||||
modal.className = 'modal';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<img id="modal-author-avatar" src="" alt="">
|
||||
<a id="modal-author-name-link"></a>
|
||||
<div id="modal-articles-container"></div>
|
||||
<img id="modal-bg" src="" alt="">
|
||||
</div>
|
||||
`;
|
||||
root.appendChild(modal);
|
||||
}
|
||||
|
||||
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');
|
||||
const modalBg = document.getElementById('modal-bg');
|
||||
|
||||
modalArticlesContainer.innerHTML = ''; // 清空之前的内容
|
||||
modalAuthorAvatar.src = avatar || UserConfig.error_img; // 使用默认头像
|
||||
modalAuthorAvatar.onerror = () => modalAuthorAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像
|
||||
modalBg.src = avatar || UserConfig.error_img; // 使用默认头像
|
||||
modalBg.onerror = () => modalBg.src = UserConfig.error_img; // 头像加载失败时使用默认头像
|
||||
modalAuthorNameLink.innerText = author;
|
||||
modalAuthorNameLink.href = new URL(link).origin;
|
||||
|
||||
const authorArticles = allArticles.filter(article => article.author === author);
|
||||
// 仅仅取前五个，防止文章过多导致模态框过长，如果不够五个则全部取出
|
||||
authorArticles.slice(0, 4).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';
|
||||
root.removeChild(modal);
|
||||
}, { once: true });
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
loadMoreArticles();
|
||||
|
||||
// 加载更多按钮点击事件
|
||||
loadMoreBtn.addEventListener('click', loadMoreArticles);
|
||||
|
||||
// 点击遮罩层关闭模态框
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('modal');
|
||||
if (event.target === modal) {
|
||||
hideModal();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
function whenDOMReady() {
|
||||
initialize_fc_lite();
|
||||
}
|
||||
|
||||
whenDOMReady();
|
||||
document.addEventListener("pjax:complete", initialize_fc_lite);
|
||||
35
readme.md
Normal file
35
readme.md
Normal file
@ -0,0 +1,35 @@
|
||||
# RSS 订阅前端页面
|
||||
|
||||
这是一个用于展示 RSS 订阅内容的简单 HTML 页面。该前端页面用于渲染从后端获取的 RSS 订阅数据。本分支仅包含用于展示的静态资源（HTML、CSS、JS）。
|
||||
|
||||
## 功能
|
||||
|
||||
- **展示 RSS 订阅内容**：可以显示 RSS 订阅文章的标题、描述和发布时间。
|
||||
- **简洁设计**：简单直观的用户界面，适用于浏览和查看 RSS 内容。
|
||||
- **响应式布局**：适配不同设备的浏览体验。
|
||||
|
||||
## 部署到网站
|
||||
|
||||
如果你已经正确托管本分支到静态托管平台，你可以通过以下几个步骤将数据渲染到你的前端页面：
|
||||
|
||||
在前端页面的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://i.p-i.vip/30/20240815-66bced9226a36.webp',
|
||||
}
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
其中第一个地址填入你自己的地址即可，**注意**尾部带`/`，不要遗漏。
|
||||
Loading…
x
Reference in New Issue
Block a user