更改版本号

README.md

@@ -3,6 +3,18 @@
 移植自 `bigfa `大大的 `hugo-theme-farallon` 原汁原味,可以直接使用 原主题的CSS 
 精简部分 JS.
 感谢
+- 2024.6.4 v0.5.1
+
+更改了设置memos的方式
+新增了Mastodon 的 说说 页面
+
+- 2024.6.3 v0.5.0
+
+还是抄了原版的豆瓣获取方式
+
+- 2024.5.26 v0.4.1
+
+抄了个网站统计页面
 
 - 2024.5.24
 
@@ -10,16 +22,13 @@
 在后台设置memos的地址和memoID即可
 默认获取最近20条公开的memo
 
-- 2024.5.26
-
-抄了个网站统计页面
 
 ## 原项目地址
 https://github.com/bigfa/hugo-theme-farallon
 
 ## 移植进度
 
-95%
+96%
 
 ## 功能
 
@@ -31,13 +40,22 @@ https://github.com/bigfa/hugo-theme-farallon
 
 
 ### 豆瓣观影
-* 能力有限原项目功能无法实现
+~~* 能力有限原项目功能无法实现~~
 
-目前只能配合`DoubanBoard`插件使用
+~~目前只能配合`DoubanBoard`插件使用~~
 
-项目地址
-https://github.com/AlanDecode/Typecho-Plugin-DoubanBoard
-!!记得重命名文件夹为`DoubanBoard`
+~~项目地址~~
+~~https://github.com/AlanDecode/Typecho-Plugin-DoubanBoard~~
+~~!!记得重命名文件夹为`DoubanBoard`~~
+
+使用原版的获取方式
+ 
+>豆瓣收藏使用方法
+微信扫码登录https://node.wpista.com/
+输入你的豆瓣数字 id，点击保存即可自动同步豆瓣记录。
+点击 Get integration token 会生成一个 token。
+
+获取`token`之后填入主题设置项中
 
 ### 友情链接
 
@@ -49,7 +67,22 @@ https://github.com/AlanDecode/Typecho-Plugin-DoubanBoard
 
 若使用AI摘要插件则显示AI摘要,不使用则显示默认字数摘要
 
+### 说说 by Memos
+
+使用自定义字段设置memos
+在自定义字段中填入`memos`值为memos地址,不带`/`
+在自定义字段中填入`memosID`默认值为`1`,不为`1`时才需要设置
+在自定义字段中填入`memosnum`默认值为`20`,默认获取20条最近的memo
+
+### 说说 by Mastodon
+
+根据 https://www.imsun.org/archives/1643.html#toc3 获得API地址
+在自定义字段中填入`tooot`值为Mastodon API 地址
 
 ## 预览地址
 
-https://www.imsun.org
+https://www.imsun.org
+
+## 感谢
+
+[bigfa](https://github.com/bigfa/hugo-theme-farallon)

archive.php

@@ -12,7 +12,6 @@
         <h3 class="post--single__subtitle"><?php $this->categorydescription(); ?></h3>
         <?php while($this->next()): ?>
     </header>
- 
     <article class="post--item">   
     <div class="content">
         <h2 class="post--title">
@@ -55,7 +54,7 @@
                 '...',
                 array(
                     'wrapTag' => 'div',
-                    'wrapClass' => 'cat_pagination_page',
+                    'wrapClass' => 'pagination_page',
                     'itemTag' => '',
                     'textTag' => 'a',
                     'currentClass' => 'active',
@@ -63,8 +62,7 @@
                     'nextClass' => 'next'
                 )
             );
-        ?> 
-          
+        ?>   
         <!-- 搜索结果 --> 
         <?php else: ?>
         <main class="site--main">              
@@ -76,5 +74,44 @@
         </header> 
         </main>        
         <?php endif; ?>   
