0.6.1

更改部分代码

dist/js/bundle.js

@@ -17,7 +17,7 @@
       is_single = false;
       post_id = 0;
       is_archive = false;
-      VERSION = "0.6.0";
+      VERSION = "0.6.1";
       constructor() {
         super();
         this.initCopyright();

dist/js/view-image.min.js

@@ -0,0 +1,13 @@
+/**
+ * ViewImage.min.js 2.0.2
+ * MIT License - http://www.opensource.org/licenses/mit-license.php
+ * https://tokinx.github.io/ViewImage/
+ */
+ var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.createTemplateTagFirstArg=function(b){return b.raw=b};$jscomp.createTemplateTagFirstArgWithRaw=function(b,a){b.raw=a;return b};$jscomp.arrayIteratorImpl=function(b){var a=0;return function(){return a<b.length?{done:!1,value:b[a++]}:{done:!0}}};$jscomp.arrayIterator=function(b){return{next:$jscomp.arrayIteratorImpl(b)}};$jscomp.makeIterator=function(b){var a="undefined"!=typeof Symbol&&Symbol.iterator&&b[Symbol.iterator];return a?a.call(b):$jscomp.arrayIterator(b)};
+ $jscomp.arrayFromIterator=function(b){for(var a,d=[];!(a=b.next()).done;)d.push(a.value);return d};$jscomp.arrayFromIterable=function(b){return b instanceof Array?b:$jscomp.arrayFromIterator($jscomp.makeIterator(b))};
+ (function(){window.ViewImage=new function(){var b=this;this.target="[view-image] img";this.listener=function(a){if(!(a.ctrlKey||a.metaKey||a.shiftKey||a.altKey)){var d=String(b.target.split(",").map(function(g){return g.trim()+":not([no-view])"})),c=a.target.closest(d);if(c){var e=c.closest("[view-image]")||document.body;d=[].concat($jscomp.arrayFromIterable(e.querySelectorAll(d))).map(function(g){return g.href||g.src});b.display(d,c.href||c.src);a.stopPropagation();a.preventDefault()}}};this.init=
+ function(a){a&&(b.target=a);["removeEventListener","addEventListener"].forEach(function(d){document[d]("click",b.listener,!1)})};this.display=function(a,d){var c=a.indexOf(d),e=(new DOMParser).parseFromString('\n                <div class="view-image">\n                    <style>.view-image{position:fixed;inset:0;z-index:500;padding:1rem;display:flex;flex-direction:column;animation:view-image-in 300ms;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.view-image__out{animation:view-image-out 300ms}@keyframes view-image-in{0%{opacity:0}}@keyframes view-image-out{100%{opacity:0}}.view-image-btn{width:32px;height:32px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:3px;background-color:rgba(255,255,255,0.2)}.view-image-btn:hover{background-color:rgba(255,255,255,0.5)}.view-image-close__full{position:absolute;inset:0;background-color:rgba(48,55,66,0.3);z-index:unset;cursor:zoom-out;margin:0}.view-image-container{height:0;flex:1;display:flex;align-items:center;justify-content:center;}.view-image-lead{display:contents}.view-image-lead img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;border-radius:3px}.view-image-lead__in img{animation:view-image-lead-in 300ms}.view-image-lead__out img{animation:view-image-lead-out 300ms forwards}@keyframes view-image-lead-in{0%{opacity:0;transform:translateY(-20px)}}@keyframes view-image-lead-out{100%{opacity:0;transform:translateY(20px)}}[class*=__out] ~ .view-image-loading{display:block}.view-image-loading{position:absolute;inset:50%;width:8rem;height:2rem;color:#aab2bd;overflow:hidden;text-align:center;margin:-1rem -4rem;z-index:1;display:none}.view-image-loading::after{content:"";position:absolute;inset:50% 0;width:100%;height:3px;background:rgba(255,255,255,0.5);transform:translateX(-100%) translateY(-50%);animation:view-image-loading 800ms -100ms ease-in-out infinite}@keyframes view-image-loading{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.view-image-tools{position:relative;display:flex;justify-content:space-between;align-content:center;color:#fff;max-width:600px;position: absolute; bottom: 5%; left: 1rem; right: 1rem; backdrop-filter: blur(10px);margin:0 auto;padding:10px;border-radius:5px;background:rgba(0,0,0,0.1);margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);z-index:1}.view-image-tools__count{width:60px;display:flex;align-items:center;justify-content:center}.view-image-tools__flip{display:flex;gap:10px}.view-image-tools [class*=-close]{margin:0 10px}</style>\n                    <div class="view-image-container">\n                        <div class="view-image-lead"></div>\n                        <div class="view-image-loading"></div>\n                        <div class="view-image-close view-image-close__full"></div>\n                    </div>\n                    <div class="view-image-tools">\n                        <div class="view-image-tools__count">\n                            <span><b class="view-image-index">'+
+ (c+1)+"</b>/"+a.length+'</span>\n                        </div>\n                        <div class="view-image-tools__flip">\n                            <div class="view-image-btn view-image-tools__flip-prev">\n                                <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M31 36L19 24L31 12" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>\n                            </div>\n                            <div class="view-image-btn view-image-tools__flip-next">\n                                <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M19 12L31 24L19 36" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>\n                            </div>\n                        </div>\n                        <div class="view-image-btn view-image-close">\n                            <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M8 8L40 40" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 40L40 8" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>\n                        </div>\n                    </div>\n                </div>\n            ',
+ "text/html").body.firstChild,g=function(f){var h={Escape:"close",ArrowLeft:"tools__flip-prev",ArrowRight:"tools__flip-next"};h[f.key]&&e.querySelector(".view-image-"+h[f.key]).click()},l=function(f){var h=new Image,k=e.querySelector(".view-image-lead");k.className="view-image-lead view-image-lead__out";setTimeout(function(){k.innerHTML="";h.onload=function(){setTimeout(function(){k.innerHTML='<img src="'+h.src+'" alt="ViewImage" no-view/>';k.className="view-image-lead view-image-lead__in"},100)};
+ h.src=f},300)};document.body.appendChild(e);l(d);window.addEventListener("keydown",g);e.onclick=function(f){f.target.closest(".view-image-close")?(window.removeEventListener("keydown",g),e.onclick=null,e.classList.add("view-image__out"),setTimeout(function(){return e.remove()},290)):f.target.closest(".view-image-tools__flip")&&(c=f.target.closest(".view-image-tools__flip-prev")?0===c?a.length-1:c-1:c===a.length-1?0:c+1,l(a[c]),e.querySelector(".view-image-index").innerHTML=c+1)}}}})();
+ 

index.php

@@ -1,9 +1,9 @@
 <?php
 /**
- * 移植自HUGO主题 farallon 原作者 bigfa  
+ * 一款单栏主题. 移植自HUGO主题 Farallon 原作者 bigfa  
  * @package Farallon
  * @author  老孙 
- * @version 0.6.0
+ * @version 0.6.1
  * @link https://www.imsun.org
  */
 if (!defined('__TYPECHO_ROOT_DIR__')) exit;

page-links.php

@@ -11,9 +11,6 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
         <h1 class="post--single__title"><?php $this->title() ?></h1>
         <h2 class="post--single__subtitle"><?php $this->content(); ?> </h2>
 </header>
-<div class="graph u-marginBottom30">
-<?php $this->content(); ?>
-        </div>
     <div class="template--linksWrap">
         <ul class="link-items">
             <?php

page-mastodon.php

@@ -14,8 +14,7 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
     <article class="post--single">
     <?php $tooot = $this->fields->tooot ? $this->fields->tooot : 'https://bbapi.ima.cm'; ?>
     <script src="<?php $this->options->themeUrl('/dist/js/marked.min.js'); ?>"></script>
-    <script src="<?php $this->options->themeUrl('/dist/js/fancybox.umd.js'); ?>"></script>
-    <link rel="stylesheet" href="<?php $this->options->themeUrl('/dist/css/fancybox.css'); ?>" />    
+    <script src="<?php $this->options->themeUrl('/dist/js/view-image.min.js'); ?>"></script>
     <div id="tooot"></div>
     <div class="nav-links" id="loadmore">
         <span class="loadmore">加载更多</span>
@@ -34,7 +33,7 @@ window.onload = function() {
             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>`;
+                        mediaHTML += `<a href="${attachment.url}" target="_blank"><img src="${attachment.preview_url}" class="thumbnail-image img" ></a>`;
                     }
                 });
             }
@@ -45,7 +44,7 @@ window.onload = function() {
             <article class='post--item post--item__status'>
                 <div class='content'>
                 <header>
-                <img src="${account.avatar}" class="avatar" width="48" height="48" />
+                <img src="${account.avatar}" class="avatar" width="48" height="48" no-view />
                 <a class="humane--time" href="${url}" target="_blank">${new Date(created_at).toLocaleString()}</a>
                 </header>
                 <div class="description" itemprop="about">
@@ -82,9 +81,7 @@ window.onload = function() {
     // 绑定“加载更多”按钮的点击事件
     document.getElementById('loadmore').addEventListener('click', fetchAndDisplayToots);
 };
-Fancybox.bind("[data-fancybox]", {
-  // Your custom options
-});
+window.ViewImage && ViewImage.init('.content img');
 </script>         
 <style>
 div pre code {
@@ -92,7 +89,6 @@ div pre code {
   white-space: pre-wrap; /* CSS3 */
   word-wrap: break-word; /* 老版本的浏览器 */
   overflow-wrap: break-word;  
-  /* 指定如何断行 */
   word-break: break-all;  
   word-break: break-word;  
 }

page-memos.php

@@ -19,14 +19,21 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
         ?>
     <article class="post--single">
     <script src="<?php $this->options->themeUrl('/dist/js/marked.min.js'); ?>"></script>
-    <script src="<?php $this->options->themeUrl('/dist/js/fancybox.umd.js'); ?>"></script>
-    <link rel="stylesheet" href="<?php $this->options->themeUrl('/dist/css/fancybox.css'); ?>" />      
+    <script src="<?php $this->options->themeUrl('/dist/js/view-image.min.js'); ?>"></script>
     <div id="talk"></div>
+    <div class="nav-links" id="loadmore">
+        <span class="loadmore">加载更多</span>
+    </div>
     </article> 
 <script>
-if (99) {
-    let url = '<?php echo $memos; ?>';
-    fetch(url + '/api/v1/memo?creatorId=<?php echo $memosID; ?>&rowStatus=NORMAL&limit=<?php echo $memosnum; ?>')
+let currentPage = 1; // 当前页码
+const limit = 10; // 每页条数
+let url = '<?php echo $memos; ?>';
+let memosID = '<?php echo $memosID; ?>';
+let memosnum = '<?php echo $memosnum; ?>';
+
+function loadMemos(page) {
+    fetch(`${url}/api/v1/memo?creatorId=${memosID}&rowStatus=NORMAL&limit=${limit}&offset=${(page - 1) * limit}`)
     .then(res => res.json())
     .then(data => { 
         let html = '';
@@ -38,7 +45,7 @@ if (99) {
             <article class='post--item post--item__status'>
                 <div class='content'>
                 <header>
-                <img src="<?php $this->options->logoUrl() ?>" class="avatar" width="48" height="48" />
+                <img src="<?php $this->options->logoUrl() ?>" class="avatar" width="48" height="48" no-view />
                 <a class="humane--time" href="${memoURL}" target="_blank">${data.date}</a>
                 </header>
                 <div class="description" itemprop="about">
@@ -49,13 +56,15 @@ if (99) {
                 </article>
             `;
         });
