From 71e11e16c1b77411dbc2714b1cadc68e0a5bf6f9 Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Fri, 28 Dec 2018 01:38:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E4=BA=AB=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                    |  6 +--
 layout/_partial/article.ejs    |  7 ++--
 layout/_partial/categories.ejs |  5 +--
 layout/_partial/meta.ejs       | 13 +++----
 layout/_partial/scripts.ejs    |  5 +++
 layout/_third-party/share.ejs  | 16 ++++++++
 source/less/_main.less         | 71 +++++++++++++++++++---------------
 7 files changed, 74 insertions(+), 49 deletions(-)
 create mode 100644 layout/_third-party/share.ejs

diff --git a/_config.yml b/_config.yml
index 512a5ed..500b39c 100755
--- a/_config.yml
+++ b/_config.yml
@@ -9,7 +9,7 @@ info:
   version: 1.0-beta11
   docs: https://xaoxuu.com/wiki/material-x/
   # 主题的CDN地址。如需启用CDN，请在主目录的config中设置，详见文档。
-  cdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@18.12.37/
+  cdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@18.12.38/
 
 
 ############################### 主题样式 ###############################
@@ -26,11 +26,11 @@ services:
   nodewaves: true
   busuanzi: true
   # fastclick: true
-  leancloud_visitors: true
+  # leancloud_visitors: true
   recommended_posts: true   # 需要安装"hexo-recommended-posts": "^1.0.3",
   comments: true
   music: true
-
+  share: true
 
 
 ############################### 杂项 ###############################
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index e632468..9506e08 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -7,18 +7,17 @@
         </div>
         <% if(post.layout == 'post'){ %>
           <section class='meta' id="footer-meta">
-              <time class="time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>">
-                  <i class="fas fa-pencil-alt fa-fw" aria-hidden="true"></i>&nbsp;本文最后更新于：<%- date(post.updated, config.date_format) %>
-              </time>
+              <time class="metatag time" itemprop="dateUpdated" datetime="<%- moment(post.updated).format() %>" content="<%- date(post.updated, config.date_format) %>"><i class="fas fa-pencil-alt fa-fw" aria-hidden="true"></i>&nbsp;本文最后更新于：<%- date(post.updated, config.date_format) %></time>
               <% if (post.tags && post.tags.length && post.tags.each) { %>
                   <%
                   var items = [];
                   post.tags.each(function(item){
-                      items.push('<div class="tags"><a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>&nbsp;' + item.name + '</a></div>');
+                      items.push('<div class="metatag tags"><a class="tag" href="'+url_for(item.path)+'"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i>&nbsp;' + item.name + '</a></div>');
                   });
                   %>
                   <%- items.join(' ') %>
               <% } %>
+              <%- partial('../_third-party/share') %>
           </section>
         <% } %>
 
diff --git a/layout/_partial/categories.ejs b/layout/_partial/categories.ejs
index c54c01f..f3305d5 100755
--- a/layout/_partial/categories.ejs
+++ b/layout/_partial/categories.ejs
@@ -5,8 +5,7 @@
         cats.push('<a class="categories" href="'+url_for(cat.path)+'">' + cat.name + '</a>');
     });
     %>
-    <div class='cats'>
-        <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
-        <%- cats.join(' / ') %>
+    <div class='metatag cats'>
+        <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;<%- cats.join(' / ') %>
     </div>
 <% } %>
diff --git a/layout/_partial/meta.ejs b/layout/_partial/meta.ejs
index e2b06ed..46df8f3 100644
--- a/layout/_partial/meta.ejs
+++ b/layout/_partial/meta.ejs
@@ -30,9 +30,8 @@
     <% } %>
 
     <% if(post.date){ %>
-      <time class="time">
-        <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
-        <%= date(post.date, config.date_format) %>
+      <time class="metatag time">
+        <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>&nbsp;<%= date(post.date, config.date_format) %>
       </time>
     <% } %>
 
@@ -42,14 +41,14 @@
 
     <% if(!isPostList && theme.services){ %>
       <% if (theme.services.leancloud_visitors == true && config.leancloud_visitors && config.leancloud_visitors.app_id && config.leancloud_visitors.app_key) { %>
-        <div class="browse leancloud"><i class="fas fa-eye fa-fw" aria-hidden="true"></i>
+        <div class="metatag browse leancloud"><i class="fas fa-eye fa-fw" aria-hidden="true"></i>
           <span id="<%= url_for(page.path) %>" class="leancloud_visitors" data-flag-title="<%= page.title %>">
-           <span class="leancloud-visitors-count"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
+           &nbsp;<span class="leancloud-visitors-count"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
           </span>
         </div>
       <% } else if (theme.services.busuanzi == true) { %>
-        <div class="browse busuanzi"><i class="fas fa-eye fa-fw" aria-hidden="true"></i>
-          <span id="busuanzi_value_page_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
+        <div class="metatag browse busuanzi"><i class="fas fa-eye fa-fw" aria-hidden="true"></i>
+          &nbsp;<span id="busuanzi_value_page_pv"><i class="fas fa-spinner fa-spin fa-fw" aria-hidden="true"></i></span>
         </div>
       <% } %>
     <% } %>
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index dbd7631..4a49649 100755
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -53,6 +53,11 @@
       }, false)
     </script>
   <% } %>