-
+<style>
+/* 分页 */
+.pagination_page{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--margin);
+    gap: 0.5rem;
+}
+.pagination_page li.active a {
+    background: var(--theme);
+    color: #fff;
+    font-weight: 500;
+}
+.pagination_page a{
+    display: flex;
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    background: var(--background);
+    border-radius: 50%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: 0.2s;
+    -webkit-transition: 0.2s;
+    justify-content: center;
+    align-items: center;
+    letter-spacing: 0;
+}
+.pagination_page span.next{
+    cursor: pointer;
+}
+.pagination_page li.active a:hover{
+    cursor: not-allowed;
+}
+/* 分页 */
+</style>
 <?php $this->need('footer.php'); ?>

functions.php

@@ -5,40 +5,36 @@ function themeConfig($form) {
     $form->addInput($logoUrl);
     $icoUrl = new Typecho_Widget_Helper_Form_Element_Text('icoUrl', NULL, NULL, _t('站点 Favicon 地址'));
     $form->addInput($icoUrl);
-    $jzyear = new Typecho_Widget_Helper_Form_Element_Text('jzyear', NULL, NULL, _t('建站年份 eg. 2006'));
+    $jzyear = new Typecho_Widget_Helper_Form_Element_Text('jzyear', NULL, NULL, _t('建站年份'), _t('eg. 2006'));
     $form->addInput($jzyear);
-    $instagramurl = new Typecho_Widget_Helper_Form_Element_Text('instagramurl', NULL, NULL, _t('ins'));
-    $form->addInput($instagramurl);
-    $telegramurl = new Typecho_Widget_Helper_Form_Element_Text('telegramurl', NULL, NULL, _t('电报'));
-    $form->addInput($telegramurl);
-    $githuburl = new Typecho_Widget_Helper_Form_Element_Text('githuburl', NULL, NULL, _t('github'));
-    $form->addInput($githuburl);
-    $twitterurl = new Typecho_Widget_Helper_Form_Element_Text('twitterurl', NULL, NULL, _t('twitter'));
-    $form->addInput($twitterurl);
-    $mastodonurl = new Typecho_Widget_Helper_Form_Element_Text('mastodonurl', NULL, NULL, _t('mastodon'));
-    $form->addInput($mastodonurl);
-    $sitemapurl = new Typecho_Widget_Helper_Form_Element_Text('sitemapurl', NULL, NULL, _t('sitemap'));
-    $form->addInput($sitemapurl);
-    $cnavatar = new Typecho_Widget_Helper_Form_Element_Text('cnavatar', NULL, 'https://cravatar.cn/avatar/', _t('自定义Gravatar镜像服务器,默认https://cravatar.cn/avatar/'));
-    $form->addInput($cnavatar);
-    $donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, 'https://blogcdn.loliko.cn/donate/wx.png', _t('赞赏二维码'));
-    $form->addInput($donate);
-    $memos = new Typecho_Widget_Helper_Form_Element_Text('memos', NULL, 'https://m.loliko.cn', _t('memos地址结尾不带"/"'));
-    $form->addInput($memos);
-    $memosID = new Typecho_Widget_Helper_Form_Element_Text('memosID', NULL, '1', _t('memosID'));
-    $form->addInput($memosID);
-
-    $twikoo = new Typecho_Widget_Helper_Form_Element_Textarea('twikoo', NULL, NULL, _t('引用第三方评论'));
-    $form->addInput($twikoo);
-
-    $addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('添加head'));
-    $form->addInput($addhead);
-    $tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'));
-    $form->addInput($tongji);
     $showProfile = new Typecho_Widget_Helper_Form_Element_Radio('showProfile',
     array('0'=> _t('否'), '1'=> _t('是')),
     '0', _t('是否在文章页面显示显示作者信息'), _t('选择“是”将在文章页面包含显示作者信息。'));
     $form->addInput($showProfile);
