rewrite share & v1.2

yscoder · Nov 20, 2016 · 55e5ecd · xdcxdc · Nov 20, 2016 · 55e5ecd
1 parent 5018c9c
commit 55e5ecd
Show file tree

Hide file tree

Showing 16 changed files with 171 additions and 156 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,6 @@
 # hexo-theme-indigo
 # https://github.com/yscoder/hexo-theme-indigo
-version: 1.1.12
+version: 1.2
 
 #添加新菜单项遵循以下规则
 # menu:

diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
@@ -1,11 +1,7 @@
 <div class="mask" id="mask"></div>
 <a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>
+<script>
+var BLOG = { ROOT: '<%= config.root %>', SHARE: <%- theme.share %>, REWARD: <%- Boolean(page.reward) %> }</script>
 <% if(theme.share){ %>
-<script>var BLOG = { ROOT: '<%= config.root %>' };
-BLOG.SHARE = {
-title: "<%-(page.title || config.title) %>",
-summary: document.getElementsByName('summary')[0].content,
-url: "<%=url.replace(/index\.html$/, '') %>" }
-</script>
-<%- partial('post/share', {className: 'global-share'}) %>
+<%- partial('post/share', {scope: 'global'}) %>
 <% } %>
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -44,7 +44,6 @@
   <% if (theme.rss){ %>
     <link rel="alternative" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
   <% } %>
-  <meta name="summary" content="<%= strip_html(page.excerpt || config.description) %>">
   <%- favicon_tag(theme.favicon) %>
   <link rel="stylesheet" href="<%= url_for('/css/style.css?v='+ theme.version) %>">
 </head>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -16,7 +16,7 @@
         </div>
         <% }%>
         <% if(theme.share){ %>
-        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-share">
+        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
             <i class="icon icon-lg icon-share-alt"></i>
         </a>
         <% } %>
@@ -29,7 +29,7 @@
         <h5 class="subtitle">
             <% if(is_post()){ %>
                 <%- partial('post/head-meta') %>
-            <% } else if(is_home()){ %> 
+            <% } else if(is_home()){ %>
                 <%- config.subtitle %>
             <% } else if (page.layout === 'page' && page.description) {%>
                 <%- page.description %>

diff --git a/layout/_partial/post/reward-btn.ejs b/layout/_partial/post/reward-btn.ejs
@@ -1,5 +1,5 @@
 <% if(page.reward){ %>
-<div class="post-reward">
-    <a id="rewardBtn" href="javascript:;" class="post-reward-btn waves-effect waves-circle waves-light">赏</a>
+<div class="page-reward">
+    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
 </div>
-<% } %>
+<% } %>
diff --git a/layout/_partial/post/reward.ejs b/layout/_partial/post/reward.ejs
@@ -1,6 +1,6 @@
 <% if(page.reward){ %>
-<div id="reward" class="reward-lay">
-    <a class="reward-off" id="rewardOff" href="javascript:;"><i class="icon icon-close"></i></a>
+<div id="reward" class="page-modal reward-lay">
+    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
     <h3 class="reward-title">
         <i class="icon icon-quote-left"></i>
         <%=theme.reward.title %>
@@ -22,4 +22,4 @@
         <% } %>
     </ul>
 </div>
