移动端目录

templates/assets/css/post-copyright.css

@@ -16,12 +16,13 @@
     position: absolute;
     right: 22px;
     top: -77px;
-    content: "\f25e";
+    content: "\e668";
+    font-family: "haofont" !important;
     font-size: 180px;
     font-family: "Font Awesome 5 Brands";
     color: var(--heo-fontcolor);
     opacity: 0.1;
-    filter: blur(7px);
+    /*filter: blur(7px);*/
 }
 
 @media screen and (max-width: 768px) {

templates/assets/js/main.js

@@ -159,6 +159,10 @@ document.addEventListener('DOMContentLoaded', function () {
         // 没有 toc 目录，则直接移除
         if (headers.length === 0) {
             document.getElementById("card-toc").remove();
+            const $mobileTocButton = document.getElementById("mobile-toc-button")
+            if($mobileTocButton){
+                $('#mobile-toc-button').attr('style', 'display: none');
+            }
         } else {
             tocbot.init({
                 tocSelector: '.toc-content',
@@ -218,7 +222,15 @@ document.addEventListener('DOMContentLoaded', function () {
                 ? saveToLocal.set('aside-status', 'show', 2)
                 : saveToLocal.set('aside-status', 'hide', 2)
             $htmlDom.toggle('hide-aside')
+        },
+        runMobileToc: () => {
+            const $cardToc = document.getElementById("card-toc")
+            if ($cardToc.classList.contains("open")) {
+                $cardToc.classList.remove("open");
+            } else {
+                $cardToc.classList.add("open");
             }
+        },
     }
 
     document.getElementById('rightside').addEventListener('click', function (e) {
@@ -230,6 +242,9 @@ document.addEventListener('DOMContentLoaded', function () {
             case 'rightside-config':
                 rightSideFn.showOrHideBtn()
                 break
+            case "mobile-toc-button":
+                rightSideFn.runMobileToc();
+                break;
             case 'readmode':
                 rightSideFn.switchReadMode()
                 break

templates/assets/zhheo/zhheoblog.css

@@ -2240,19 +2240,55 @@ blockquote footer cite::before {
     }
 }
 
-@media screen and (max-width: 900px) {
+
+@media screen and (max-width: 1200px) {
     #aside-content #card-toc {
-        position: fixed;
-        right: -100%;
+        position:fixed;
+        right: 55px;
         bottom: 30px;
         z-index: 100;
+        max-width: 380px;
         max-height: calc(100% - 60px);
-        width: 300px;
-        opacity: 0;
-        transform-origin: right bottom;
+        width: calc(100% - 80px);
+        -webkit-transition: -webkit-transform .3s;
+        -moz-transition: -moz-transform .3s;
+        -o-transition: -o-transform .3s;
+        -ms-transition: -ms-transform .3s;
+        transition: transform .3s;
+        -webkit-transform: scale(0);
+        -moz-transform: scale(0);
+        -o-transform: scale(0);
+        -ms-transform: scale(0);
+        transform: scale(0);
+        -webkit-transform-origin: right bottom;
+        -moz-transform-origin: right bottom;
+        -o-transform-origin: right bottom;
+        -ms-transform-origin: right bottom;
+        transform-origin: right bottom
+    }
+
+    #aside-content #card-toc.open {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -o-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1)
     }
 }
 
+/*@media screen and (max-width: 900px) {*/
+/*    #aside-content #card-toc {*/
+/*        position: fixed;*/
+/*        right: -100%;*/
+/*        bottom: 30px;*/
+/*        z-index: 100;*/
+/*        max-height: calc(100% - 60px);*/
+/*        width: 300px;*/
+/*        opacity: 0;*/
+/*        transform-origin: right bottom;*/
+/*    }*/
+/*}*/
+
 #aside-content #card-toc .toc-content {
     overflow-y: auto;
     max-height: calc(100vh - 120px);
@@ -6543,7 +6579,7 @@ a.console_switchbutton {
     #footer {
         background: linear-gradient(180deg, var(--heo-background) 0%, var(--heo-card-bg) 25%);
         margin-top: 0;
-        z-index: 999;
+        z-index: 3;
     }
 }
 
@@ -10249,7 +10285,7 @@ a.extend.prev {
     }
 
     #aside-content {
-        z-index: 2;
+        z-index: 99;
         background: var(--heo-background);
         padding: 0 1rem;
         display: flex;

templates/modules/common/rightside.html

@@ -10,6 +10,7 @@
         </div>
         <div id="rightside-config-show">
             <button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
+            <button th:if="${htmlType == 'post'}" class="close" id="mobile-toc-button" type="button" title="目录"><i class="haofont hao-icon-list-ul"></i></button>
             <a id="to_comment" href="javascript:heo.scrollTo('post-comment')" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
             <a id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
             <button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>

templates/modules/footer.html

@@ -153,13 +153,8 @@
     </div>
     <div id="quit-box" onclick="RemoveRewardMask()"></div>
 
-
-
     <!--评论弹幕弹窗 -->
-    <div th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)
-    && not #strings.isEmpty(theme.config.comments.twikoos.accessToken)}" class="comment-barrage needEndHide"
-         style="display: none;"></div>
-
+    <div class="comment-barrage needEndHide" style="display: none;"></div>
 
 </footer>