From aa30ed95f8f23823b99a02cccef231e42e7f90e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=AA=E5=AD=90?= <jkjoy@live.cn>
Date: Wed, 5 Jun 2024 08:03:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E8=AF=B4=E8=AF=B4=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 functions.php     |   4 --
 page-mastodon.php | 165 ++++++++++++++++++++++++++++++++++++++++++++++
 page-memos.php    |  14 +++-
 3 files changed, 176 insertions(+), 7 deletions(-)
 create mode 100644 page-mastodon.php

diff --git a/functions.php b/functions.php
index 8a3cddf..d5d0413 100644
--- a/functions.php
+++ b/functions.php
@@ -27,10 +27,6 @@ function themeConfig($form) {
     $form->addInput($cnavatar);
     $donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'), _t('不填写则不显示'));
     $form->addInput($donate);
-    $memos = new Typecho_Widget_Helper_Form_Element_Text('memos', NULL, 'https://m.loliko.cn', _t('memos地址'), _t('结尾不带"/"'));
-    $form->addInput($memos);
-    $memosID = new Typecho_Widget_Helper_Form_Element_Text('memosID', NULL, '1', _t('memosID'), _t('数字ID'));
-    $form->addInput($memosID);
     $doubanID = new Typecho_Widget_Helper_Form_Element_Text('doubanID', NULL, '322dba2a3a27524b97c06d941d9631d153fc', _t('豆瓣页面必需Token'), _t('从<a href="https://node.wpista.com/" target="_blank">https://node.wpista.com/</a>获得token'));
     $form->addInput($doubanID);
     $twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'), _t('不填写则不显示'));
diff --git a/page-mastodon.php b/page-mastodon.php
new file mode 100644
index 0000000..0a651d2
--- /dev/null
+++ b/page-mastodon.php
@@ -0,0 +1,165 @@
+<?php 
+/**
+ * 说说页面 - Mastodon
+ *
+ * @package custom
+ */
+if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+<?php $this->need('header.php'); ?>
+<div class="site--main">
+    <header class="archive--header">
+        <h1 class="post--single__title"><?php $this->title() ?></h1>
+        <h2 class="post--single__subtitle"><?php $this->content(); ?> </h2>
+    </header>
+    <article class="post--single">
+    <?php $tooot = $this->fields->tooot ? $this->fields->tooot : 'https://bbapi.ima.cm'; ?>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />    
+    <div id="memos-container"></div>
+    <div class="nav-links" id="loadmore">
+        <span class="loadmore">加载更多</span>
+    </div>
+    </article> 
+<script>
+window.onload = function() {
+    let offset = 0; // 初始偏移量
+    const limit = 20; // 每次加载的数量
+    function formatHTML(toots) {
+        let htmlString = '';      
+        toots.forEach(toot => {
+            const { content, account, created_at, media_attachments} = toot;
+            let mediaHTML = ''; // 初始化资源相关HTML为空字符串
+            // 处理媒体附件
+            if (media_attachments.length > 0) {
+                media_attachments.forEach(attachment => {
+                    if (attachment.type === 'image') {
+                        mediaHTML += `<a href="${attachment.url}" target="_blank"><img src="${attachment.preview_url}" data-fancybox="img" class="thumbnail-image img"></a>`;
+                    }
+                });
+            }
+            // 使用 marked 转换 markdown 内容为 HTML
+            const htmlContent = marked.parse(content);
+            // 创建 HTML 字符串
+            htmlString += `
+            <article class='post--item post--item__status'>
+                <div class='content'>
+                <header>
+                <img src="${account.avatar}" class="avatar" width="48" height="48" />
+                <a class="humane--time" href="${account.url}" target="_blank">${new Date(created_at).toLocaleString()}</a>
+                </header>
+                <div class="description" itemprop="about">
+                ${htmlContent}
+                <div class="resimg">${mediaHTML}</div>
+                </div>
+                </div>
+                </article>`;
+        });
+        return htmlString;
+    }
+    function fetchToots() {
+        return fetch('<?php echo $tooot; ?>')
+            .then(response => response.json())
+            .catch(error => {
+                console.error('Error fetching toots:', error);
+                return [];
+            });
+    }
+    function fetchAndDisplayToots() {
+        fetchToots().then(data => {
+            const memosContainer = document.getElementById('memos-container');
+            const tootsToShow = data.slice(offset, offset + limit); // 选择要显示的toots
+            memosContainer.innerHTML += formatHTML(tootsToShow);
+            offset += limit; // 更新偏移量
+            // 如果没有更多的toots，隐藏“加载更多”按钮
+            if (offset >= data.length) {
+                document.getElementById('loadmore').style.display = 'none';
+            }
+        });
+    }
+    // 在页面加载完成后获取并展示 toots
+    fetchAndDisplayToots();
+    // 绑定“加载更多”按钮的点击事件
+    document.getElementById('loadmore').addEventListener('click', fetchAndDisplayToots);
+};
+Fancybox.bind("[data-fancybox]", {
+  // Your custom options
+});
+</script>         
+<style>
+div pre code {
+  /* 迫使文字断行 */
+  white-space: pre-wrap; /* CSS3 */
+  word-wrap: break-word; /* 老版本的浏览器 */
+  overflow-wrap: break-word;  
+  /* 指定如何断行 */
+  word-break: break-all;  
+  word-break: break-word;  
+}
+div p a {
+    word-break: break-all;  
+  word-break: break-word;  
+}
+.thumbnail-image {
+    width:100%;
+    height: 200px;  
+    align-items: center; 
+    justify-content: center;
+    overflow: hidden;
+}
+.resimg {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 10px; 
+    row-gap: 10px; 
+}
+.thumbnail-image img {
+    width:100%;
+    height:170px;
+    object-fit:cover;
+    border-radius:4px;
+    transition:transform .3s ease;
+    cursor:zoom-in
+}  
+/* 当屏幕宽度小于732px时 */
+@media (max-width: 732px) {
+    .resimg {
+        grid-template-columns: repeat(2, 1fr); /* 修改为两列 */
+    }
+}
+/* 当屏幕宽度小于400px时 */
+@media (max-width: 400px) {
+    .resimg {
+        grid-template-columns: 1fr; /* 修改为一列 */
+    }
+} 
+.load-more-btn {
+      display: block;
+      margin: 20px auto;
+      padding: 10px 20px;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      cursor: pointer;
+      border-radius: 5px;
+  }
+.load-more-btn:hover {
+      background-color: #0056b3;
+  } 
+.nav-links .loadmore {
+    border: 1px solid var(--farallon-border-color);
+    cursor: pointer;
+    position: relative;
+    padding: 5px 30px;
+    border-radius: 8px;
+    font-size: 14px;
+    color: var(--farallon-text-gray)
+}
+
+.nav-links .loadmore:hover {
+    border-color: var(--farallon-hover-color);
+    color: var(--farallon-hover-color)
+}  
+</style>  
+</div>
+<?php $this->need('footer.php'); ?>
\ No newline at end of file
diff --git a/page-memos.php b/page-memos.php
index ce9d93d..f2598f3 100644
--- a/page-memos.php
+++ b/page-memos.php
@@ -1,6 +1,6 @@
 <?php 
 /**
- * 说说页面
+ * 说说页面 - memos
  *
  * @package custom
  */
@@ -11,14 +11,22 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
         <h1 class="post--single__title"><?php $this->title() ?></h1>
         <h2 class="archive--title__year"><?php $this->content(); ?> </h2>
     </header>
+    <?php
+        // 检查是否存在自定义字段 'memos' 和 'memosID'
+        $memos = $this->fields->memos ? $this->fields->memos : 'https://memos.loliko.cn';
+        $memosID = $this->fields->memosID ? $this->fields->memosID : '1';
+        $memosnum = $this->fields->memosnum ? $this->fields->memosnum : '20';
+        ?>
+    <article class="post--single">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />    
     <div id="talk"></div>
+    </article> 
 <script>
 if (99) {
-    let url = '<?php $this->options->memos() ?>';
-    fetch(url + '/api/v1/memo?creatorId=<?php $this->options->memosID() ?>&rowStatus=NORMAL&limit=20')
+    let url = '<?php echo $memos; ?>';
+    fetch(url + '/api/v1/memo?creatorId=<?php echo $memosID; ?>&rowStatus=NORMAL&limit=<?php echo $memosnum; ?>')
     .then(res => res.json())
     .then(data => { 
         let html = '';