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

next/archives.ftl

@@ -30,7 +30,7 @@
         <main class="main">
             <div class="wrapper">
             <div class="content page-archive">
-                <section class="posts-collapse">
+                <section class="posts-collapse posts-collapse--line">
                     <span class="archive-move-on"></span>
                     <span class="archive-page-counter">
                         ${ohLabel}..!  ${sumLabel} ${statistic.statisticPublishedBlogArticleCount} ${fightLabel}

next/css/base.scss

@@ -20,14 +20,29 @@
  * skin next style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 2.0.0.1, Mar 16, 2019
+ * @version 2.1.0.0, Mar 22, 2019
  */
-
+@import "../../../scss/usite";
+@import "../../../scss/toc";
 @import "vditor/src/assets/scss/classic";
 
+.user__site {
+  float: left;
+  height: 16px;
+  line-height: 16px;
+  border-bottom: 0;
+  margin: 8px 5px 0 0;
+  svg {
+    height: 16px;
+    width: 16px;
+    fill: currentColor;
+  }
+}
+
 #soloEditor {
   z-index: 1041 !important;
 }
+
 /* start reset */
 html {
   background-color: #f5f5f5;
@@ -75,6 +90,7 @@ img {
   max-width: 100%;
   height: auto;
 }
+
 /* end reset */
 
 /* start function */
@@ -101,6 +117,7 @@ img {
 .fn-none {
   display: none;
 }
+
 /* end function */
 
 /* start common */
@@ -133,18 +150,23 @@ img {
 .icon-register:before {
   content: "\e973";
 }
+
 .icon-setting:before {
   content: "\e994";
 }
+
 .icon-login:before {
   content: "\ea13";
 }
+
 .icon-logout:before {
   content: "\ea14";
 }
+
 .icon-rss:before {
   content: "\e901";
 }
+
 .form {
   width: 100%;
   margin-top: 50px;
@@ -178,6 +200,7 @@ img {
   color: #9EABB3;
   margin-right: 10px;
 }
+
 /* end common */
 
 /* start framework */
@@ -403,6 +426,7 @@ img {
   border-color: transparent transparent #fff transparent;
   border-style: solid;
 }
+
 /* end framework */
 
 /* start side */
@@ -422,13 +446,16 @@ img {
   text-align: center;
   box-sizing: border-box;
 }
+
 .sidebar::-webkit-scrollbar {
   display: none;
 }
+
 .sidebar a {
   color: #999;
   border-bottom-color: #555;
 }
+
 .sidebar a:hover {
   color: #eee;
 }
@@ -458,17 +485,21 @@ img {
   padding: 0 15px;
   border-left: 1px solid #333;
 }
+
 .sidebar .site-state-item:first-child {
   border-left: none;
 }
+
 .sidebar .site-state-item a {
   border-bottom: none;
 }
+
 .sidebar .site-state-item-count {
   display: block;
   text-align: center;
   font-size: 18px;
 }
+
 .sidebar .site-state-item-name {
   font-size: 13px;
 }
@@ -476,6 +507,7 @@ img {
 .sidebar .feed-link {
   margin-top: 20px;
 }
+
 .sidebar .feed-link a {
   display: inline-block;
   padding: 3px 15px;
@@ -483,6 +515,7 @@ img {
   border: 1px solid #fc6423;
   border-radius: 4px;
 }
+
 .sidebar .feed-link a:hover {
   color: #fff;
   background: #fc6423;
@@ -491,6 +524,7 @@ img {
 .sidebar .links-of-author {
   margin-top: 20px;
 }
+
 .sidebar .links-of-author a {
   display: inline-block;
   vertical-align: middle;
@@ -499,6 +533,7 @@ img {
   border-bottom-color: #555;
   font-size: 13px;
 }
+
 .sidebar .links-of-author a:before {
   display: inline-block;
   vertical-align: middle;
@@ -510,16 +545,19 @@ img {
   background: #0dd5ff;
 }
 
-.sidebar .b3-solo-list {
+.sidebar .article__toc {
   margin: 20px;
   list-style: none;
   text-align: left;
   padding: 0;
   font-size: 14px;
   line-height: 2;
+  li {
+    display: block;
+  }
 }
 
-.sidebar .b3-solo-list li.current a {
+.sidebar .article__toc li.current a {
   color: #87daff;
 }
 
@@ -550,13 +588,13 @@ img {
   margin-left: 10px;
 }
 
-
 /* end side */
 
 /* start list*/
 .posts-expand .post-item {
   margin-top: 120px;
 }
+
 .posts-expand .post-item:first-child {
   margin-top: 0;
 }
@@ -614,6 +652,7 @@ img {
   margin: 120px 0 0;
   text-align: left;
 }
+
 .pagination .next,
 .pagination .page-number {
   display: inline-block;
@@ -629,15 +668,18 @@ img {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }
+
 .pagination .next:hover,
 .pagination .page-number:hover {
   border-top-color: #222;
 }
+
 .pagination .page-number.current {
   color: #fff;
   background: #ccc;
   border-top-color: #ccc;
 }
+
 /* end list*/
 
 .post-header {
@@ -652,17 +694,21 @@ img {
   box-sizing: border-box;
   margin: auto;
 }
+
 .posts-expand .post-tags {
   margin-top: 40px;
 }
+
 .posts-expand .post-tags a {
   padding: 1px 5px;
   background: #f5f5f5;
   border-bottom: none;
 }
+
 .posts-expand .post-tags a:hover {
   background: #ccc;
 }
+
 .posts-expand .post-nav {
   margin-top: 40px;
   overflow: hidden;
@@ -670,10 +716,12 @@ img {
   white-space: nowrap;
   border-top: 1px solid #eee;
 }
+
 .post-nav-item a:hover {
   color: #222;
   border-bottom: none;
 }
+
 .post-nav-item a {
   position: relative;
   display: inline-block;
@@ -699,6 +747,7 @@ img {
 .vditor-reset p {
   margin: 0 0 25px 0;
 }
+
 /* end article */
 
 /* start comments */
@@ -765,6 +814,7 @@ ul.comments .comment-meta time {
   margin-left: 8px;
   padding-left: 12px;
 }
+
 /* end comments */
 
 /* start tags */
@@ -806,9 +856,14 @@ ul.comments .comment-meta time {
   font-size: 30px;
   color: #111;
 }
+
 /* end tags */
 
 /* start archives */
+.posts-collapse {
+  position: relative;
+}
+
 .posts-collapse .collection-title::before {
   content: " ";
   position: absolute;
@@ -821,16 +876,20 @@ ul.comments .comment-meta time {
   background: #bbb;
   border-radius: 50%;
 }
+
 .posts-collapse .collection-title {
   position: relative;
   margin: 60px 0;
 }
+
 .posts-collapse .collection-title h2 {
   margin-left: 20px;
 }
+
 .posts-collapse .collection-title small {
   color: #bbb;
 }
+
 .posts-collapse .post-header::before {
   content: " ";
   position: absolute;
@@ -846,7 +905,9 @@ ul.comments .comment-meta time {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   transition-property: background;
+  z-index: 1;
 }
+
 .posts-collapse .post-header {
   position: relative;
   transition-duration: 0.2s;
@@ -856,18 +917,22 @@ ul.comments .comment-meta time {
   border-bottom: 1px dashed #ccc;
   text-align: left;
 }
+
 .posts-collapse .post-header:hover {
   border-bottom-color: #666;
 }
+
 .posts-collapse .post-header:hover::before {
   background: #222;
 }
+
 .posts-collapse .post-time {
   position: absolute;
   font-size: 12px;
   left: 20px;
   top: 8px;
 }
+
 .posts-collapse .post-title {
   margin-left: 70px;
   font-size: 16px;
@@ -878,6 +943,7 @@ ul.comments .comment-meta time {
   border-bottom: 0;
   color: #666;
 }
+
 .page-archive .archive-page-counter {
   position: relative;
   top: 7px;
@@ -885,6 +951,7 @@ ul.comments .comment-meta time {
   margin-bottom: 50px;
   display: block;
 }
+
 .page-archive .posts-collapse .archive-move-on {
   position: absolute;
   top: 11px;
@@ -897,23 +964,27 @@ ul.comments .comment-meta time {
   border: 1px solid #fff;
   border-radius: 50%;
 }
+
 .page-archive .post-title {
   margin-left: 20px;
 }
+
 .page-archive .posts-collapse .post-header::before {
   top: 8px;
 }
-.page-archive .posts-collapse::after {
+
-    top: 20px;
+.posts-collapse--line::after {
+  top: 22px;
   left: 0;
   margin-left: -2px;
   width: 4px;
   height: 100%;
   background: #f5f5f5;
-    z-index: -1;
+  z-index: 0;
   content: " ";
   position: absolute;
 }
+
 /* end archives */
 
 /* start responsive */
@@ -1008,4 +1079,5 @@ ul.comments .comment-meta time {
     float: none;
   }
 }
+
 /* end responsive */

next/footer.ftl

@@ -18,9 +18,16 @@
 
 -->
 <footer class="footer">
-    <div class="wrapper fn-clear">
+    <div class="wrapper">
+        <div class="fn-clear">
             <a href="${servePath}">${blogTitle}</a> •
-        ${onlineVisitor1Label}${onlineVisitorCnt} <br/>
+        ${onlineVisitor1Label}${onlineVisitorCnt}
+            <div class="fn-right">
+            <#include "../../common-template/macro-user_site.ftl"/>
+            <@userSite dir="n"/>
+            </div>
+        </div>
+        <div class="fn-clear">
             &copy; ${year}
         ${footerContent}
             Powered by <a href="https://b3log.org" target="_blank">B3log 开源</a> •
@@ -32,15 +39,19 @@
                 by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
             </div>
         </div>
+    </div>
 </footer>
 <div class="back-to-top" onclick="Util.goTop()"></div>
 
 <script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
-<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
-<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/${skinDirName}${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+        charset="utf-8"></script>
+<script type="text/javascript"
+        src="${staticServePath}/skins/${skinDirName}/js/${skinDirName}${miniPostfix}.js?${staticResourceVersion}"
+        charset="utf-8"></script>
 <#include "../../common-template/label.ftl">
 <script type="text/javascript">
-    Label.tocLabel = "${tocLabel}";
+    Label.tocLabel = "${tocLabel}"
-    Label.siteViewLabel = "${siteViewLabel}";
+    Label.siteViewLabel = "${siteViewLabel}"
 </script>
 ${plugins}

next/js/next.js

@@ -76,7 +76,7 @@ var NexT = {
               'top': '0'
             }, function () {
               // 当有文章页面有目录时，回调不放这里，侧边栏就会一片空白
-              if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
+              if ($('.article__toc li').length > 0 && $(window).width() > 1000) {
                 $('.sidebar-toggle').click();
               }
             });
@@ -92,54 +92,18 @@ var NexT = {
     });
   },
   initArticle: function () {
-    if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
+    if ($('.article__toc li').length > 0 && $(window).width() > 1000) {
       // add color to sidebar menu
       $('.sidebar-toggle').addClass('has-toc');
-
-      // append toc to sidebar menu
-      var articleTocHTML = '<ul><li class="current" data-tab="toc">' + Label.tocLabel + '</li><li data-tab="site">' + Label.siteViewLabel + '</li></ul><section></section>';
-      $('.sidebar').prepend(articleTocHTML);
-      var $sectionF = $('.sidebar section:first').html($('.b3-solo-list')),
-        $sectionL = $('.sidebar section:last');
-      $sectionF.height($(window).height() - 90);
-      // 切换 tab
-      $('.sidebar > ul > li').click(function () {
-        if ($(this).data('tab') === 'toc') {
-          $sectionL.animate({
-            "opacity": '0',
-            "top": '-50px'
-          }, 300, function () {
-            $sectionF.show().css('top', '-50px');
-            $sectionF.animate({
-              "opacity": '1',
-              "top": '0'
-            }, 300);
-          });
-        } else {
-          $sectionF.animate({
-            "opacity": '0',
-            "top": '-50px'
-          }, 300, function () {
-            $sectionF.hide().css('top', '-50px');
-            $sectionL.animate({
-              "opacity": '1',
-              "top": '0'
-            }, 300);
-          });
-        }
-        $('.sidebar > ul > li').removeClass('current');
-        $(this).addClass('current');
-      });
-
       this.initToc();
     }
   },
   initToc: function () {
     var $articleTocs = $('.vditor-reset [id^=b3_solo_h]'),
-      $articleToc = $('.b3-solo-list');
+      $articleToc = $('.article__toc');
 
     $(window).scroll(function (event) {
-      if ($('.b3-solo-list li').length === 0) {
+      if ($('.article__toc li').length === 0) {
         return false;
       }
 

next/js/next.min.js

@@ -1 +1 @@
-var NexT={init:function(){$(".sidebar-toggle").click(function(){var i=$(".sidebar");$(this).hasClass("sidebar-active")?($(this).removeClass("sidebar-active"),$("body").animate({"padding-right":0}),i.animate({right:-320}),i.find("section").css("opacity",0)):($(this).addClass("sidebar-active"),$("body").animate({"padding-right":320}),i.animate({right:0},function(){i.find("section:first").animate({opacity:1})}))}),$(".site-nav-toggle").click(function(){$(".site-nav").slideToggle()}),$(document).ready(function(){setTimeout(function(){$(".logo-wrap").css("opacity",1),$(".logo-line-before i").animate({left:"0"},function(){$(".site-title").css("opacity",1).animate({top:0},function(){$(".menu").css("opacity",1).animate({"margin-top":"15px"}),$(".main").css("opacity",1).animate({top:"0"},function(){0<$(".b3-solo-list li").length&&1e3<$(window).width()&&$(".sidebar-toggle").click()})})}),$(".logo-line-after i").animate({right:"0"})},500)})},initArticle:function(){if(0<$(".b3-solo-list li").length&&1e3<$(window).width()){$(".sidebar-toggle").addClass("has-toc");var i='<ul><li class="current" data-tab="toc">'+Label.tocLabel+'</li><li data-tab="site">'+Label.siteViewLabel+"</li></ul><section></section>";$(".sidebar").prepend(i);var t=$(".sidebar section:first").html($(".b3-solo-list")),a=$(".sidebar section:last");t.height($(window).height()-90),$(".sidebar > ul > li").click(function(){"toc"===$(this).data("tab")?a.animate({opacity:"0",top:"-50px"},300,function(){t.show().css("top","-50px"),t.animate({opacity:"1",top:"0"},300)}):t.animate({opacity:"0",top:"-50px"},300,function(){t.hide().css("top","-50px"),a.animate({opacity:"1",top:"0"},300)}),$(".sidebar > ul > li").removeClass("current"),$(this).addClass("current")}),this.initToc()}},initToc:function(){var n=$(".vditor-reset [id^=b3_solo_h]"),l=$(".b3-solo-list");$(window).scroll(function(i){if(0===$(".b3-solo-list li").length)return!1;var t=[];n.each(function(i){t.push({id:this.id,offsetTop:this.offsetTop})});for(var a=$(window).scrollTop(),e=0,o=t.length;e<o;e++)if(a<t[e].offsetTop+200){l.find("li").removeClass("current");var s=0<e?e-1:0;l.find('a[href="#'+t[s].id+'"]').parent().addClass("current");break}a>=t[t.length-1].offsetTop+200&&(l.find("li").removeClass("current"),l.find("li:last").addClass("current"))}),$(window).scroll()}};NexT.init();
+var NexT={init:function(){$(".sidebar-toggle").click(function(){var i=$(".sidebar");$(this).hasClass("sidebar-active")?($(this).removeClass("sidebar-active"),$("body").animate({"padding-right":0}),i.animate({right:-320}),i.find("section").css("opacity",0)):($(this).addClass("sidebar-active"),$("body").animate({"padding-right":320}),i.animate({right:0},function(){i.find("section:first").animate({opacity:1})}))}),$(".site-nav-toggle").click(function(){$(".site-nav").slideToggle()}),$(document).ready(function(){setTimeout(function(){$(".logo-wrap").css("opacity",1),$(".logo-line-before i").animate({left:"0"},function(){$(".site-title").css("opacity",1).animate({top:0},function(){$(".menu").css("opacity",1).animate({"margin-top":"15px"}),$(".main").css("opacity",1).animate({top:"0"},function(){0<$(".article__toc li").length&&1e3<$(window).width()&&$(".sidebar-toggle").click()})})}),$(".logo-line-after i").animate({right:"0"})},500)})},initArticle:function(){if(0<$(".article__toc li").length&&1e3<$(window).width()){$(".sidebar-toggle").addClass("has-toc");var i='<ul><li class="current" data-tab="toc">'+Label.tocLabel+'</li><li data-tab="site">'+Label.siteViewLabel+"</li></ul><section></section>";$(".sidebar").prepend(i);var t=$(".sidebar section:first").html($(".article__toc")),a=$(".sidebar section:last");t.height($(window).height()-90),$(".sidebar > ul > li").click(function(){"toc"===$(this).data("tab")?a.animate({opacity:"0",top:"-50px"},300,function(){t.show().css("top","-50px"),t.animate({opacity:"1",top:"0"},300)}):t.animate({opacity:"0",top:"-50px"},300,function(){t.hide().css("top","-50px"),a.animate({opacity:"1",top:"0"},300)}),$(".sidebar > ul > li").removeClass("current"),$(this).addClass("current")}),this.initToc()}},initToc:function(){var n=$(".vditor-reset [id^=b3_solo_h]"),l=$(".article__toc");$(window).scroll(function(i){if(0===$(".article__toc li").length)return!1;var t=[];n.each(function(i){t.push({id:this.id,offsetTop:this.offsetTop})});for(var a=$(window).scrollTop(),e=0,o=t.length;e<o;e++)if(a<t[e].offsetTop+200){l.find("li").removeClass("current");var s=0<e?e-1:0;l.find('a[href="#'+t[s].id+'"]').parent().addClass("current");break}a>=t[t.length-1].offsetTop+200&&(l.find("li").removeClass("current"),l.find("li:last").addClass("current"))}),$(window).scroll()}};NexT.init();

next/side.ftl

@@ -24,6 +24,9 @@
 </div>
 
 <aside class="sidebar">
+    <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+        <#include "../../common-template/toc.ftl"/>
+    <#else>
     <section>
         <img class="site-author-image" src="${adminUser.userAvatar}" title="${userName}"/>
         <p class="site-author-name">${userName}</p>
@@ -108,4 +111,5 @@
         </div>
         </#if>
     </section>
+    </#if>
 </aside>