UP

themes/blog/reader.gohtml

@@ -99,7 +99,6 @@
     }
 
 
-
     .zone_imgbox a {
         display: block;
         border-radius: 12px;
@@ -141,7 +140,17 @@
 
     .limit {
         transition: all .3s ease-in-out;
-        color: rgba(76, 73, 72, 0.6)
+        color: rgba(76, 73, 72, 0.6);
+        display: none;
+        justify-content: center;
+    }
+
+    .limit button {
+        display: inline-block;
+        border-radius: 4px;
+        font-size: 9pt;
+        background: var(--primary, #673ab7);
+        border: 1px solid lightgrey;
     }
 
     [data-theme=dark] .limit {
@@ -175,13 +184,14 @@
             font-size: 14px
         }
     }
+
     .downloadBtn {
         display: flex;
         background: var(--primary, #673ab7);
         color: white;
-        padding: 6px 22px;
-        margin: 8px 0;
-        border-radius: 7px;
+        padding: 4px 8px;
+        margin: 2px 0;
+        border-radius: 5px;
         cursor: pointer;
         font-size: 12pt;
         border: none;
@@ -198,6 +208,7 @@
         <a>加载中...</a>
     </div>
 </div>
+<div class='limit'><button onclick='loadMemo(-1)'>上一页</button> <button onclick='loadMemo(1)'>下一页</button></div>
 <script>
     function Format(item) {
         let date = getTime(new Date(item.createdTs * 1000).toString()),
@@ -237,21 +248,39 @@
         }
     }
 
-    fetch('{{ .Data.url }}/api/v1/memo?creatorId={{ .Data.user }}&tag={{ .Data.tag }}').then(res => res.json()).then(data => {
-        let items = [], html = ''
+    var offset = 0;
+    let limit =30;
+    function loadMemo(p) {
+        offset += p*limit;
+        if (offset < 1) {
+            offset = 0;
+        }
+        fetch('{{ .Data.url }}/api/v1/memo?creatorId={{ .Data.user }}&tag={{ .Data.tag }}&limit='+limit+'&offset=' + offset)
+            .then(res => res.json())
+            .then(data => {
+                let items = [], html = '';
                 data.forEach(item => {
-            items.push(Format(item))
-        })
-        if (items.length == 30) document.querySelector('.limit').style.display = 'block'
+                    items.push(Format(item));
+                });
+                if (items.length === limit) {
+                    document.querySelector('.limit').style.display = 'flex';
+                }
                 items.forEach(item => {
                     html += '<div class="talk_item"><div class="talk_meta">';
                     html += "<img class=\"no-lightbox no-lazyload avatar\" src=\"https://q1.qlogo.cn/g?b=qq&nk={{ .Data.qq }}&s=5\">";
                     html += `<div class="info"><span class="talk_nick">{{ .Data.author }}</span><span class="talk_date">${item.date}</span>`;
                     html += `</div></div><div class="talk_content">${item.content}</div>${item.text}</div>`;
-        })
-        document.getElementById('talk').innerHTML = html;
+                });
+                if(items.length!==0){
+                    document.getElementById('talk').innerHTML = '';
+                    document.getElementById('talk').insertAdjacentHTML('afterbegin', html);
                     waterfall('#talk');
-    })
+                }else {
+                    document.getElementById('talk').innerHTML = '<span>无数据</span>';
+                }
+            });
+    }
+    loadMemo(0);
 </script>
 <script src="/public/js/prism.js"></script>
 <script defer src="https://cdn.jsdelivr.net/gh/jkjoy/14e/js/waterfall.min.js"></script>