-        document.getElementById('talk').innerHTML = html;
+        document.getElementById('talk').innerHTML += html;
     })
     .catch(error => {
         console.error('Error:', error);
         // 这里可以添加一些用户提示错误发生的 HTML 更新
     });
-    function Format(item) {
+}
+
+function Format(item) {
     let date = getTime(new Date(item.createdTs * 1000).toString()),
         content = item.content,
         tag = item.content.match(/#([^\s#]+?) /g),
@@ -73,7 +82,7 @@ if (99) {
     content = text.replace(/\[(.*?)\]\((.*?)\)/g, `<a href="$2" target="_blank">$1</a>`);
     if (imgs) {
         content += `<div class="resimg">`
-            imgs.forEach(e => content += `<a href="${e}" data-fancybox="gallery" class="fancybox img" data-thumb="${e}"><img class="no-lazyload thumbnail-image" src="${e}"></a>`
+        imgs.forEach(e => content += `<a href="${e}"  class="img" data-thumb="${e}"><img class="no-lazyload thumbnail-image" src="${e}"></a>`
         )
         content += '</div>'
     }
@@ -83,9 +92,10 @@ if (99) {
         date: date,
         text: text.replace(/\[(.*?)\]\((.*?)\)/g, '[链接]' + `${imgs?'[图片]':''}`)
     }
-    }
-    // 页面时间格式化
-    function getTime(time) {
+}
+
+// 页面时间格式化
+function getTime(time) {
     let d = new Date(time),
         ls = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
     for (let i = 0; i < ls.length; i++) {
@@ -93,11 +103,18 @@ if (99) {
     }
     if (new Date().getFullYear() == ls[0]) return ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4]
     else return ls[0] + '年' + ls[1] + '月' + ls[2] + '日 ' + ls[3] +':'+ ls[4]
-    }
 }
-Fancybox.bind("[data-fancybox]", {
-  // Your custom options
+
+// 初始加载第一页
+loadMemos(currentPage);
+
+// 点击“加载更多”按钮时加载下一页
+document.getElementById('loadmore').addEventListener('click', function() {
+    currentPage++;
+    loadMemos(currentPage);
 });
+
+window.ViewImage && ViewImage.init('.content img');
 </script>
 <style> 
 div pre code {
@@ -150,6 +167,33 @@ img {
         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'); ?>