+  <% if (theme.services.share == true && config.mob && config.mob.appkey) { %>
+    <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=<%- config.mob.appkey %>"></script>
+  <% } %>
+
+
   <% if (theme.services.leancloud_visitors == true) { %>
     <!-- leancloud_visitors -->
     <% if (config.leancloud_visitors && config.leancloud_visitors.app_id && config.leancloud_visitors.app_key) { %>
diff --git a/layout/_third-party/share.ejs b/layout/_third-party/share.ejs
new file mode 100644
index 0000000..4850823
--- /dev/null
+++ b/layout/_third-party/share.ejs
@@ -0,0 +1,16 @@
+<% if (theme.services && theme.services.share == true && config.mob && config.mob.appkey && config.mob.list) { %>
+  <div class='metatag share -mob-share-list'>
+    <i class="left fas fa-share-alt fa-fw" aria-hidden="true"></i>
+    <div class="-mob-share-list share-body">
+      <% (config.mob.list||[]).forEach(function(item){ %>
+        <a class="-mob-share-<%- item.key %>" title="<%- item.name %>">
+          <% if (item.icon){ %>
+            <i class="<%- item.icon %> fa-fw"></i>
+          <% } else if (item.img){ %>
+            <img src="<%- item.img %>">
+          <% } %>
+        </a>
+      <% }) %>
+    </div>
+  </div>
+<% } %>
diff --git a/source/less/_main.less b/source/less/_main.less
index 9ffc682..38b58f3 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -312,35 +312,30 @@
                 }
             }
             .tags{
-                display: inline-block;
+                display: inline-flex;
                 background: transparent;
                 word-spacing: normal;
             }
-            .time,
-            .cats,
-            .browse,
-            .tags {
+            @cellH: 28px;
+            .metatag {
                 .enable-trans();
                 font-size: @fontsize_small * .95;
-                line-height: 25px;
+                line-height: @cellH + 1px;
+                height: @cellH;
                 color: fade(@color_text_main, 70%);
-                display: inline-block;
+                display: inline-flex;
                 background: @theme_background;
                 margin: 4px 4px 4px 0px;
                 padding: 0px 8px 0px 2px;
                 border-radius: 0.5*@border_radius_code_block;
                 border-left: 25px solid lighten(@theme_main, 10%);
-                padding-top: 1px;
-                @media(max-width: @on_phone) {
-                    padding-bottom: 1px;
-                }
                 &:hover {
                   background: lighten(@theme_main, 10%);
                   color: @color_text_in_header;
                   a{
                     color: @color_text_in_header;
                   }
-                  .fa-spinner{
+                  .fas, .fab{
                     color: @color_text_in_header;
                   }
                   border-left-width: 30px;
@@ -348,7 +343,7 @@
                 }
                 i{
                   width: 28px;
-                  line-height: 24px;
+                  line-height: @cellH;
                   color: @color_text_in_header;
                   margin-left: -28px;
                 }
@@ -359,37 +354,49 @@
                         color: @color_text_highlight;
                         color: @color_text_in_header;
                     }
-                    &:active {
-                        // color: darken(@color_text_highlight, 25%);
-                    }
                 }
                 .categories {
                     font-weight: normal;
                     color: fade(@color_text_main, 70%);
-                    // color: @color_text_link;
                 }
-                .tag{
+                .tag,{
                     color: fade(@color_text_main, 70%);
                 }
                 .fa-spinner{
                   color: fade(@color_text_main, 70%);
                   margin-left: 2px;
                 }
+
+            }
+            .share{
+              // border-color: @color_md_orange;
+              // &:hover {
+              //   background: @color_md_orange;
+              // }
+              .share-body{
+                display: flex;
+                a{
+                  img{
+                    margin: 2px;
+                    height: @cellH - 4px;
+                    width: auto;
+                  }
+                  i{
+                    display: inline-block;
+                    margin: 0;
+                    padding: 0;
+                    color: fade(@color_text_main, 70%);
+                  }
+                  padding-bottom: 0;
+                  margin-bottom: 0;
+                  &:hover{
+                    // background: darken(@color_md_orange, 10%);
+                    text-decoration: none;
+                  }
+                }
+
+              }
             }
-            // .cats {
-            //     a {
-            //         font-weight: bold;
-            //         color: @color_text_link;
-            //         .enable-trans();
-            //         &:hover {
-            //             color: @color_text_highlight;
-            //         }
-            //         &:active {
-            //             color: darken(@color_text_highlight, 25%);
-            //         }
-            //     }
-            //
-            // }
 
         }
         .full-width,.highlight{