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

Finding/css/base.scss

@@ -21,9 +21,22 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
- * @version 2.2.0.1, Mar 16, 2019
+ * @version 2.3.0.0, Mar 22, 2019
  */
+@import "../../../scss/toc";
+@import "../../../scss/usite";
 @import "vditor/src/assets/scss/classic";
+
+.user__site {
+  float: left;
+  margin-left: 10px;
+  svg {
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+}
+
 /* start reset */
 html {
   height: 100%;
@@ -637,6 +650,8 @@ pre code, pre tt {
 
 .nav {
   position: fixed;
+  display: flex;
+  flex-direction: column;
   top: 0;
   right: 0;
   bottom: 0;
@@ -654,9 +669,14 @@ pre code, pre tt {
   transition: transform 0.5s ease,
   opacity 0.3s ease 0.7s;
   overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .nav ul {
+  flex: 1;
   margin: 0;
   padding: 0px 0 5%;
   list-style: none;
@@ -710,19 +730,12 @@ pre code, pre tt {
 }
 
 .nav .count {
-  position: absolute;
-  bottom: 10px;
   font-size: 1rem;
-  width: 100%;
   word-wrap: normal;
   word-break: break-all;
   white-space: nowrap;
 }
 
-.nav .b3-solo-list li.current a {
-  color: #fff;
-}
-
 .nav .page-icon {
   float: left;
   height: 14px;

Finding/js/Finding.js

@@ -67,66 +67,13 @@ var Finding = {
    * @returns {undefined}
    */
   _initToc: function () {
-    if ($('.b3-solo-list li').length === 0) {
+    if ($('.article__toc li').length === 0) {
-      $('.nav .icon-list').hide();
-      $('.nav .icon-sitemap').click();
       return;
     }
 
-    $('.nav ul:first').after($('.b3-solo-list'));
     if ($(window).width() > 500) {
       $("body").toggleClass("nav-opened nav-closed");
     }
-
-    $('.nav .icon-list').show();
-    Finding.tabNav('toc')
-
-    var $articleTocs = $('.vditor-reset [id^=b3_solo_h]'),
-      $articleToc = $('.b3-solo-list');
-
-    $(window).scroll(function (event) {
-      if ($('.b3-solo-list li').length === 0) {
-        return false;
-      }
-
-      // 界面各种图片加载会导致帖子目录定位
-      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 + 280) {
-          $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 + 280) {
-        $articleToc.find('li').removeClass('current');
-        $articleToc.find('li:last').addClass('current');
-      }
-    });
-
-    $(window).scroll();
-  },
-  tabNav: function (type) {
-    $('.nav .current').removeClass('current');
-    if (type === 'toc') {
-      $('.nav ul:first, .nav .count').hide();
-      $('.nav ul:last').show();
-      $('.icon-list').addClass('current');
-    } else {
-      $('.nav ul:first, .nav .count').show();
-      $('.nav ul:last').hide();
-      $('.icon-sitemap').addClass('current');
-    }
   },
   /**
    * 分享

Finding/js/Finding.min.js

@@ -1 +1 @@
-var Finding={init:function(){Util.killIE(),this._initToc(),this.share(),$(".scroll-down").click(function(t){t.preventDefault();var n=$(this),i=$("html, body"),o=!!n.attr("data-offset")&&n.attr("data-offset"),a=parseInt(o);i.stop(!0,!1).animate({scrollTop:$(this.hash).offset().top+a},500)}),$("body").append('<a class="icon-gotop fn-none" href="javascript:Util.goTop()"></a><span class="menu-button icon-menu"><span class="word">Menu</span></span>'),$(".menu-button").click(function(t){t.stopPropagation(),$("body").toggleClass("nav-opened nav-closed")}),$(window).scroll(function(){$(window).scrollTop()>$(".main-header").height()?$(".icon-gotop").show():$(".icon-gotop").hide()})},_initToc:function(){if(0===$(".b3-solo-list li").length)return $(".nav .icon-list").hide(),void $(".nav .icon-sitemap").click();$(".nav ul:first").after($(".b3-solo-list")),500<$(window).width()&&$("body").toggleClass("nav-opened nav-closed"),$(".nav .icon-list").show(),Finding.tabNav("toc");var s=$(".vditor-reset [id^=b3_solo_h]"),l=$(".b3-solo-list");$(window).scroll(function(t){if(0===$(".b3-solo-list li").length)return!1;var n=[];s.each(function(t){n.push({id:this.id,offsetTop:this.offsetTop})});for(var i=$(window).scrollTop(),o=0,a=n.length;o<a;o++)if(i<n[o].offsetTop+280){l.find("li").removeClass("current");var e=0<o?o-1:0;l.find('a[href="#'+n[e].id+'"]').parent().addClass("current");break}i>=n[n.length-1].offsetTop+280&&(l.find("li").removeClass("current"),l.find("li:last").addClass("current"))}),$(window).scroll()},tabNav:function(t){$(".nav .current").removeClass("current"),"toc"===t?($(".nav ul:first, .nav .count").hide(),$(".nav ul:last").show(),$(".icon-list").addClass("current")):($(".nav ul:first, .nav .count").show(),$(".nav ul:last").hide(),$(".icon-sitemap").addClass("current"))},share:function(){var t=$(".share"),n=t.find(".icon-wechat"),i=n.data("url"),o=n.data("avatar"),a=encodeURIComponent(n.data("title")+" - "+n.data("blogtitle")),e=encodeURIComponent(i),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+a+"&url="+e+"&pic="+o,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+e+"&sharesource=qzone&title="+a+"&pics="+o,s.twitter="https://twitter.com/intent/tweet?status="+a+" "+e,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===n.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){n.qrcode({width:128,height:128,text:i})}}):n.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})}};Finding.init();
+var Finding={init:function(){Util.killIE(),this._initToc(),this.share(),$(".scroll-down").click(function(t){t.preventDefault();var n=$(this),i=$("html, body"),o=!!n.attr("data-offset")&&n.attr("data-offset"),a=parseInt(o);i.stop(!0,!1).animate({scrollTop:$(this.hash).offset().top+a},500)}),$("body").append('<a class="icon-gotop fn-none" href="javascript:Util.goTop()"></a><span class="menu-button icon-menu"><span class="word">Menu</span></span>'),$(".menu-button").click(function(t){t.stopPropagation(),$("body").toggleClass("nav-opened nav-closed")}),$(window).scroll(function(){$(window).scrollTop()>$(".main-header").height()?$(".icon-gotop").show():$(".icon-gotop").hide()})},_initToc:function(){if(0===$(".article__toc li").length)return $(".nav .icon-list").hide(),void $(".nav .icon-sitemap").click();$(".nav ul:first").after($(".article__toc")),500<$(window).width()&&$("body").toggleClass("nav-opened nav-closed"),$(".nav .icon-list").show(),Finding.tabNav("toc");var s=$(".vditor-reset [id^=b3_solo_h]"),l=$(".article__toc");$(window).scroll(function(t){if(0===$(".article__toc li").length)return!1;var n=[];s.each(function(t){n.push({id:this.id,offsetTop:this.offsetTop})});for(var i=$(window).scrollTop(),o=0,a=n.length;o<a;o++)if(i<n[o].offsetTop+280){l.find("li").removeClass("current");var e=0<o?o-1:0;l.find('a[href="#'+n[e].id+'"]').parent().addClass("current");break}i>=n[n.length-1].offsetTop+280&&(l.find("li").removeClass("current"),l.find("li:last").addClass("current"))}),$(window).scroll()},tabNav:function(t){$(".nav .current").removeClass("current"),"toc"===t?($(".nav ul:first, .nav .count").hide(),$(".nav ul:last").show(),$(".icon-list").addClass("current")):($(".nav ul:first, .nav .count").show(),$(".nav ul:last").hide(),$(".icon-sitemap").addClass("current"))},share:function(){var t=$(".share"),n=t.find(".icon-wechat"),i=n.data("url"),o=n.data("avatar"),a=encodeURIComponent(n.data("title")+" - "+n.data("blogtitle")),e=encodeURIComponent(i),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+a+"&url="+e+"&pic="+o,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+e+"&sharesource=qzone&title="+a+"&pics="+o,s.twitter="https://twitter.com/intent/tweet?status="+a+" "+e,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===n.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){n.qrcode({width:128,height:128,text:i})}}):n.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})}};Finding.init();

Finding/side.ftl

@@ -19,9 +19,6 @@
 -->
 <div class="fn-clear">
     <span class="fn-right">
-        <a href="javascript:Finding.tabNav('link')" title="${permalinkLabel}" class="icon-sitemap current"></a>
-        &nbsp;
-        <a href="javascript:Finding.tabNav('toc')" title="${tocLabel}" class="icon-list fn-none"> &nbsp; </a>
         <#if isLoggedIn>
         <a href="${servePath}/admin-index.do#main" title="${adminLabel}" class="icon-setting"></a>
         &nbsp; 
@@ -31,35 +28,43 @@
         </#if>
     </span>
 </div>
-<ul>
+<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
-    <#list pageNavigations as page>
+    <#include "../../common-template/toc.ftl"/>
-    <li>
+<#else>
-        <a href="${page.pagePermalink}" target="${page.pageOpenTarget}"><#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}</a>
+    <ul>
-    </li>
+        <#list pageNavigations as page>
-    </#list>
+        <li>
-    <li>
+            <a href="${page.pagePermalink}" target="${page.pageOpenTarget}"><#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}</a>
-        <a href="${servePath}/dynamic.html">${dynamicLabel}</a>
+        </li>
-    </li>
+        </#list>
-    <li>
+        <li>
-        <a href="${servePath}/category.html">${categoryLabel}</a>
+            <a href="${servePath}/dynamic.html">${dynamicLabel}</a>
-    </li>
+        </li>
-    <li>
+        <li>
-        <a href="${servePath}/tags.html">${allTagsLabel}</a>
+            <a href="${servePath}/category.html">${categoryLabel}</a>
-    </li>
+        </li>
-    <li>
+        <li>
-        <a href="${servePath}/archives.html">${archiveLabel}</a>
+            <a href="${servePath}/tags.html">${allTagsLabel}</a>
-    </li>
+        </li>
-    <li>
+        <li>
-        <a href="${servePath}/links.html">${linkLabel}</a>
+            <a href="${servePath}/archives.html">${archiveLabel}</a>
-    </li>
+        </li>
-    <li>
+        <li>
-        <a rel="alternate" href="${servePath}/rss.xml">${subscribeLabel}</a>
+            <a href="${servePath}/links.html">${linkLabel}</a>
-    </li>
+        </li>
-    <Li>
+        <li>
-        <a href="${servePath}/search?keyword=">Search</a>
+            <a rel="alternate" href="${servePath}/rss.xml">${subscribeLabel}</a>
-    </Li>
+        </li>
-</ul>
+        <Li>
+            <a href="${servePath}/search?keyword=">Search</a>
+        </Li>
+    </ul>
+</#if>
 <div class="count">
+    <div class="fn-clear">
+        <#include "../../common-template/macro-user_site.ftl"/>
+        <@userSite dir=""/>
+    </div>
     <span>
         ${viewCount1Label}
         ${statistic.statisticBlogViewCount}