Merge pull request #474 from chengzhongxue/main

上一篇，下一篇样式修改

templates/assets/js/heo.js

@@ -5,7 +5,8 @@ let heo_cookiesTime = null
 ,heo_musicPlaying = false
 ,heo_keyboard = false
 ,heo_intype = false
-,lastSayHello = "";
+,lastSayHello = ""
+,refreshNum = 1;
 // 私有函数
 var heo = {
     // 检测显示模式
@@ -67,6 +68,12 @@ var heo = {
 
     // 页脚友链
     addFriendLinksInFooter: function () {
+        var footerRandomFriendsBtn = document.getElementById("footer-random-friends-btn");
+        if(!footerRandomFriendsBtn) return;
+        footerRandomFriendsBtn.style.opacity = "0.2";
+        footerRandomFriendsBtn.style.transitionDuration = "0.3s";
+        footerRandomFriendsBtn.style.transform = "rotate(" + 360 * refreshNum++ + "deg)";
+
         const fetchUrl = "/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword=&sort=priority,asc"
         const linksUrl = GLOBAL_CONFIG.source.links.linksUrl
         const num = GLOBAL_CONFIG.source.links.linksNum
@@ -84,6 +91,9 @@ var heo = {
                     document.getElementById("friend-links-in-footer").innerHTML = htmlText;
                 }
             })
+        setTimeout(()=>{
+            footerRandomFriendsBtn.style.opacity = "1";
+        }, 300)
     },
 
     //禁止图片右键单击

templates/assets/libs/twikoo/commentBarrage.css

@@ -1,7 +1,7 @@
 .comment-barrage {
     position: fixed;
     bottom: 0;
-    right: 20px;
+    right: 60px;
     padding: 0 0 20px 10px;
     z-index: 100;
     display: flex;

templates/assets/libs/twikoo/commentBarrage.js

@@ -137,29 +137,6 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
         }, 1000)
     }
 
-
-// 自动隐藏
-    document.addEventListener('scroll', btf.throttle(function () {
-        //滚动条高度+视窗高度 = 可见区域底部高度
-        var visibleBottom = window.scrollY + document.documentElement.clientHeight;
-        //可见区域顶部高度
-        var visibleTop = window.scrollY;
-        // 获取翻页按钮容器
-        var pagination = document.querySelector('.comment-barrage');
-        // 获取位置监测容器，此处采用评论区
-        var eventlistner = document.getElementById('post-comment');
-        if (eventlistner && pagination) {
-            var centerY = eventlistner.offsetTop + 200;
-            if (document.body.clientWidth > 768) {
-                if (centerY > visibleBottom) {
-                    pagination.style.bottom = '0';
-                } else {
-                    pagination.style.bottom = '-200px';
-                }
-            }
-        }
-    }, 200))
-
     initCommentBarrage();
 
     if (localStorage.getItem('commentBarrageSwitch') !== 'false') {

templates/assets/zhheo/blogex.js

@@ -1,12 +1,5 @@
-// var full_page = document.getElementsByClassName("full_page");
-// if (full_page.length != 0) {
-//   full_page[0].style.background = "transparent";
-// }
-
-
-function checkOpen() {
-}
 
+function checkOpen() {}
 checkOpen.toString = function () {
     this.opened = true;
 };
@@ -191,24 +184,6 @@ function showcopy() {
     }
 }
 
