From b621350a7a6baab006978e9bf797756e0b44ec17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= <jkjoy@live.cn>
Date: Mon, 29 Jul 2024 10:07:34 +0800
Subject: [PATCH] Update links.html

---
 themes/farallon/layouts/page/links.html | 146 ++++++++++++++++++++++++
 1 file changed, 146 insertions(+)

diff --git a/themes/farallon/layouts/page/links.html b/themes/farallon/layouts/page/links.html
index 12cd496..8d1b2be 100644
--- a/themes/farallon/layouts/page/links.html
+++ b/themes/farallon/layouts/page/links.html
@@ -14,6 +14,152 @@
             {{ end }}
         </ul>
     </div>
+    <h1 class="post--single__title">好友文章</h1>
+    <h2 class="post--single__subtitle"></h2>
+    <div class="articleList" id="articleList"></div>
+<button id="load-more">加载更多</button>
+<style>
+    .nav-links .load-more {
+        border: 1px solid var(--farallon-border-color);
+        cursor: pointer;
+        position: relative;
+        padding: 5px 30px;
+        height: 40px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-family: LXGWWenKai;
+        border-style: solid;
+        color: var(--farallon-text-gray);
+        background-color: var(--farallon-background-gray);
+    }
+    
+    .nav-links .load-more:hover {
+        border-color: var(--farallon-hover-color);
+        color: var(--farallon-hover-color);
+        background-color: var(--farallon-background-gray);
+    }  
+    
+    </style> 
+<script>
+document.addEventListener('DOMContentLoaded', async () => {
+    const jsonData = await fetchJsonData('https://cdn.jkjoy.cn/rss/rss.json');
+    if (!jsonData) {
+        console.error('Failed to fetch JSON data.');
+        return;
+    }
+    const articles = jsonData;
+
+    // 对文章按时间排序（最新的排在前面）
+    articles.sort((a, b) => new Date(b.time) - new Date(a.time));
+
+    // 初始化分页变量
+    let currentPage = 1;
+    const itemsPerPage = 30;
+
+    // 加载第一页文章
+    loadArticles(currentPage, itemsPerPage, articles);
+
+    // 设置“加载更多”按钮点击事件
+    const loadMoreButton = document.getElementById('load-more');
+    loadMoreButton.addEventListener('click', () => {
+        currentPage++;
+        loadArticles(currentPage, itemsPerPage, articles);
+    });
+});
+
+async function fetchJsonData(url) {
+    try {
+        const response = await fetch(url);
+        if (response.ok) {
+            return await response.json();
+        } else {
+            console.error('HTTP error:', response.status, response.statusText);
+        }
+    } catch (error) {
+        console.error('Fetch error:', error);
+    }
+    return null;
+}
+
+function loadArticles(page, perPage, articles) {
+    const startIndex = (page - 1) * perPage;
+    const endIndex = page * perPage;
+    const articleListElem = document.getElementById('articleList');
+    
+    articles.slice(startIndex, endIndex).forEach(article => {
+        const articleElem = createArticleElement(article);
+        articleListElem.appendChild(articleElem);
+    });
+}
+
+function createArticleElement(article) {
+    // 格式化发布时间
+    const date = new Date(article.time);
+    const formattedDate = new Intl.DateTimeFormat('zh-CN', {
+        year: 'numeric', 
+        month: '2-digit', 
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    }).format(date);
+
+    const div = document.createElement('div');
+    div.className = 'post--item';
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'content';
+
+    const link = document.createElement('a');
+    link.href = article.link;
+    link.target = '_blank';
+    const title = document.createElement('h2');
+    title.className = 'post--title';
+    title.textContent = article.title;
+    link.appendChild(title);
+
+    const descriptionDiv = document.createElement('div');
+    descriptionDiv.className = 'description';
+    descriptionDiv.textContent = article.description;
+
+    const metaDiv = document.createElement('div');
+    metaDiv.className = 'meta';
+
+    const iconImg = document.createElement('img');
+    iconImg.src = article.icon;
+    iconImg.width = 16;
+    iconImg.height = 16;
+    iconImg.alt = 'Icon';
+    iconImg.className = 'icon';
+
+    const siteName = document.createElement('span');
+    siteName.textContent = article.site_name;
+
+    const timeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    timeIcon.className = 'icon';
+    timeIcon.setAttribute('viewBox', '0 0 1024 1024');
+    timeIcon.setAttribute('width', '16');
+    timeIcon.setAttribute('height', '16');
+    timeIcon.innerHTML = `<path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429 0 0 1-36.571429-36.571429V260.388571h73.142858z"></path>`;
+
+    const timeText = document.createElement('time');
+    timeText.textContent = formattedDate;
+
+    metaDiv.appendChild(iconImg);
+    metaDiv.appendChild(siteName);
+    metaDiv.appendChild(timeIcon);
+    metaDiv.appendChild(timeText);
+
+    contentDiv.appendChild(link);
+    contentDiv.appendChild(descriptionDiv);
+    contentDiv.appendChild(metaDiv);
+
+    div.appendChild(contentDiv);
+
+    return div;
+}
+</script>
     <div class="graph u-marginBottom30">
         {{ .Content }}
     </div>