2 https://github.com/b3log/solo/issues/12748

Casper/article.ftl

@@ -41,6 +41,7 @@
     <@header type="article"></@header>
     <div class="article__top">
         <div class="fn__clear">
+            <div class="toc fn__none" onclick="$('.post__toc').slideToggle()">${tocLabel}</div>
             <div class="title fn__pointer" onclick="Util.goTop()">${article.articleTitle}</div>
             <#include "../../common-template/share.ftl">
         </div>

Casper/css/base.scss

@@ -747,6 +747,13 @@ a {
       .title {
         display: none;
       }
+      .toc {
+        display: block;
+        float: left;
+        line-height: 40px;
+        padding: 0 10px;
+        cursor: pointer;
+      }
     }
     &__share .item {
       height: 40px;
@@ -807,4 +814,12 @@ a {
       margin-bottom: 40px;
     }
   }
+
+  .post__toc {
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    top: 41px;
+    bottom: 0;
+  }
 }

Casper/js/common.js

@@ -38,9 +38,15 @@ var Skin = {
     var $articleProgress = $('.article__progress')
 
     if ($articleToc.length === 1) {
-      $('.post__toc').
-        css('left', $('.article .item__content').offset().left +
-          $('.article .item__content').outerWidth() - 80)
+      if ($(window).width() > 876) {
+        $('.post__toc').
+          css('left', $('.article .item__content').offset().left +
+            $('.article .item__content').outerWidth() - 80)
+      } else {
+        $('.post__toc a').click(function () {
+          $('.post__toc').hide()
+        })
+      }
     }
 
     $(window).unbind('scroll').scroll(function (event) {
@@ -58,16 +64,17 @@ var Skin = {
         $('.article__top').css('top', -61)
       }
 
-      if ($('.article__toc li').length === 0 || $(window).width() < 1000) {
+      if ($('.article__toc li').length === 0) {
         return false
       }
 
-      if ($(window).scrollTop() > 975 && $(window).scrollTop() <
-        $('.article').outerHeight() + 100) {
-        $('.post__toc').show()
-      } else {
-        $('.post__toc').hide()
-        return
+      if ($(window).width() > 876) {
+        if ($(window).scrollTop() > 975 && $(window).scrollTop() <
+          $('.article').outerHeight() + 100) {
+          $('.post__toc').show()
+        } else {
+          $('.post__toc').hide()
+        }
       }
 
       // 界面各种图片加载会导致帖子目录定位