-//导航栏上显示标题
-// var OriginTitile = document.title;
-// var titleTime;
-// document.addEventListener('visibilitychange', function () {
-//     if (document.hidden) {
-//         // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png");
-//         document.title = '张洪Heo';
-//         clearTimeout(titleTime);
-//     }
-//     else {
-//         // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png");
-//         document.title = OriginTitile;
-//         // titleTime = setTimeout(function () {
-//         //     document.title = OriginTitile;
-//         // }, 2000);
-//     }
-// });
-
 // 早上好问好
 // 获取时间
 var getTimeState = () => {
@@ -390,7 +365,6 @@ document.addEventListener('scroll', btf.throttle(function () {
     heo.initThemeColor()
 }, 200))
 
-//友链随机传送
 //友链随机传送
 function travelling() {
     const links = "/apis/api.plugin.halo.run/v1alpha1/plugins/PluginLinks/links?keyword=&sort=priority,asc"
@@ -577,29 +551,19 @@ $(".topGroup").hover(function () {
 });
 
 
-//文章页面上一篇下一篇
+function initObserver() {
-// document.addEventListener('scroll', btf.throttle(function () {
+    var e = document.getElementById("post-comment")
-//     //滚动条高度+视窗高度 = 可见区域底部高度
+        , t = document.getElementById("pagination");
-//     var visibleBottom = window.scrollY + document.documentElement.clientHeight;
+    e && new IntersectionObserver((function(e) {
-//     //可见区域顶部高度
+            e.forEach((function(e) {
-//     var visibleTop = window.scrollY;
+                    e.isIntersecting ? (t && t.classList.add("show-window"),
-//     // 获取翻页按钮容器
+                        document.querySelector(".comment-barrage").style.bottom = "-200px") : (t && t.classList.remove("show-window"),
-//     var pagination = document.getElementById('pagination');
+                        document.querySelector(".comment-barrage").style.bottom = "0px")
-//     // 获取位置监测容器，此处采用评论区
+                }
-//     var eventlistner = document.getElementById('post-tools');
+            ))
-//     if (eventlistner && pagination) {
+        }
-//         var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2);
+    )).observe(e)
-//         if (document.body.clientWidth > 1300) {
+}
-//             if (centerY < visibleTop) {
-//                 pagination.classList.add("show-window");
-//             } else {
-//                 pagination.classList.remove("show-window");
-//             }
-//         }
-//     }
-// }, 200));
-
-
 
 // 页面百分比
 function percent() {
@@ -670,6 +634,7 @@ function initBlog() {
     heo.initThemeColor(),
     //隐藏加载动画
     GLOBAL_CONFIG.loadingBox &&  heo.hideLoading(),
+    initObserver(),
     checkUrlAndAddHideBanner()
 }
 

templates/assets/zhheo/zhheoblog.css

@@ -3187,14 +3187,6 @@ ul {
     height: 150px;
 }
 
-#pagination .next-post2 a,
-#pagination .prev-post2 a {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    height: 150px;
-}
-
 #pagination .next-post:hover img.next-cover,
 #pagination .next-post:hover img.prev-cover,
 #pagination .prev-post:hover img.next-cover,
@@ -11553,13 +11545,6 @@ a.reward-main-btn:hover {
     background: #363636;
 }
 
-.next-post2.pull-right,
-.prev-post2.pull-left,
-#pagination .prev-post2,
-#pagination .next-post2 {
-    background: #363636;
-}
-
 #preimg{
     position: absolute;
     width: 100%;
@@ -11573,10 +11558,7 @@ a.reward-main-btn:hover {
     object-fit: cover;
     border-radius: 0;
 }
-.prev-post2.pull-left:hover #preimg {
+
-    opacity: 1;
-    transform: scale(1.1);
-}
 .prev-post.pull-left:hover #preimg {
     opacity: 1;
     transform: scale(1.1);
@@ -11587,15 +11569,10 @@ a.reward-main-btn:hover {
     transform: scale(1.1);
 }
 
-.next-post2.pull-right:hover #preimg {
-    opacity: 1;
-    transform: scale(1.1);
-}
-
 @media screen and (min-width: 768px) {
     #pagination .next-post a {
-        border-left: var(--heo-card-bg);
+        border-left:var(--heo-main-op);
-        border-left-width: 3px;
+        border-left-width: .5px;
         border-left-style: solid;
         display: flex;
         align-items: flex-start;
@@ -11607,9 +11584,9 @@ a.reward-main-btn:hover {
     }
 
     #pagination .prev-post a {
-        border-right: var(--heo-card-bg);
+        border-right: var(--heo-main-op);
-        border-right-width: 3px;
+        border-right-width: .5px;
-        border-right-style: solid;
+        border-right-style: solid
     }
 
     #pagination .pagination-info {
@@ -11623,17 +11600,16 @@ a.reward-main-btn:hover {
         margin: auto;
         height: 100%;
     }
-    #pagination .prev-post a:hover div,
+
-    #pagination .next-post a:hover div {
+    #pagination .next-post a:hover div,#pagination .prev-post a:hover div {
-        color: var(--heo-white) !important;
+        color: var(--heo-white)!important
     }
 }
 
 @media screen and (max-width: 768px) {
 
-    #pagination .prev-post a:hover,
+    #pagination .next-post a:hover,#pagination .prev-post a:hover {
-    #pagination .next-post a:hover {
+        background:var(--heo-none)
-        background: var(--heo-none);
     }
 
 }
@@ -11658,37 +11634,137 @@ a.reward-main-btn:hover {
     filter: blur(5px);
 }
 
-#post #pagination .prev-post .label,
+#pagination .next_info,#post #pagination .prev_info {
-#pagination .next-post .label {
+    font-weight: 700;
-    color: white;
-}
-
-#post #pagination .prev-post2 .label,
-#pagination .next-post2 .label {
-    color: white;
-}
-
-#post #pagination .prev_info,
-#pagination .next_info {
-    color: white;
-    font-weight: bold;
     -webkit-line-clamp: 2;
     white-space: normal;
     line-height: 1.3;
-    font-size: 0.9rem;
+    font-size: .9rem;
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-bottom: 10px
 }
 
 #post #pagination {
     overflow: hidden;
     position: inherit;
+    border: var(--style-border-always)
 }
 
 #pagination.pagination-post {
     background: var(--heo-card-bg);
 }
 
