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

NeoEase/css/base.scss

@@ -19,10 +19,22 @@
  * skin neoease 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/toc";
+@import "../../../scss/usite";
 @import "vditor/src/assets/scss/classic";
+
+.user__site {
+  display: inline-block;
+  margin-right: 15px;
+  svg {
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+}
+
 /* start base */
 html, body, div, ul, li, h1, h2, h3, h4, h5, h6 {
   margin: 0;
@@ -34,13 +46,13 @@ html, body, div, ul, li, h1, h2, h3, h4, h5, h6 {
   color: #fff;
 }
 
-::-moz-selection{
+::-moz-selection {
   background-color: #ccc;
   color: #fff;
 }
 
 body {
-    font-family: "Lucida Grande","Verdana","\5fae\8f6f\96c5\9ed1";
+  font-family: "Lucida Grande", "Verdana", "\5fae\8f6f\96c5\9ed1";
   font-size: 12px;
   background-color: #F9F9F9;
   color: #333;
@@ -117,6 +129,7 @@ textarea, input {
 .em-br {
   line-height: 24px;
 }
+
 /* end base */
 
 /* start ico */
@@ -183,6 +196,7 @@ textarea, input {
   float: left;
   margin-left: 12px;
 }
+
 /* end ico */
 
 /* start frame */
@@ -201,6 +215,7 @@ textarea, input {
   overflow: hidden;
   width: 667px;
 }
+
 /* end frame */
 
 /* start header */
@@ -298,7 +313,7 @@ textarea, input {
   line-height: 33px;
   margin: -2px 0 -3px;
   color: #333;
-    text-shadow : 1px 1px 1px #C6D9E9;
+  text-shadow: 1px 1px 1px #C6D9E9;
 }
 
 .nav img {
@@ -308,6 +323,7 @@ textarea, input {
 .nav .right {
   line-height: 29px;
 }
+
 /* end header */
 
 /* start footer */
@@ -343,17 +359,17 @@ textarea, input {
 #goTop:hover {
   background-color: #EAEAEA;
 }
+
 /* end footer*/
 
 /* start side */
 .side {
   float: right;
-    overflow: hidden;
   width: 278px;
   margin-bottom: 50px;
 }
 
-.side>div {
+.side > div {
   border-bottom: 1px solid #DEDEDE;
   padding: 10px 5px 15px;
 }
@@ -404,7 +420,7 @@ textarea, input {
   white-space: nowrap;
 }
 
-.recent-comments li>img {
+.recent-comments li > img {
   background-color: #FFF;
   border: 1px solid #999;
   padding: 1px;
@@ -426,12 +442,12 @@ textarea, input {
   -moz-transition: opacity 400ms ease;
   -webkit-transition: opacity 400ms ease;
   transition: opacity 400ms ease;
-    opacity:0;
+  opacity: 0;
   filter: alpha(opacity=0);
 }
 
 .recent-comments li:hover .expand-ico, .recent-comments li:hover .collapse-ico {
-    opacity:1;
+  opacity: 1;
   filter: alpha(opacity=100);
 }
 
@@ -461,6 +477,7 @@ textarea, input {
 .recent-comments-content p {
   margin: 0;
 }
+
 /* end side */
 
 /* start article list */
@@ -519,7 +536,7 @@ textarea, input {
   border: 1px solid #C5C3C2;
   font-size: 10px;
   margin: 2px;
-    padding: 1px 5px ;
+  padding: 1px 5px;
   text-decoration: none;
   background-color: #F2F2F2;
 }
@@ -541,6 +558,7 @@ textarea, input {
   margin-top: 20px;
   padding: 0 5px 5px;
 }
+
 /* end article list */
 
 /* start article */
@@ -585,18 +603,18 @@ textarea, input {
   position: relative;
 }
 
-#comments>div {
+#comments > div {
   border-bottom: 1px solid #DEDEDE;
   padding: 10px;
   width: 647px;
   background-color: #F5F5F5;
 }
 
-#comments>div:nth-child(2n) {
+#comments > div:nth-child(2n) {
   background-color: #F8F8F8;
 }
 
-#comments .comment-panel>.right {
+#comments .comment-panel > .right {
   -moz-transition: opacity 400ms ease;
   -webkit-transition: opacity 400ms ease;
   transition: opacity 400ms ease;
@@ -604,7 +622,7 @@ textarea, input {
   filter: alpha(opacity=0);
 }
 
-#comments>div:hover .comment-panel>.right {
+#comments > div:hover .comment-panel > .right {
   opacity: 1;
   filter: alpha(opacity=100);
 }
@@ -674,7 +692,7 @@ textarea, input {
   border-color: silver #D9D9D9 #D9D9D9;
   border-style: solid;
   border-width: 1px;
-    font-family: "Lucida Grande",Verdana,'微软雅黑';
+  font-family: "Lucida Grande", Verdana, '微软雅黑';
   font-size: 12px;
   outline: medium none;
   padding: 0 3px;
@@ -713,6 +731,7 @@ textarea, input {
   border-color: #76B33A #98C64C #98C64C #76B33A;
   color: #074A7E;
 }
+
 /* end article*/
 
 /* start tags */
@@ -780,10 +799,11 @@ textarea, input {
 #tagsSide .tags5 {
   font-size: 20px;
 }
+
 /* end tags */
 
 /* start others */
-.main>h2 {
+.main > h2 {
   margin-top: 16px;
 }
 
@@ -816,4 +836,5 @@ textarea, input {
 .error a:hover {
   background-color: #ADEb51;
 }
+
 /* end others */

NeoEase/js/NeoEase.js

@@ -16,162 +16,164 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 /**
-* @fileoverview neoease js.
+ * @fileoverview neoease js.
-*
+ *
-* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
-* @version 1.0.0.8, Sep 6, 2012
+ * @version 1.0.0.8, Sep 6, 2012
-*/
+ */
 var goTop = function (acceleration) {
-    acceleration = acceleration || 0.1;
+  acceleration = acceleration || 0.1
 
-    var y = $(window).scrollTop();
+  var y = $(window).scrollTop()
-    var speed = 1 + acceleration;
+  var speed = 1 + acceleration
-    window.scrollTo(0, Math.floor(y / speed));
+  window.scrollTo(0, Math.floor(y / speed))
 
   if (y > 0) {
-        var invokeFunction = "goTop(" + acceleration + ")";
+    var invokeFunction = 'goTop(' + acceleration + ')'
-        window.setTimeout(invokeFunction, 16);
+    window.setTimeout(invokeFunction, 16)
   }
-};
+}
 
 var collapseArchive = function (it, year) {
-    var tag = true;
+  var tag = true
-    if (it.className === "collapse-ico") {
+  if (it.className === 'collapse-ico') {
-        it.className = "expand-ico";
+    it.className = 'expand-ico'
-        tag = false;
+    tag = false
   } else {
-        it.className = "collapse-ico";
+    it.className = 'collapse-ico'
   }
 
-    $("#archiveSide li").each(function () {
+  $('#archiveSide li').each(function () {
-        var $this = $(this);
+    var $this = $(this)
     // hide other year month archives
-        if ($this.data("year") === year) {
+    if ($this.data('year') === year) {
       if (tag) {
-                $(this).show();
+        $(this).show()
       } else {
-                $(this).hide();
+        $(this).hide()
       }
     }
-    });
+  })
-};
+}
 
 var getArticle = function (it, id) {
-    var $abstract = $("#abstract" + id),
+  var $abstract = $('#abstract' + id),
-    $content = $("#content" + id);
+    $content = $('#content' + id)
 
-    if ($content.html() === "") {
+  if ($content.html() === '') {
     $.ajax({
-            url: "/get-article-content?id=" + id,
+      url: '/get-article-content?id=' + id,
-            type: "GET",
+      type: 'GET',
-            dataType: "html",
+      dataType: 'html',
       beforeSend: function () {
-                $abstract.css("background",
+        $abstract.css('background',
-                    "url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent");
+          'url(/skins/neoease/images/ajax-loader.gif) no-repeat scroll center center transparent')
       },
-            success: function(result, textStatus){
+      success: function (result, textStatus) {
-                it.className = "collapse-ico";
+        it.className = 'collapse-ico'
-                $content.html(result);
+        $content.html(result)
-                $abstract.hide().css("background", "none");
+        $abstract.hide().css('background', 'none')
-                $content.fadeIn("slow");
+        $content.fadeIn('slow')
-            }
+        Util.parseLanguage()
-        });
+        Util.parseMarkdown()
+      },
+    })
   } else {
-        if (it.className === "expand-ico") {
+    if (it.className === 'expand-ico') {
-            $abstract.hide();
+      $abstract.hide()
-            $content.fadeIn();
+      $content.fadeIn()
-            it.className = "collapse-ico";
+      it.className = 'collapse-ico'
     } else {
-            $content.hide();
+      $content.hide()
-            $abstract.fadeIn();
+      $abstract.fadeIn()
-            it.className = "expand-ico";
+      it.className = 'expand-ico'
     }
   }
 
-    return false;
+  return false
-};
+}
 
 var goTranslate = function () {
-    window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);
+  window.open('http://translate.google.com/translate?sl=auto&tl=auto&u=' +
-};
+    location.href)
+}
 
 $(document).ready(function () {
   // go top icon show or hide
   $(window).scroll(function () {
-        var y = $(window).scrollTop();
+    var y = $(window).scrollTop()
 
     if (y > 182) {
-            var bodyH = $(window).height();
+      var bodyH = $(window).height()
-            var top = y + bodyH - 21;
+      var top = y + bodyH - 21
-            if ($("body").height() - 58 <= y + bodyH) {
+      if ($('body').height() - 58 <= y + bodyH) {
-                top = $(".footer").offset().top - 21;
+        top = $('.footer').offset().top - 21
       }
-            $("#goTop").fadeIn("slow").css("top", top);
+      $('#goTop').fadeIn('slow').css('top', top)
     } else {
-            $("#goTop").hide();
+      $('#goTop').hide()
     }
-    });
+  })
-    
 
   // archive
   var currentYear = (new Date()).getFullYear(),
-    year = currentYear;
+    year = currentYear
-    $("#archiveSide li").each(function (i) {
+  $('#archiveSide li').each(function (i) {
-        var $this = $(this);
+    var $this = $(this)
 
     // hide other year month archives
-        if ($this.data("year") !== currentYear) {
+    if ($this.data('year') !== currentYear) {
       $(this).hide()
     }
 
     // append year archive
-        if (year !== $this.data("year")) {
+    if (year !== $this.data('year')) {
-            year = $this.data("year");
+      year = $this.data('year')
-            $this.before("<li class='archive-year'><div onclick='collapseArchive(this, " +
+      $this.before('<li class=\'archive-year\'><div onclick=\'collapseArchive(this, ' +
-                year + ")' class='expand-ico'>" + year + "&nbsp;\u5e74</div></li>");
+        year + ')\' class=\'expand-ico\'>' + year + '&nbsp;\u5e74</div></li>')
     }
-    });
+  })
 
   // recent comment mouse click
-    $(".recent-comments .expand-ico").click(function () {
+  $('.recent-comments .expand-ico').click(function () {
-        if (this.className === "expand-ico") {
+    if (this.className === 'expand-ico') {
       $(this).parent().next().css({
-                "height": "auto",
+        'height': 'auto',
-                "white-space": "normal"
+        'white-space': 'normal',
-            });
+      })
-            this.className = "collapse-ico";
+      this.className = 'collapse-ico'
     } else {
       $(this).parent().next().animate({
-                "height": "18px"
+        'height': '18px',
       }, function () {
-                $(this).css("white-space", "nowrap");
+        $(this).css('white-space', 'nowrap')
-            });
+      })
-            this.className = "expand-ico";
+      this.className = 'expand-ico'
     }
-    });
+  })
 
   // nav current
-    $(".nav ul li").each(function () {
+  $('.nav ul li').each(function () {
-        var $a = $(this).find("a");
+    var $a = $(this).find('a')
-        if ($a.attr("href") === Label.servePath + location.pathname) {
+    if ($a.attr('href') === Label.servePath + location.pathname) {
-            $(this).addClass("current");
+      $(this).addClass('current')
     } else if (/\/[0-9]+$/.test(location.pathname)) {
-            $(".nav ul li")[0].className = "current";
+      $('.nav ul li')[0].className = 'current'
     }
-    });
+  })
 
   Util.setTopBar()
-    Util.replaceSideEm($(".recent-comments-content"));
+  Util.replaceSideEm($('.recent-comments-content'))
-    Util.buildTags("tagsSide");
+  Util.buildTags('tagsSide')
 
   // recent comments
-    $(".recent-comments .recent-comments-main").each(function () {
+  $('.recent-comments .recent-comments-main').each(function () {
-        if ($(this).find(".recent-comments-content>a").height() < 30) {
+    if ($(this).find('.recent-comments-content>a').height() < 30) {
-            $(this).find(".expand-ico").remove();
+      $(this).find('.expand-ico').remove()
     } else {
-            $(this).find(".expand-ico").parent().next().css({
+      $(this).find('.expand-ico').parent().next().css({
-                "white-space": "nowrap"
+        'white-space': 'nowrap',
-            });
+      })
     }
-    });
+  })
-});
+})

NeoEase/side.ftl

@@ -18,12 +18,22 @@
 
 -->
 <div class="side">
-    <#if "" != noticeBoard>
     <div>
-        <h4>${noticeBoardLabel}</h4>
+        <br>
-        <div>${noticeBoard}</div>
+        <#include "../../common-template/macro-user_site.ftl"/>
-    </div>
+        <@userSite dir="nw"/>
+        <#if "" != noticeBoard>
+        <br><br>
+        <div style="text-align: center">${noticeBoard}</div>
         </#if>
+    </div>
+     <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+     <div>
+         <h4>${tocLabel}</h4>
+           <#include "../../common-template/toc.ftl"/>
+     </div>
+
+     <#else>
          <#if 0 != recentComments?size>
     <div>
         <h4>${recentCommentsLabel}</h4>
@@ -111,7 +121,8 @@
             <#list mostUsedTags as tag>
                 <li>
                     <a data-count="${tag.tagPublishedRefCount}"
-                   href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagTitle}(${tag.tagPublishedRefCount})">
+                       href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
+                       title="${tag.tagTitle}(${tag.tagPublishedRefCount})">
                         <span>${tag.tagTitle}</span>
                     </a>
                 </li>
@@ -128,8 +139,10 @@
                 <li>
                     <a rel="friend" href="${link.linkAddress}" title="${link.linkTitle}" target="_blank">
                         <img alt="${link.linkTitle}"
-                         src="${faviconAPI}<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>" width="16" height="16" /></a>
+                             src="${faviconAPI}<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>"
-                <a rel="friend" href="${link.linkAddress}" title="${link.linkTitle}" target="_blank">${link.linkTitle}
+                             width="16" height="16"/></a>
+                    <a rel="friend" href="${link.linkAddress}" title="${link.linkTitle}"
+                       target="_blank">${link.linkTitle}
                     </a>
                 </li>
             </#list>
@@ -145,15 +158,18 @@
                 <#if "en" == localeString?substring(0, 2)>
                     <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
                        title="${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})">
-                    ${archiveDate.monthName} ${archiveDate.archiveDateYear}</a>(${archiveDate.archiveDatePublishedArticleCount})
+                        ${archiveDate.monthName} ${archiveDate.archiveDateYear}</a>(${archiveDate.archiveDatePublishedArticleCount}
+                    )
                 <#else>
                 <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
                    title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
-                    ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}</a>(${archiveDate.archiveDatePublishedArticleCount})
+                    ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}</a>(${archiveDate.archiveDatePublishedArticleCount}
+                    )
                 </#if>
                 </li>
             </#list>
         </ul>
     </div>
          </#if>
+     </#if>
 </div>