优化页面刷新加载动画

templates/archives.html

@@ -47,7 +47,7 @@
                     </div>
                 </div>
                 <!-- 分页 -->
-                <div th:replace="~{modules/widgets/page :: page('/archives',${archives})}"></div>
+                <div th:replace="~{modules/widgets/page :: page('/archives',${archives},false)}"></div>
             </div>
             <!-- sidebar -->
             <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>

templates/assets/zhheo/zhheoblog.css

@@ -1091,6 +1091,28 @@ blockquote footer cite::before {
     }
 }
 
+@keyframes slide-in {
+    from {
+        transform: translateY(20px);
+        opacity: 0
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1
+    }
+}
+
+@keyframes slide-in-op {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
 .article-sort {
     margin-left: 0.5rem;
     padding-left: 1rem;
@@ -7534,6 +7556,7 @@ li.card-archive-list-item {
 @media screen and (min-width: 1300px) {
     #aside-content {
         padding-left: 1rem;
+        animation: slide-in .6s .3s backwards
     }
 
     #aside-content .sticky_layout {
@@ -8171,6 +8194,7 @@ div#banners {
         align-content: space-between;
         width: calc(600px + 1.5rem);
         position: relative;
+        animation: slide-in .6s .1s backwards
     }
 
     div#bannerGroup {
@@ -8197,6 +8221,7 @@ div#banners {
         overflow: hidden;
         transition: 0.3s;
         clip-path: inset(0 0 0 0 round 12px);
+        animation: slide-in .6s .1s backwards;
     }
 
     div#banners:hover {
@@ -8553,6 +8578,7 @@ div#banners {
     .recent-post-top .categoryGroup {
         flex-direction: row;
         height: 24%;
+        animation: slide-in .6s .2s backwards
     }
 
     .categoryItem {
@@ -8805,6 +8831,7 @@ li {
 @media screen and (min-width: 1300px) {
     #bbTimeList {
         margin-bottom: 1rem;
+        animation: slide-in .6s 0s backwards;
     }
 }
 
@@ -9597,6 +9624,7 @@ span.recent-post-top-text {
     margin-bottom: 1rem;
     position: relative;
     overflow: hidden;
+    animation: slide-in .6s .4s backwards;
 }
 
 /* 图片在左侧 */
@@ -9659,8 +9687,13 @@ span.recent-post-top-text {
     }
 
     #category-bar {
-        margin-bottom: 0.75rem;
+        margin-bottom: .75rem;
         box-shadow: var(--heo-shadow-border);
+        animation: slide-in .6s .3s backwards
+    }
+
+    #category #category-bar {
+        animation: none
     }
 
     /* 首页文章第一个 */
@@ -13417,6 +13450,12 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     padding: 0;
 }
 
+@media screen and (min-width: 1300px) {
+    #page>div:not(.author-content-item) {
+        animation:slide-in .6s .2s backwards
+    }
+}
+
 /* 图片 */
 
 .article-sort .article-sort-item .article-sort-item-img {
@@ -16381,6 +16420,12 @@ span.hexo-douban-pagenum {
     }
 }
 
+@media screen and (min-width: 1300px) {
+    .author-content-item {
+        animation:slide-in .6s 0s backwards
+    }
+}
+
 .author-content-item.game-lol::after {
     box-shadow: 0 -69px 203px 11px #575d8b inset;
     position: absolute;

templates/category.html

@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <!-- 分页 -->
-                <div th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts})}"></div>
+                <div th:replace="~{modules/widgets/page :: page(${'/categories/'+category.spec.slug},${posts},false)}"></div>
             </div>
             <!-- sidebar -->
             <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.categoryWidgets})}"></div>

templates/modules/post-list.html

@@ -102,7 +102,7 @@
     </div>
 
     <!-- 分页 -->
-    <div th:replace="~{modules/widgets/page :: page('',${posts})}"></div>
+    <div th:replace="~{modules/widgets/page :: page('',${posts},true)}"></div>
 
 </th:block>
 

templates/modules/widgets/page.html

@@ -5,20 +5,21 @@
 
     @param  path       '/path/page/n' 中的 `/path` 需要保留 `/`
     @param  pageInfo   Halo类型UrlContextListResult<ListedPostVo>
+    @param  isIndex    是否主页
  -->
-<nav id="pagination" th:fragment="page(path,pageInfo)">
+<nav id="pagination" th:fragment="page(path,pageInfo,isIndex)">
-    <div class="pagination">
+    <div class="pagination" th:with="paths = ${isIndex ? path+'/' : path}">
 
         <!-- 页码按钮 -->
         <th:block th:if="${pageInfo.page > 3}">
-            <a class="page-number" th:href="${path+'/'}" th:text="1"></a>
+            <a class="page-number" th:href="${paths}" 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}" th:href="${#strings.equals(index, '1') ? path+'/' : path+'/page/'+index}"
+               th:if="${index > 0 && index <= pageInfo.totalPages}" th:href="${#strings.equals(index, '1') ? paths : path+'/page/'+index}"
                th:text="${index}"></a>
         </th:block>
 
@@ -38,7 +39,7 @@
             <div class="pagination_tips_next">下页</div>
             <i class="haofont hao-icon-chevron-right fa-fw"></i>
         </a>
-        <div th:if="${pageInfo.totalPages > 1}" class="toPageGroup">
+        <div th:if="${pageInfo.totalPages > 1 && isIndex}" class="toPageGroup">
             <input id="toPageText" maxlength="3" title="跳转到指定页面"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    onkeyup="if (this.value === '0') this.value = ''">

templates/tag.html

@@ -51,7 +51,7 @@
                     </div>
                 </div>
                 <!-- 分页 -->
-                <div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts})}"></div>
+                <div th:replace="~{modules/widgets/page :: page(${'/tags/'+tag.spec.slug},${posts},false)}"></div>
             </div>
             <!-- sidebar -->
             <div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.tagWidgets})}"></div>