From 311f5d3304c4d32169469ae45c2eaa5ff15546a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E7=A5=9E?= <3162475700@qq.com>
Date: Sun, 7 Jul 2024 16:08:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=A9=E6=B7=BB=E5=8A=A0=E5=89=8D?=
=?UTF-8?q?=E7=AB=AF=E5=B1=95=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 14 +++++
static/img/rili.png | Bin 0 -> 951 bytes
static/script.js | 62 +++++++++++++++++++++
static/styles.css | 127 ++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 203 insertions(+)
create mode 100644 index.html
create mode 100644 static/img/rili.png
create mode 100644 static/script.js
create mode 100644 static/styles.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c0cf055
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ 文章卡片展示
+
+
+
+
+
+
+
+
diff --git a/static/img/rili.png b/static/img/rili.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaba4d57c8586feb4719eee19d40a188db42ae9b
GIT binary patch
literal 951
zcmV;o14#UdP)Px&aY;l$RCr$PTU~P6Fc8)n4$zVwfIPrVPZ78YJVFkUJ$Vs55=nOo>2WV*z
zK)fBXu(pIhBB7Mlkii(r&Hb})ycRX+2bPc5QbQwg96ZjbaoqdmsHYEUfqNh@B
z9ks1{Ocuz_rpN?9oc?|suH^s}_U%+8I7W3Z#&*7pePnY|D~?!~8NdLL!111?jjcm<
z+m+L~EQTBa%wAmTUX;mvHxB>>OZ6V|sTt4$&@!M+fmQ=5i=fH26T(>btyZ}Ugs>9Lh`EvZuEITuTF7r9c{8K}lPOS65?zj&tl7*CqMj3L@o_ynXKH;0D70
zUi7O_KR5u&XOY#TA504Hq8|Yno18(4G$)7@@R9q$qyR7aE|23H&j6p%4?+Xj2)R)H
zU_OU^N5An5C~bWeUU`Gu1z7s~IErtq2Kjf9)N~iAu_CB)%!L3pIt5H`klF&G0$O=Z&R1^M(HOzr6Qm$2Pls7`cKKyy8%0~Y
zyVu)KB5Rw&eyJVB*8+^6i&-}a!dns@*E&b)S^yaP5s*O(KtRFr;_A&a
Z;2%{!4{k@QHAl4
literal 0
HcmV?d00001
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..2781486
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,62 @@
+document.addEventListener("DOMContentLoaded", function () {
+ const container = document.getElementById('articles-container');
+ let start = 0;
+ const batchSize = 20; // 每次加载的卡片数量
+
+ function loadMoreArticles() {
+ fetch('./all.json')
+ .then(response => response.json())
+ .then(data => {
+ const articles = data.article_data.slice(start, start + batchSize);
+ 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);
+
+ const date = document.createElement('div');
+ date.className = 'card-date';
+ const dateImg = document.createElement('img');
+ dateImg.src = './static/img/rili.png'; // 替换为实际的图标路径
+ date.appendChild(dateImg);
+ 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';
+ }
+ });
+ }
+
+ // 初始加载
+ loadMoreArticles();
+
+ // 加载更多按钮点击事件
+ document.getElementById('load-more-btn').addEventListener('click', loadMoreArticles);
+});
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..7db17ee
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,127 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f9;
+ margin: 0;
+ padding: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.articles-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 8px;
+ width: 100%;
+ max-width: 1200px;
+}
+
+#load-more-btn {
+ font-size: 15px;
+ background-color: white;
+ margin-top: 20px;
+ width: 50%;
+ border-radius: 20px;
+ padding: 3px;
+ border:#b5b5b5 solid 1px;
+ transition: all 0.3s;
+}
+
+#load-more-btn:hover {
+ background-color: #0088ff;
+ width: 52%;
+ color: white;
+
+}
+
+.card {
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 120px;
+}
+
+.card-title {
+ font-size: 17px;
+ 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: #007bff;
+ text-decoration: underline;
+}
+
+.card-author,
+.card-date {
+ display: inline-block;
+ font-size: 12px;
+ color: #888;
+ background-color: white; /* 白色背景 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+ border-radius: 15px; /* 圆角 */
+ padding: 5px; /* 内边距 */
+ transition: box-shadow 0.2s; /* 过渡效果 */
+}
+
+.card-author:hover,
+.card-date:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时加深阴影 */
+}
+
+.card-author {
+ 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: 15px;
+ right: 15px;
+ display: flex;
+ align-items: center;
+}
+
+.card-date img {
+ width: 15px;
+ height: 15px;
+ border-radius: 20%;
+ margin-right: 5px;
+}
+
+.card-bg {
+ z-index: 0;
+ border-radius: 50%;
+ position: absolute;
+ bottom: -30px;
+ right: -30px;
+ width: 150px;
+ height: 150px;
+ opacity: 0.1;
+}