-<% } %>
+<% } %>
diff --git a/layout/_partial/post/share-fab.ejs b/layout/_partial/post/share-fab.ejs
@@ -1,9 +1,7 @@
 <% if(theme.share){ %>
-<div class="post-share-wrap">
-    <%- partial('share', {
-            className: 'post-share'
-    }) %>
-    <a href="javascript:;" id="share-fab" class="post-share-fab waves-effect waves-circle">
+<div class="page-share-wrap">
+    <%- partial('share', { scope: 'page' }) %>
+    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
         <i class="icon icon-share-alt icon-lg"></i>
     </a>
 </div>

diff --git a/layout/_partial/post/share.ejs b/layout/_partial/post/share.ejs
@@ -1,35 +1,52 @@
-<div class="<%=className %>" id="<%=className %>">
+<%
+    // 使用 sns 直接分享接口
+    // 微信使用 http://s.jiathis.com/qrcode.php?url=xxx
+    var sUrl = url.replace(/index\.html$/, '')
+    var sTitle = page.title ? '《'+ page.title +'》 — ' + config.title : config.title
+    var sDesc = truncate(strip_html(page.excerpt || config.description), { length: 80})
+    var sPic = page.photos && page.photos.length ? page.photos[0] : url_for(config.avatar)
+%>
+
+<div class="<%- scope %>-share" id="<%- scope %>Share">
     <div class="tit">分享到：</div>
     <ul class="reset share-icons">
       <li>
-        <a class="weibo share-sns" href="javascript:;" data-title="微博" data-service="tsina">
+        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=<%-sUrl%>&title=<%-sTitle%>&pic=<%-sPic%>" data-title="微博">
           <i class="icon icon-weibo"></i>
         </a>
       </li>
       <li>
-        <a class="weixin share-sns" href="javascript:;" data-title="微信" data-service="weixin">
+        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
           <i class="icon icon-weixin"></i>
         </a>
       </li>
       <li>
-        <a class="qq share-sns" href="javascript:;" data-title=" QQ" data-service="cqq">
+        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=<%-sUrl%>&title=<%-sTitle%>&source=<%-sDesc%>" data-title=" QQ">
           <i class="icon icon-qq"></i>
         </a>
       </li>
       <li>
-        <a class="facebook share-sns" href="javascript:;" data-title=" Facebook" data-service="fb">
+        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>" data-title=" Facebook">
           <i class="icon icon-facebook"></i>
         </a>
       </li>
       <li>
-        <a class="twitter share-sns" href="javascript:;" data-title=" Twitter" data-service="twitter">
+        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>&via=<%-config.url%>" data-title=" Twitter">
           <i class="icon icon-twitter"></i>
         </a>
       </li>
       <li>
-        <a class="douban share-sns" href="javascript:;" data-title="豆瓣" data-service="douban">
-          豆
+        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=<%-sUrl%>" data-title=" Google+">
+          <i class="icon icon-google-plus"></i>
         </a>
       </li>
     </ul>
  </div>
+
+<% if(scope === 'global') { %>
+<div class="page-modal wx-share" id="wxShare">
+    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
+    <p>扫一扫，分享到微信</p>
+    <img src="http://s.jiathis.com/qrcode.php?url=<%-sUrl%>" alt="微信分享二维码"/>
+</div>
+<% } %>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
     "name": "hexo-theme-material-indigo",
-    "version": "1.1.12",
+    "version": "1.2.0",
     "private": true
 }
diff --git a/source/css/_partial/layout.less b/source/css/_partial/layout.less
@@ -177,8 +177,7 @@
     &.in {
         visibility: visible;
         pointer-events: auto;
-        opacity: .5;
-        filter: alpha(opacity=50);
+        opacity: .3;
     }
 }
 

diff --git a/source/css/_partial/page.less b/source/css/_partial/page.less
@@ -23,7 +23,7 @@
 .page-content {
     margin-bottom: 30px;
     border-bottom: 2px solid @borderColor;
-    
+
     > blockquote,
     > pre,
     img,
@@ -131,7 +131,7 @@
                 text-align: center;
                 .card(3px)
             }