+    $instagramurl = new Typecho_Widget_Helper_Form_Element_Text('instagramurl', NULL, NULL, _t('Instagram'), _t('会在个人信息显示'));
+    $form->addInput($instagramurl);
+    $telegramurl = new Typecho_Widget_Helper_Form_Element_Text('telegramurl', NULL, NULL, _t('电报'), _t('会在个人信息显示'));
+    $form->addInput($telegramurl);
+    $githuburl = new Typecho_Widget_Helper_Form_Element_Text('githuburl', NULL, NULL, _t('github'), _t('会在个人信息显示'));
+    $form->addInput($githuburl);
+    $twitterurl = new Typecho_Widget_Helper_Form_Element_Text('twitterurl', NULL, NULL, _t('twitter'), _t('会在个人信息显示'));
+    $form->addInput($twitterurl);
+    $mastodonurl = new Typecho_Widget_Helper_Form_Element_Text('mastodonurl', NULL, NULL, _t('mastodon'), _t('会在个人信息显示'));
+    $form->addInput($mastodonurl);
+    $sitemapurl = new Typecho_Widget_Helper_Form_Element_Text('sitemapurl', NULL, NULL, _t('sitemap'), _t('会在页脚显示'));
+    $form->addInput($sitemapurl);
+    $cnavatar = new Typecho_Widget_Helper_Form_Element_Text('cnavatar', NULL, 'https://cravatar.cn/avatar/', _t('Gravatar镜像'), _t('默认https://cravatar.cn/avatar/,建议保持默认'));
+    $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);
+    $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('不填写则不显示'));
+    $form->addInput($twikoo);
+    $addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('添加head'), _t('支持HTML'));
+    $form->addInput($addhead);
+    $tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'), _t('支持HTML'));
+    $form->addInput($tongji);
     $showallwords = new Typecho_Widget_Helper_Form_Element_Radio('showallwords',
     array('0'=> _t('否'), '1'=> _t('是')),
     '0', _t('是否显示归档字数统计'), _t('选择“是”将在归档页面显示全站总字数。'));

header.php

@@ -1,6 +1,8 @@
-<?php ini_set('display_errors', 1);
+<?php 
+ini_set('display_errors', 1);
 ini_set('display_startup_errors', 1);
-error_reporting(E_ALL);if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
+error_reporting(E_ALL);
+if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <!DOCTYPE HTML>
 <html>
 <head>

index.php

@@ -3,7 +3,7 @@
  * 移植自HUGO主题`farallon`原作者`bigfa` 
  * @package farallon
  * @author  老孙 
- * @version 0.4.1
+ * @version 0.5.1
  * @link https://imsun.org
  */
 if (!defined('__TYPECHO_ROOT_DIR__')) exit;

page-archives.php

@@ -10,7 +10,7 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
     <header class="archive--header">
         <h1 class="post--single__title"><?php $this->title() ?></h1>
         <?php Typecho_Widget::widget('Widget_Stat')->to($quantity); ?>
-        <h2 class="archive--title__year">共包含 <?php $quantity->publishedPostsNum(); ?> 篇文章</h2>
+        <h2 class="post--single__subtitle">共包含 <?php $quantity->publishedPostsNum(); ?> 篇文章</h2>
         <?php if ($this->options->showallwords): ?>
                 <h3><?php echo allwords(); ?></h3>
 <?php endif; ?>

page-data.php

@@ -79,7 +79,7 @@ $this->need('header.php');
         category: <?php echo json_encode(categoryPostCount()); ?>
       };
     </script>
-    <script type="text/javascript" src="<?php $this->options->themeUrl('/dist/js/chart.js'); ?>"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/jkjoy/typecho-theme-farallon@0.5.0/dist/js/chart.js"></script>
     <script id="MathJax-script" async src="https://jsd.onmicrosoft.cn/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
             <script>
                 // 配置 MathJax

page-douban.php

@@ -9,10 +9,342 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <section class="site--main">
     <header class="archive--header">
         <h1 class="post--single__title"><?php $this->title() ?></h1>
-        <h2 class="post--single__subtitle">观影数据来源于豆瓣</h2>
+        <h2 class="post--single__subtitle">数据来源于豆瓣</h2>
     </header>
