https://github.com/b3log/solo/issues/12720 Pinghsu

Pinghsu/article.ftl

@@ -84,7 +84,11 @@
         </#if>
         </div>
     </div>
-    <div class="post__toc"></div>
+    <div class="post__toc">
+    <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+        <#include "../../common-template/toc.ftl"/>
+    </#if>
+    </div>
     <div class="body--gray post__gray">
         <div class="wrapper comment">
             <@comments commentList=articleComments article=article></@comments>

Pinghsu/css/base.scss

@@ -19,11 +19,12 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.3, Mar 16, 2019
+ * @version 0.2.0.0, Mar 22, 2019
 */
 @import "../../../scss/reset";
 @import "../../../scss/function";
 @import "../../../scss/nprogress";
+@import "../../../scss/toc";
 @import "icon";
 @import "vditor/src/assets/scss/classic";
 
@@ -34,6 +35,12 @@ $gray:  #5f5f5f !default;
 $gray-lighter: #e0e0e0 !default;
 $gray-lightest: #f7f7f7 !default;
 
+.user__site {
+  display: inline-block;
+  margin: 40px 5px 0;
+  height: 20px;
+}
+
 body {
   display: flex;
   flex-direction: column;
@@ -64,9 +71,6 @@ a:active, a:focus, a:hover {
 
 .vditor-reset {
   font-size: 14px;
-  .b3-solo-list {
-    display: none;
-  }
 
   a {
     color: $black;
@@ -239,8 +243,8 @@ a:active, a:focus, a:hover {
   }
   &__nav {
     text-align: center;
-    height: 65px;
+    height: 95px;
-    line-height: 65px;
+    line-height: 95px;
     a {
       padding: 0 25px;
     }
@@ -522,37 +526,21 @@ a:active, a:focus, a:hover {
       display: none;
     }
 
-    .b3-solo-list {
+    .article__toc {
+      overflow: initial;
       border-left: 1px solid $gray-lighter;
       margin: 0;
       font-size: 14px;
       line-height: 24px;
+      li.current a {
+        color: $red;
+      }
       a {
         display: block;
         margin-top: -24px;
       }
     }
 
-    .b3-solo-list-h2,
-    .b3-solo-list-h4,
-    .b3-solo-list-h5,
-    .b3-solo-list-h3 {
-      margin-left: 0;
-    }
-
-    .b3-solo-list-h2 a {
-      margin-left: 10px;
-    }
-    .b3-solo-list-h3 a {
-      margin-left: 20px;
-    }
-    .b3-solo-list-h4 a {
-      margin-left: 30px;
-    }
-    .b3-solo-list-h5 a {
-      margin-left: 40px;
-    }
-
     li {
       &:before {
         position: relative;
@@ -563,6 +551,8 @@ a:active, a:focus, a:hover {
         height: 7px;
         content: '';
         border-radius: 50%;
+      }
+      &.current:before {
         background-color: $red;
       }
     }

Pinghsu/footer.ftl

@@ -18,6 +18,10 @@
 
 -->
 <footer class="footer">
+    <#include "../../common-template/macro-user_site.ftl"/>
+    <div class="ft__center">
+        <@userSite dir="n"/>
+    </div>
     <nav class="footer__nav mobile__none">
         <#list pageNavigations as page>
             <a class="ft__link" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">

Pinghsu/js/common.js

@@ -55,6 +55,8 @@ var Skin = {
           this.className = 'current'
         }
       })
+
+      Skin._initToc()
     })
 
     $('.header__nav a').each(function () {
@@ -69,20 +71,50 @@ var Skin = {
     })
   },
   _initToc: function () {
-    if ($('.vditor-reset .b3-solo-list li').length === 0 || $(window).width() < 746) {
+    if ($('.article__toc').length === 0) {
-      $('.post__toc .b3-solo-list').remove()
       return
     }
+    $('.post__toc').css('left', $('.post').offset().left + $('.post').outerWidth())
 
-    $('.post__toc').html($('.b3-solo-list')).css('left', $('.post').offset().left + $('.post').outerWidth())
+    var $articleTocs = $('.vditor-reset [id^=b3_solo_h]'),
+      $articleToc = $('.article__toc');
+
+    $(window).unbind('scroll').scroll(function (event) {
+      if ($('.article__toc li').length === 0) {
+        return false;
+      }
 
-    $(window).scroll(function () {
       if ($(window).scrollTop() > 72) {
         $('.post__toc').show()
       } else {
         $('.post__toc').hide()
+        return
       }
-    })
+
+      // 界面各种图片加载会导致帖子目录定位
+      var toc = [];
+      $articleTocs.each(function (i) {
+        toc.push({
+          id: this.id,
+          offsetTop: this.offsetTop
+        });
+      });
+
+      // 当前目录样式
+      var scrollTop = $(window).scrollTop();
+      for (var i = 0, iMax = toc.length; i < iMax; i++) {
+        if (scrollTop < toc[i].offsetTop - 20) {
+          $articleToc.find('li').removeClass('current');
+          var index = i > 0 ? i - 1 : 0;
+          $articleToc.find('a[href="#' + toc[index].id + '"]').parent().addClass('current');
+          break;
+        }
+      }
+      if (scrollTop >= toc[toc.length - 1].offsetTop - 20) {
+        $articleToc.find('li').removeClass('current');
+        $articleToc.find('li:last').addClass('current');
+      }
+    });
 
     $(window).scroll()
   },

Pinghsu/js/common.min.js

@@ -1 +1 @@
-var Skin={init:function(){new Headroom($("header")[0],{tolerance:0,offset:70,classes:{initial:"header",pinned:"header--down",unpinned:"header--up",top:"header",notTop:"header",bottom:"header",notBottom:"header"}}).init(),Util.initPjax(function(){0===$(".post__fix").length?$("body").addClass("body--gray"):$("body").removeClass("body--gray"),$(".header__nav a").each(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})}),$(".header__nav a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})},_initToc:function(){0===$(".vditor-reset .b3-solo-list li").length||$(window).width()<746?$(".post__toc .b3-solo-list").remove():($(".post__toc").html($(".b3-solo-list")).css("left",$(".post").offset().left+$(".post").outerWidth()),$(window).scroll(function(){72<$(window).scrollTop()?$(".post__toc").show():$(".post__toc").hide()}),$(window).scroll())},_initShare:function(){var t=$(".post__share"),e=t.find(".post__code"),o=e.data("url"),i=e.data("avatar"),n=encodeURIComponent(e.data("title")+" - "+e.data("blogtitle")),a=encodeURIComponent(o),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+a+"&pic="+i,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+a+"&sharesource=qzone&title="+n+"&pics="+i,s.twitter="https://twitter.com/intent/tweet?status="+n+" "+a,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===e.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){e.qrcode({width:128,height:128,text:o})}}):e.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})},initArticle:function(){new Headroom($(".post__fix")[0],{tolerance:0,offset:48,classes:{initial:"post__fix",pinned:"post__fix--pinned",unpinned:"post__fix--unpinned",top:"post__fix",notTop:"post__fix",bottom:"post__fix",notBottom:"post__fix"}}).init(),Skin._initShare(),Skin._initToc()}};Skin.init();
+var Skin={init:function(){new Headroom($("header")[0],{tolerance:0,offset:70,classes:{initial:"header",pinned:"header--down",unpinned:"header--up",top:"header",notTop:"header",bottom:"header",notBottom:"header"}}).init(),Util.initPjax(function(){0===$(".post__fix").length?$("body").addClass("body--gray"):$("body").removeClass("body--gray"),$(".header__nav a").each(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})}),$(".header__nav a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})},_initToc:function(){0===$(".vditor-reset .article__toc li").length||$(window).width()<746?$(".post__toc .article__toc").remove():($(".post__toc").html($(".article__toc")).css("left",$(".post").offset().left+$(".post").outerWidth()),$(window).scroll(function(){72<$(window).scrollTop()?$(".post__toc").show():$(".post__toc").hide()}),$(window).scroll())},_initShare:function(){var t=$(".post__share"),e=t.find(".post__code"),o=e.data("url"),i=e.data("avatar"),n=encodeURIComponent(e.data("title")+" - "+e.data("blogtitle")),a=encodeURIComponent(o),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+a+"&pic="+i,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+a+"&sharesource=qzone&title="+n+"&pics="+i,s.twitter="https://twitter.com/intent/tweet?status="+n+" "+a,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===e.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){e.qrcode({width:128,height:128,text:o})}}):e.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})},initArticle:function(){new Headroom($(".post__fix")[0],{tolerance:0,offset:48,classes:{initial:"post__fix",pinned:"post__fix--pinned",unpinned:"post__fix--unpinned",top:"post__fix",notTop:"post__fix",bottom:"post__fix",notBottom:"post__fix"}}).init(),Skin._initShare(),Skin._initToc()}};Skin.init();