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

Medium/article.ftl

@@ -203,6 +203,9 @@
         <div class="main">
         <#include "bottom.ftl">
         </div>
+        <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+            <#include "../../common-template/toc.ftl"/>
+        </#if>
     </div>
     <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>

Medium/css/base.scss

@@ -19,9 +19,11 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 2.0.0.2, Mar 16, 2019
+ * @version 2.1.0.0, Mar 22, 2019
  */
 @import "../../../scss/reset";
+@import "../../../scss/usite";
+@import "../../../scss/toc";
 @import "../../../scss/nprogress";
 @import "vditor/src/assets/scss/classic";
 
@@ -343,6 +345,18 @@
 
 /* star article */
 .article {
+  &__toc {
+    left: 100%;
+    position: fixed;
+    top: 90px;
+    bottom: 60px;
+    a {
+      color: rgba(0, 0, 0, 0.54);
+      &:hover {
+        color: rgba(0, 0, 0, 0.68);
+      }
+    }
+  }
   &__main {
     display: flex;
     flex-direction: column;
@@ -442,10 +456,6 @@
 /* end article list */
 
 /* start article */
-.b3-solo-list {
-  display: none;
-}
-
 .post {
   max-width: 740px;
   margin: 50px auto 20px;
@@ -556,7 +566,9 @@
 
 .article__bottom {
   background-color: #fafafa;
-  padding: 40px 20px
+  padding: 40px 20px;
+  position: relative;
+  z-index: 1;
 }
 
 .article__bottom .footer__tag {

Medium/footer.ftl

@@ -21,6 +21,8 @@
     <footer class="footer">
         <div class="fn-clear">
         ${blogSubtitle}
+            <#include "../../common-template/macro-user_site.ftl"/>
+            <@userSite dir="n"/>
             <div class="fn-right">
             ${blogTitle} &copy; ${year} ${footerContent}
             </div>

Medium/js/common.js

@@ -19,7 +19,7 @@
  * @fileoverview util and every page should be used.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.0, Feb 27, 2019
+ * @version 0.1.0.1, Mar 22, 2019
  */
 
 /**
@@ -28,7 +28,16 @@
  */
 var Skin = {
   init: function () {
+    const $article__toc = $('.article__toc')
     $(window).scroll(function () {
+      if ($article__toc.length === 1) {
+        if ($('.article__bottom').offset().top < $(window).scrollTop()) {
+          $article__toc.hide()
+        } else {
+          $article__toc.show()
+        }
+      }
+
       if ($('#headerNav').length === 0) {
         return
       }
@@ -54,7 +63,9 @@ var Skin = {
           });
         }
       }
+      Skin.initToc()
     })
+    Skin.initToc()
   },
   initTags: function () {
     var $tags = $('#tags');
@@ -198,6 +209,15 @@ var Skin = {
 
       window.open(urls[key], '_blank', 'top=100,left=200,width=648,height=618')
     })
+  },
+  initToc: function () {
+    if ($('.article__toc').length !== 0 && $(window).width() > 1000) {
+      $('.article__toc').animate({
+        'left': ($('.post').outerWidth() + $('.post').offset().left) + 'px'
+      }, 600)
+    } else {
+      $('.article__toc').hide()
+    }
   }
 };
 Skin.init();