😮大致也许实现了功能！
This commit is contained in:
parent
22bfe9f333
commit
d6aecc34bf
@ -16,7 +16,7 @@
|
||||
<!-- 模态框结构 -->
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<img id="modal-author-avatar" src="modal-author-avatar" alt="">
|
||||
<img id="modal-author-avatar" src="" alt="">
|
||||
<a id="modal-author-name-link"></a>
|
||||
<div id="modal-articles-container"></div>
|
||||
</div>
|
||||
|
||||
356
src/fclite.css
Normal file
356
src/fclite.css
Normal file
@ -0,0 +1,356 @@
|
||||
/* 公共颜色变量 */
|
||||
: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.7);
|
||||
--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);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-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;
|
||||
}
|
||||
|
||||
.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(--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-link-button {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 400px;
|
||||
background-color: var(--modal-content-bg-color);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color);
|
||||
z-index: 1000;
|
||||
max-height: 95%;
|
||||
overflow-y: auto;
|
||||
border-radius: 20px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
@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;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#modal-author-name-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
margin: 25px 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 {
|
||||
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 {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
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(--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;
|
||||
}
|
||||
|
||||
.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;
|
||||
-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;
|
||||
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(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
padding-right: 10px;
|
||||
width: fit-content;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#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: 5px;
|
||||
cursor: default;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#friend-circle-lite-root .card-bg {
|
||||
cursor: default;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: -16px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#load-more-btn {
|
||||
color: var(--text-color);
|
||||
font-size: 15px;
|
||||
background-color: var(--container-bg-color);
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
border-radius: 20px;
|
||||
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;
|
||||
}
|
||||
203
src/fclite.js
Normal file
203
src/fclite.js
Normal file
@ -0,0 +1,203 @@
|
||||
function initialize_fc_lite() {
|
||||
const root = document.getElementById('friend-circle-lite-root');
|
||||
|
||||
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 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>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal); // this.body 改为 document.body
|
||||
|
||||
// 创建统计信息容器
|
||||
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.qyliu.top/" target="_blank">LiuShen</a><br></div>
|
||||
<div>订阅:${stats.friends_num} 活跃:${stats.active_num} 总文章数:${stats.article_num}<br></div>
|
||||
<div>更新时间:${stats.last_updated_time}</div>
|
||||
`;
|
||||
|
||||
// 随机友链卡片
|
||||
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>
|
||||
<button class="random-link-button" onclick="window.open('${randomArticle.link}', '_blank')">过去转转</button>
|
||||
`;
|
||||
|
||||
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 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 || UserConfig.error_img; // 使用默认头像
|
||||
modalAuthorAvatar.onerror = () => modalAuthorAvatar.src = UserConfig.error_img; // 头像加载失败时使用默认头像
|
||||
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();
|
||||
|
||||
// 加载更多按钮点击事件
|
||||
loadMoreBtn.addEventListener('click', loadMoreArticles);
|
||||
|
||||
// 点击遮罩层关闭模态框
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('modal');
|
||||
if (event.target === modal) {
|
||||
hideModal();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
initialize_fc_lite();
|
||||
});
|
||||
|
||||
document.addEventListener('pjax:complete', function() {
|
||||
initialize_fc_lite();
|
||||
});
|
||||
3
src/fclite.min.css
vendored
Normal file
3
src/fclite.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
src/fclite.min.js
vendored
Normal file
1
src/fclite.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user