-            
+
             > h6 {
                 position: absolute;
                 top: 50%;
@@ -175,13 +175,13 @@
 .page-about-me {
     position: relative;
     padding: 30px 35px!important;
-    
+
     .avatar {
         margin-right: 35px;
         width: 100px;
         height: 100px;
         box-shadow: @boxShadow;
-        
+
         img {
             border-radius: 50%;
         }
@@ -204,10 +204,51 @@
     }
     .page-about-me {
         padding: 15px 20px!important;
-        .avatar { 
+        .avatar {
             margin-right: 20px;
             width: 60px;
             height: 60px;
         }
     }
-}
+}
+
+.page-modal {
+    display: none;
+    position: fixed;
+    top: 24%;
+    left: 50%;
+    z-index: 120;
+    padding: 30px;
+    text-align: center;
+    color: @secondaryTextColor;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: @boxShadow;
+    opacity: 0;
+    .transform(translate(-50%, -200%));
+
+    &.ready {
+        visibility: hidden;
+        display: block;
+        .transform(translate(-50%, -100%));
+        .transition(.3s);
+    }
+
+    &.in {
+        visibility: visible;
+        opacity: 1;
+        .transform(translate(-50%, 0));
+    }
+
+    .close {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+        color: rgba(0, 0, 0, .2);
+        font-size: 16px;
+        line-height: 20px;
+        &:hover, &:active {
+            color: rgba(0, 0, 0, .4);
+        }
+    }
+}
diff --git a/source/css/_partial/reward.less b/source/css/_partial/reward.less
@@ -1,9 +1,9 @@
 
-.post-reward {
+.page-reward {
     margin: 60px 0;
     text-align: center;
 }
-.post-reward-btn {
+.page-reward-btn {
     width: 56px;
     height: 56px;
     line-height: 56px;
@@ -17,44 +17,6 @@
     }
 }
 
-.reward-lay {
-    display: none;
-    position: fixed;
-    top: 24%;
-    left: 50%;
-    z-index: 120;
-    padding: 30px;
-    text-align: center;
-    color: @secondaryTextColor;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: @boxShadow;
-    opacity: 0;
-    .transform(translate(-50%, -200%));
-
-    &.ready {
-        visibility: hidden;
-        display: block;
-        .transform(translate(-50%, -100%));
-        .transition(.4s);
-    }
-    &.in {
-        visibility: visible;
-        opacity: 1;
-        .transform(translate(-50%, 0));
-    }
-}
-.reward-off {
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    color: rgba(0, 0, 0, .2);
-    font-size: 16px;
-    line-height: 20px;
-    &:hover, &:active {
-        color: rgba(0, 0, 0, .4);
-    }
-}
 .reward-title {
     position: relative;
     padding: 10px 30px;
@@ -105,10 +67,10 @@
 
 }
 
-@media screen and (max-width: 360px) { 
+@media screen and (max-width: 360px) {
     .reward-items {
         li {
             width: 130px;
         }
     }
-}
+}
diff --git a/source/css/_partial/share.less b/source/css/_partial/share.less
@@ -35,8 +35,8 @@
             background: #55ACEE
         }
 
-        &.douban {
-            background: #228A31
+        &.google {
+            background: #db4437
         }
 
     }
@@ -102,7 +102,7 @@
 @share-fab-size: 42px;
 @share-icon-size: @share-fab-size - 8px;
 
-.post-share-fab {
+.page-share-fab {
     display: block;
     width: @share-fab-size;
     height: @share-fab-size;
@@ -112,17 +112,17 @@
     .boxShadow();
 }
 
-.post-share-wrap {
+.page-share-wrap {
     position: absolute;
     right: 35px;
     top: @share-fab-size / -2;
     z-index: 2;
-    .post-share {
+    .page-share {
         visibility: hidden
     }
 }
 
-.post-share {
+.page-share {
     position: absolute;
     bottom: @share-fab-size + 6px;
     right: 4px;
@@ -151,7 +151,7 @@
             font-size: 1.33333em;
             border-radius: 50%;
             .tip-left();
-            .boxShadow();
+            .boxShadow(.3s);
             opacity: 0;
             .transform(scale(0));
             -webkit-transform-origin: center bottom;
@@ -169,3 +169,13 @@
 
     }
 }
+
+.wx-share {
+    p {
+        margin: 0 0 15px;
+    }
+
+    img {
+        width: 200px;
+    }
+}
diff --git a/source/css/_partial/variable.less b/source/css/_partial/variable.less
@@ -146,7 +146,7 @@
     }
 
     &:after {
-        left: -4px;
+        left: -3px;
         border-left-color: rgba(0, 0, 0, .8);
     }
 }