+@media screen and (min-width: 1300px) {
+    #post #pagination {
+        position:fixed;
+        width: 300px;
+        bottom: -100px;
+        right: 60px;
+        z-index: 1000;
+        height: fit-content;
+        transition: cubic-bezier(.42,0,.3,1.11) .3s;
+        border: var(--style-border);
+        border-radius: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1002
+    }
+
+
+
+    #post #pagination.show-window {
+        bottom: 20px;
+        opacity: 1
+    }
+
+    #post #pagination:hover {
+        border: var(--style-border-hover)
+    }
+
+    #pagination .next-post a,#pagination .prev-post a {
+        border: none;
+        height: fit-content;
+        padding: .5rem 0
+    }
+
+    #pagination.pagination-post {
+        border-radius: 0
+    }
+
+    #pagination .next_info,#post #pagination .prev_info {
+        font-size: 14px;
+        font-weight: 400;
+        margin-bottom: 0
+    }
+
+    #pagination .pagination-info {
+        padding: .5rem 1rem;
+        transform: none
+    }
+
+    #post #pagination {
+        background: 0 0
+    }
+
+    #pagination .next_info,#post #pagination .prev_info {
+        color: var(--heo-fontcolor);
+    }
+
+    #pagination .next-post,#pagination .prev-post,.next-post.pull-right,.prev-post.pull-left {
+        background: var(--heo-maskbgdeep);
+        -webkit-backdrop-filter: blur(5px);
+        backdrop-filter: blur(5px);
+        transform: translateZ(0)
+    }
+
+    #pagination .next-post a:hover,#pagination .prev-post a:hover {
+        background: var(--heo-main);
+    }
+
+    #pagination .next-post .label,#post #pagination .prev-post .label {
+        color: var(--heo-fontcolor)
+    }
+
+    #pagination.pagination-post .next-post.pull-full img,#pagination.pagination-post .next-post.pull-right img,#pagination.pagination-post .prev-post.pull-full img,#pagination.pagination-post .prev-post.pull-left img {
+        display: none;
+        top: 0
+    }
+
+
+    #post #pagination .prev-post .label,
+    #pagination .next-post .label {
+        color: var(--heo-fontcolor)
+    }
+
+
+    .prev-post.pull-left {
+        display: none
+    }
+
+    .next-post.pull-right {
+        width: 100%!important
+    }
+
+    #pagination .next-post .pagination-info {
+        text-align: left;
+        position: relative
+    }
+
+    #pagination .next-post .label,#post #pagination .prev-post .label {
+        color: var(--heo-fontcolor);
+        font-weight: 700;
+        font-size: 12px;
+        margin-bottom: .5rem;
+        border-bottom: var(--style-border);
+        line-height: 1;
+        padding-bottom: .5rem
+    }
+
+}
+
 @media screen and (max-width: 768px) {
     .prev-post.pull-left {
         border-bottom: var(--style-border-always);

templates/modules/common/rightside.html

@@ -19,6 +19,12 @@
         #rightside {
             display: none;
         }
+        .comment-barrage {
+            right: 20px;
+        }
+        #post #pagination {
+            right: 20px;
+        }
     </style>
 
     <link th:if="${theme.config.tool.rightside.readmode && theme.config.tool.rightside.rightsideEnable}"

templates/modules/footer.html

@@ -45,9 +45,9 @@
             <div th:if="${theme.config.footer.footer_group.enable_footer_group}" class="footer-group">
                 <div class="footer-title-group">
                     <h3 class="footer-title">友链</h3>
-                    <a class="random-friends-btn"
+                    <a class="random-friends-btn" id="footer-random-friends-btn"
                        href="javascript:heo.addFriendLinksInFooter();" rel="external nofollow" title="换一批友情链接"
-                       data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right"></i></a>
+                       data-pjax-state="external"><i class="haofont hao-icon-arrow-rotate-right" style="font-size: 16px;"></i></a>
                 </div>
                 <div class="footer-links" id="friend-links-in-footer"></div>
             </div>

templates/post.html

@@ -128,10 +128,10 @@
                 <!-- 版权声明 -->
                 <th:block th:replace="~{modules/post/copyright :: copyright}"></th:block>
 
-                <nav class="pagination-post" id="pagination"
+                <nav class="pagination-post needEndHide" id="pagination"
                      th:with="postCursor = ${postFinder.cursor(post.metadata.name)},
                      postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,'?') ? theme.config.layout.postRandomImg+'&' : theme.config.layout.postRandomImg+'?'}">
-                    <div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
+                    <div th:if="${postCursor.hasPrevious()}" th:class="${postCursor.hasNext()==false} ? 'prev-post pull-full ' : 'prev-post pull-left'">
                         <a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
                                  th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? postRandomImg+postCursor.previous.spec.title : postCursor.previous.spec.cover}"
@@ -144,7 +144,7 @@
                             </div>
                         </a>
                     </div>
-                    <div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
+                    <div th:if="${postCursor.hasNext()}" th:class="${postCursor.hasPrevious()==false} ? 'next-post pull-full ':'next-post pull-right'">
                         <a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
                                  th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? postRandomImg+postCursor.next.spec.title : postCursor.next.spec.cover}"