🎇 fix https://github.com/b3log/solo-skins/issues/30

9IPHP/article.ftl

@@ -52,7 +52,8 @@
                         </#if>
                     </h2>
                     <div class="meta">
-                                <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="<#if article.articleCreateDate?datetime != article.articleUpdateDate?datetime>${updateDateLabel}<#else>${createDateLabel}</#if>">
+                                <span class="vditor-tooltipped vditor-tooltipped__n"
+                                      aria-label="<#if article.articleCreateDate?datetime != article.articleUpdateDate?datetime>${updateDateLabel}<#else>${createDateLabel}</#if>">
                                     <i class="icon-date"></i>
                                     <time>
                                     ${article.articleUpdateDate?string("yyyy-MM-dd")}
@@ -97,7 +98,7 @@
                         </a>
                     </div -->
 
-                    <div class="rel fn-clear">
+                    <div class="rel fn-clear ft__center">
                         <#if previousArticlePermalink??>
                             <a href="${servePath}${previousArticlePermalink}" rel="prev"
                                class="fn-left vditor-tooltipped vditor-tooltipped__n"
@@ -105,6 +106,7 @@
                                 ${previousArticleLabel}
                             </a>
                         </#if>
+                        <#include "../../common-template/share.ftl">
                         <#if nextArticlePermalink??>
                             <a href="${servePath}${nextArticlePermalink}" rel="next"
                                class="fn-right vditor-tooltipped vditor-tooltipped__n"
@@ -131,13 +133,13 @@
         page.loadRandomArticles();
     </#if>
     <#if 0 != externalRelevantArticlesDisplayCount>
-        page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
-            , "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>");
+        page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>", "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>");
     </#if>
     <#if 0 != relevantArticlesDisplayCount>
         page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticlesLabel}</h4>');
     </#if>
     Skin.initToc()
+    page.share()
 </@comment_script>
 </body>
 </html>

9IPHP/css/base.scss

@@ -19,7 +19,7 @@
  * skin style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.3.0.0, Aug 2, 2019
+ * @version 1.4.0.0, Sep 23, 2019
 */
 /* start common */
 @import "../../../scss/reset";
@@ -559,12 +559,15 @@ aside {
 .post sup {
   color: #aaa;
   font-weight: 300;
+
   a {
     color: #aaa;
     cursor: text;
+
     &:hover {
       color: #aaa;
     }
+
     &:visited {
       color: #fff;
     }
@@ -650,6 +653,50 @@ aside {
   }
 }
 
+.article__share {
+  margin: 20px 0;
+  display: inline-block;
+  position: relative;
+
+  .item {
+    float: left;
+    text-align: center;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    color: #fdc200;
+    cursor: pointer;
+    transition: all .3s ease;
+    opacity: .86;
+
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+
+    &[data-type="wechat"] {
+      color: #3caf36;
+    }
+
+    &[data-type="twitter"] {
+      color: #18a3fa;
+    }
+
+    &[data-type="weibo"] {
+      color: #f93;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &__qr {
+      position: absolute;
+      top: 33px;
+      left: 60px;
+    }
+  }
+}
+
 /* end article list */
 
 /* start comments */
@@ -792,6 +839,10 @@ aside {
   .responsive .list li.current {
     background-color: #eee;
   }
+
+  .post {
+    padding: 10px;
+  }
 }
 
 /* end responsive */