-    
-    <div data-status="watched" class="douban-movie-list doubanboard-list"></div>
-     
+    <div class="site--main">
+    <div class="db--container" data-token="<?php $this->options->doubanID() ?>">
+        <nav class="db--nav">
+            <div class="db--navItem JiEun current" data-type="movie">Movie</div>
+            <div class="db--navItem JiEun" data-type="book">Book</div>
+            <div class="db--navItem JiEun" data-type="music">Music</div>
+        </nav>
+        <div class="db--genres">
+        </div>
+        <div class="db--list db--list__card">
+        </div>
+        <div class="block-more block-more__centered">
+            <div class="lds-ripple">
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+class APIHandler {
+  constructor(token) {
+    this.ver = "1.0.1";
+    this.type = "movie";
+    this.finished = false;
+    this.paged = 1;
+    this.genre_list = [];
+    this.genre = [];
+    this.subjects = [];
+    this.baseAPI = "https://node.wpista.com/v1/outer/";
+    this.token = token;
+    this._create();
+  }
+
+  on(event, selector, handler) {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach(element => {
+      element.addEventListener(event, handler);
+    });
+  }
+
+  _fetchGenres() {
+    document.querySelector(".db--genres").innerHTML = "";
+    fetch(`${this.baseAPI}genres?token=${this.token}&type=${this.type}`)
+      .then(response => response.json())
+      .then(data => {
+        if (data.data.length) {
+          this.genre_list = data.data;
+          this._renderGenre();
+        }
+      });
+  }
+
+  _handleGenreClick() {
+    this.on("click", ".db--genreItem", event => {
+      const target = event.currentTarget;
+      if (target.classList.contains("is-active")) {
+        const index = this.genre.indexOf(target.innerText);
+        target.classList.remove("is-active");
+        this.genre.splice(index, 1);
+        this.paged = 1;
+        this.finished = false;
+        this.subjects = [];
+        this._fetchData();
+        return;
+      }
+      document.querySelector(".db--list").innerHTML = "";
+      document.querySelector(".lds-ripple").classList.remove("u-hide");
+      target.classList.add("is-active");
+      this.genre.push(target.innerText);
+      this.paged = 1;
+      this.finished = false;
+      this.subjects = [];
+      this._fetchData();
+    });
+  }
+
+  _renderGenre() {
+    document.querySelector(".db--genres").innerHTML = this.genre_list.map(genre => 
+      `<span class="db--genreItem${this.genre.includes(genre.name) ? " is-active" : ""}">${genre.name}</span>`
+    ).join("");
+    this._handleGenreClick();
+  }
+
+  _fetchData() {
+    fetch(`${this.baseAPI}faves?token=${this.token}&type=${this.type}&paged=${this.paged}&genre=${JSON.stringify(this.genre)}`)
+      .then(response => response.json())
+      .then(data => {
+        if (data.data.length) {
+          if (document.querySelector(".db--list").classList.contains("db--list__card")) 
+                    {
+                        this.subjects = [...this.subjects, ...data.data];
+                        this._randerDateTemplate();
+                    } else {
+                        this.subjects = [...this.subjects, ...data.data];
+                        this._randerListTemplate();
+                    }
+                    document
+                        .querySelector(".lds-ripple").classList.add("u-hide");
+                } else {
+          this.finished = true;
+          document.querySelector(".lds-ripple").classList.add("u-hide");
+        }
+      });
+  }
+  _randerDateTemplate() {
+        const result = this.subjects.reduce((result, item) => {
+            const date = new Date(item.create_time);
+            const year = date.getFullYear();
+            const month = date.getMonth() + 1;
+            const key = `${year}-${month.toString().padStart(2, "0")}`;
+            if (Object.prototype.hasOwnProperty.call(result, key)) {
+                result[key].push(item);
+            } else {
+                result[key] = [item];
+            }
+            return result;
+        }, {});
+
+        let html = ``;
+        for (let key in result) {
+            const date = key.split("-");
+            html += `<div class="db--listBydate"><div class="db--titleDate "><div class="db--titleDate__day">${date[1]}</div><div class="db--titleDate__month">${date[0]}</div></div><div class="db--dateList__card">`;
+            html += result[key]
+                .map(subject => {
+                    return `<div class="db--item">${
+                      subject.is_top250
+                            ? '<span class="top250">Top 250</span>'
+                            : ""
+                    }<img src="${
+                      subject.poster
+                    }" referrerpolicy="no-referrer" class="db--image"><div class="db--score ">${
+                      subject.douban_score > 0
+                            ? '<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" ><path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path></svg>' +
+                            subject.douban_score
+                            : ""
+                    }${
+                      subject.year > 0 ? " · " + subject.year : ""
+                    }</div><div class="db--title"><a href="${
+                      subject.link
+                    }" target="_blank">${subject.name}</a></div></div>`;
+                })
+                .join("");
+            html += `</div></div>`;
+        }
+        document.querySelector(".db--list").innerHTML = html;
+    }
+
+  _renderListTemplate() {
+    document.querySelector(".db--list").innerHTML = this.subjects.map(subject => 
+      `<div class="db--item">
+        ${subject.is_top250 ? '<span class="top250">Top 250</span>' : ""}
+        <img src="${subject.poster}" referrerpolicy="no-referrer" class="db--image">
+        <div class="ipc-signpost">${subject.create_time}</div>
+        <div class="db--score">${subject.douban_score > 0 ? 
+          `<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 20.1l5.82 3.682c1.066.675 2.37-.322 2.09-1.584l-1.543-6.926 5.146-4.667c.94-.85.435-2.465-.799-2.567l-6.773-.602L13.29.89a1.38 1.38 0 0 0-2.581 0l-2.65 6.53-6.774.602C.052 8.126-.453 9.74.486 10.59l5.147 4.666-1.542 6.926c-.28 1.262 1.023 2.26 2.09 1.585L12 20.099z"></path>
+          </svg>` + subject.douban_score : ""}
+          ${subject.year > 0 ? " · " + subject.year : ""}
+        </div>
+        <div class="db--title"><a href="${subject.link}" target="_blank">${subject.name}</a></div>
+      </div>`
+    ).join("");
+  }
+
+  _handleScroll() {
+    window.addEventListener("scroll", () => {
+      const scrollY = window.scrollY || window.pageYOffset;
+      const blockMoreOffsetTop = document.querySelector(".block-more").offsetTop;
+      if (blockMoreOffsetTop - window.innerHeight < scrollY && document.querySelector(".lds-ripple").classList.contains("u-hide") && !this.finished) {
+        document.querySelector(".lds-ripple").classList.remove("u-hide");
+        this.paged++;
+        this._fetchData();
+      }
+    });
+  }
+
+  _handleNavClick() {
+    this.on("click", ".db--navItem", event => {
+      if (event.currentTarget.classList.contains("current")) return;
+      this.genre = [];
+      this.type = event.currentTarget.dataset.type;
+      if (this.type != "book") {
+        this._fetchGenres();
+        document.querySelector(".db--genres").classList.remove("u-hide");
+      } else {
+        document.querySelector(".db--genres").classList.add("u-hide");
+      }
+      document.querySelector(".db--list").innerHTML = "";
+      document.querySelector(".lds-ripple").classList.remove("u-hide");
+      document.querySelector(".db--navItem.current").classList.remove("current");
+      event.target.classList.add("current");
+      this.paged = 1;
+      this.finished = false;
+      this.subjects = [];
+      this._fetchData();
+    });
+  }
+
+  _create() {
+    if (document.querySelector(".db--container")) {
+      const container = document.querySelector(".db--container");
+      if (container.dataset.token) {
+        this.token = container.dataset.token;
+      } else {
+        return;
+      }
+      const currentNavItem = document.querySelector(".db--navItem.current");
+      if (currentNavItem instanceof HTMLElement) {
+        this.type = currentNavItem.dataset.type;
+      }
+      const list = document.querySelector(".db--list");
+      if (list.dataset.type) {
+        this.type = list.dataset.type;
+      }
+      if (this.type == "movie") {
+        document.querySelector(".db--genres").classList.remove("u-hide");
+      }
+      this._fetchGenres();
+      this._fetchData();
+      this._handleScroll();
+      this._handleNavClick();
+    }
+    if (document.querySelector(".js-db")) {
+      document.querySelectorAll(".js-db").forEach(element => {
+        const id = element.dataset.id;
+                const type = element.dataset.type;
+        const parentNode = element.parentNode;
+        fetch(`${this.baseAPI}${type}/${id}?token=${this.token}`)
+          .then(response => response.json())
+          .then(data => {
+            if (data.data) {
+              const itemData = data.data;
+              const div = document.createElement("div");
+              div.classList.add("doulist-item");
+              div.innerHTML = `
+                <div class="doulist-subject">
+                  <div class="doulist-post">
+                    <img decoding="async" referrerpolicy="no-referrer" src="${itemData.poster}">
+                  </div>
+                  <div class="doulist-content">
+                    <div class="doulist-title">
+                      <a href="${itemData.link}" class="cute" target="_blank" rel="external nofollow">${itemData.name}</a>
+                    </div>
+                    <div class="rating">
+                      <span class="allstardark">
+                        <span class="allstarlight" style="width:55%"></span>
+                      </span>
+                      <span class="rating_nums"> ${itemData.douban_score} </span>
+                    </div>
+                    <div class="abstract">${itemData.card_subtitle}</div>
+                  </div>
+                </div>`;
+              parentNode.replaceWith(div);
+            }
+          });
+      });
+    }
+    if (document.querySelector(".db--collection")) {
+      document.querySelectorAll(".db--collection").forEach(collection => {
+        this._fetchCollection(collection);
+      });
+    }
+  }
+
+  _fetchCollection(collection) {
+    const style = collection.dataset.style ? collection.dataset.style : "card";
+    fetch(`${this.baseAPI}v1/movies?type=${collection.dataset.type}&paged=1&genre=&start_time=${collection.dataset.start}&end_time=${collection.dataset.end}`)
+      .then(response => response.json())
+      .then(data => {
+        if (data.length) {
+          if (style === "card") {
+            collection.innerHTML += data.map(item => `
+              <div class="doulist-item">
+                <div class="doulist-subject">
+                  <div class="db--viewTime">Marked ${item.create_time}</div>
+                  <div class="doulist-post">
+                    <img referrerpolicy="no-referrer" src="${item.poster}">
+                  </div>
+                  <div class="doulist-content">
+                    <div class="doulist-title">
+                      <a href="${item.link}" class="cute" target="_blank" rel="external nofollow">${item.name}</a>
+                    </div>
+                    <div class="rating">
+                      <span class="allstardark">
+                        <span class="allstarlight" style="width:75%"></span>
+                      </span>
+                      <span class="rating_nums">${item.douban_score}</span>
+                    </div>
+                    <div class="abstract">${item.remark || item.card_subtitle}</div>
+                  </div>
+                </div>
+              </div>`).join("");
+          } else {
+            const groupedData = data.reduce((acc, item) => {
+              if (acc[item.create_time]) {
+                acc[item.create_time].push(item);
+              } else {
+                acc[item.create_time] = [item];
+              }
+              return acc;
+            }, {});
+
+            let html = "";
+            for (const date in groupedData) {
+              html += `<div class="db--date">${date}</div><div class="db--dateList">`;
+              html += groupedData[date].map(item => `
+                <div class="db--card__list">
+                  <img referrerpolicy="no-referrer" src="${item.poster}">
+                  <div>
+                    <div class="title">
+                      <a href="${item.link}" class="cute" target="_blank" rel="external nofollow">${item.name}</a>
+                    </div>
+                    <div class="rating">
+                      <span class="allstardark">
+                        <span class="allstarlight" style="width:75%"></span>
+                      </span>
+                      <span class="rating_nums">${item.douban_score}</span>
+                    </div>
+                    ${item.remark || item.card_subtitle}
+                  </div>
+                </div>`).join("");
+              html += "</div>";
+            }
+            collection.innerHTML = html;
+          }
+        }
+      });
+  }
+}
+
+// 在页面加载完成后实例化APIHandler类
+document.addEventListener("DOMContentLoaded", () => {
+  const token = "<?php $this->options->doubanID() ?>"; // 替换为你的API令牌
+  new APIHandler(token);
+});
+</script>
 </section>
 <?php $this->need('footer.php'); ?>

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'); ?>

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 = '';

post.php

@@ -118,7 +118,7 @@
             }
         }
     });
-    </script>
+</script>
 </div>
 <?php endif; ?>
 <!-- TAG -->