优化首页分页

templates/assets/js/heo.js

@@ -487,7 +487,11 @@ var heo = {
         $htmlDom.toggle('hide-aside')
         $htmlDom.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
     },
-
+    toPage: function() {
+        var e, t = document.querySelectorAll(".page-number"), o = parseInt(t[t.length - 1].innerHTML), n = document.getElementById("toPageText"), a = parseInt(n.value);
+        !isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= o && (e = 1 === a ? "/" : "/page/" + a,
+            document.getElementById("toPageButton").href = e)
+    },
     changeSayHelloText: function() {
         const e = GLOBAL_CONFIG.helloText.length == 0 ? ["🤖️ 数码科技爱好者", "🔍 分享与热心帮助", "🏠 智能家居小能手", "🔨 设计开发一条龙", "🤝 专修交互与设计", "🏃 脚踏实地行动派", "🧱 团队小组发动机", "💢 壮汉人狠话不多"] : GLOBAL_CONFIG.helloText
             , t = document.getElementById("author-info__sayhi");

templates/assets/zhheo/blogex.js

@@ -643,11 +643,27 @@ function setBodyDataType(){
     att.value = GLOBAL_CONFIG.htmlType;
     body.setAttributeNode(att);
 }
-
+function listenToPageInputPress() {
+    var e = document.getElementById("toPageText")
+        , t = document.getElementById("toPageButton");
+    e && (e.addEventListener("keydown", (e=>{
+            13 === e.keyCode && (heo.toPage(),
+                pjax.loadUrl(t.href))
+        }
+    )),
+        e.addEventListener("input", (function() {
+                "" === e.value || "0" === e.value ? t.classList.remove("haveValue") : t.classList.add("haveValue");
+                var o = document.querySelectorAll(".page-number")
+                    , n = +o[o.length - 1].innerHTML;
+                +document.getElementById("toPageText").value > n && (e.value = n)
+            }
+        )))
+}
 function initBlog() {
     heo.initIndexEssay(),
     checkUrlAndAddHideBanner(),
-    setBodyDataType()
+    setBodyDataType(),
+    listenToPageInputPress()
 }
 
 // 如果当前页有评论就执行函数

templates/modules/widgets/page.html

@@ -6,19 +6,20 @@
     @param  path       '/path/page/n' 中的 `/path` 需要保留 `/`
     @param  pageInfo   Halo类型UrlContextListResult<ListedPostVo>
  -->
-    <nav id="pagination" th:fragment="page(path,pageInfo)">
+<nav id="pagination" th:fragment="page(path,pageInfo)">
     <div class="pagination">
 
         <!-- 页码按钮 -->
         <th:block th:if="${pageInfo.page > 3}">
-                <a class="page-number" th:href="${path+'/page/1'}" th:text="1"></a>
+            <a class="page-number" th:href="${path+'/'}" th:text="1"></a>
             <span class="space" th:if="${pageInfo.page != 4}">…</span>
         </th:block>
 
         <th:block th:each="index:${#numbers.sequence(pageInfo.page-2,pageInfo.page+2)}">
             <span class="page-number current" th:if="${pageInfo.page} == ${index}" th:text="${pageInfo.page}"></span>
-                <a class="page-number" th:unless="${pageInfo.page == index}" th:if="${index > 0 && index <= pageInfo.totalPages}"
+            <a class="page-number" th:unless="${pageInfo.page == index}"
-                     th:href="${path+'/page/'+index}" th:text="${index}"></a>
+               th:if="${index > 0 && index <= pageInfo.totalPages}" th:href="${#strings.equals(index, '1') ? path+'/' : path+'/page/'+index}"
+               th:text="${index}"></a>
         </th:block>
 
         <th:block th:if="${pageInfo.totalPages - pageInfo.page > 2}">
@@ -27,17 +28,26 @@
         </th:block>
 
         <!-- 翻页按钮 -->
-            <a class="extend prev" rel="prev"  th:if="${pageInfo.hasPrevious}" th:href="${pageInfo.prevUrl}" data-pjax-state="">
+        <a class="extend prev" rel="prev" th:if="${pageInfo.hasPrevious}" th:href="${pageInfo.prevUrl}"
-                <i class="fas fa-chevron-left fa-fw"></i>
+           data-pjax-state="">
+            <i class="haofont hao-icon-chevron-left fa-fw"></i>
             <div class="pagination_tips_prev">上页</div>
         </a>
 
         <a class="extend next" rel="next" th:if="${pageInfo.hasNext}" th:href="${pageInfo.nextUrl}" data-pjax-state="">
             <div class="pagination_tips_next">下页</div>
-                <i class="fas fa-chevron-right fa-fw"></i>
+            <i class="haofont hao-icon-chevron-right fa-fw"></i>
         </a>
+        <div th:if="${pageInfo.totalPages > 2}" class="toPageGroup">
+            <input id="toPageText" maxlength="3" title="跳转到指定页面"
+                   oninput="value=value.replace(/[^0-9]/g,'')"
+                   onkeyup="if (this.value === '0') this.value = ''">
+            <a id="toPageButton" onclick="heo.toPage()"
+               data-pjax-state=""><i class="haofont hao-icon-angles-right"></i>
+            </a>
+        </div>
 
     </div>
-    </nav>
+</nav>
 
 </html>