From ad93a588f79d5af2eaba93fedab21ed968f65430 Mon Sep 17 00:00:00 2001 From: shenyu <448766534@qq.com> Date: Thu, 6 Feb 2020 23:14:35 +0800 Subject: [PATCH] feat: Add Share Platform --- README.md | 5 ++ _config.yml | 2 + layout/_partial/after-footer.ejs | 1 + layout/_partial/article.ejs | 6 +- layout/_partial/post/share.ejs | 50 +++++++++++ source/css/_partial/reward.styl | 12 +++ source/css/_partial/share.styl | 145 +++++++++++++++++++++++++++++++ source/css/_variables.styl | 4 + source/css/style.styl | 1 + source/js/ayer.js | 55 +----------- source/js/share.js | 75 ++++++++++++++++ 11 files changed, 301 insertions(+), 55 deletions(-) create mode 100644 layout/_partial/post/share.ejs create mode 100644 source/css/_partial/share.styl create mode 100644 source/js/share.js diff --git a/README.md b/README.md index 80d90e1..2bfd2ba 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,11 @@ progressBar: ture # Article Setting # (Use this to excerpt if article is too long：) excerpt_link: Read More... + +# Share +share_enable: true +# If you are not in China, maybe you prefer to set:false +share_china: true # share text share_text: Share # search text diff --git a/_config.yml b/_config.yml index 8a293c4..649639c 100644 --- a/_config.yml +++ b/_config.yml @@ -41,6 +41,8 @@ excerpt_link: 阅读更多... # 是否开启文章分享按钮 share_enable: true +# 国内的社交平台(If you are not in China, maybe you prefer to set:false) +share_china: true # 文章分享文字 share_text: 分享 diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs index 980cb40..2df421b 100644 --- a/layout/_partial/after-footer.ejs +++ b/layout/_partial/after-footer.ejs @@ -2,6 +2,7 @@ <%- js('/js/jquery.justifiedGallery.min') %> <%- js('/js/lazyload.min') %> <%- js('/js/busuanzi-2.3.pure.min') %> +<%- js('/js/share') %> <% if (theme.fancybox){ %> <%- js('fancybox/jquery.fancybox.min') %> <% } %> diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs index 26d6832..411bc5a 100644 --- a/layout/_partial/article.ejs +++ b/layout/_partial/article.ejs @@ -41,9 +41,9 @@ <% } %> diff --git a/layout/_partial/post/share.ejs b/layout/_partial/post/share.ejs new file mode 100644 index 0000000..415996f --- /dev/null +++ b/layout/_partial/post/share.ejs @@ -0,0 +1,50 @@ +<% + var sUrl = url.replace(/index\.html$/, ''); + sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl; +%> +
+ + + <%- theme.share_text %> + +
+ +
+
+ +
+ +

扫一扫，分享到微信

+
+ 微信分享二维码 +
+
+ +
\ No newline at end of file diff --git a/source/css/_partial/reward.styl b/source/css/_partial/reward.styl index 9b2f653..3b71536 100644 --- a/source/css/_partial/reward.styl +++ b/source/css/_partial/reward.styl @@ -30,6 +30,18 @@ padding 0px 20px 20px background-color lighten(water,30%) display none + &.ready { + visibility: hidden; + display: block; + transform: translate(-50%, -100%); + transition: .3s; + } + + &.in { + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); + } .close height 28px line-height 28px diff --git a/source/css/_partial/share.styl b/source/css/_partial/share.styl new file mode 100644 index 0000000..564a9ad --- /dev/null +++ b/source/css/_partial/share.styl @@ -0,0 +1,145 @@ +.share-wrap { + min-height: 20px; + display: none; + position: absolute; + right: 0; + bottom: -32px; + width: 250px; +} + +.share-btn { + float: right; + position: relative; +} +.share-outer { + display inline-flex; + border: none; + text-shadow: none; + text-decoration: none; + width auto; + color: main-color; + height: 28px; + line-height: 26px; + i{ + font-size: 18px; + margin-right 5px; + } + &:hover { + transform: none; + cursor: pointer; + } + } + +.share-icons { + display: flex; + justify-content: flex-end; + align-items: center; + flex-wrap: wrap; + + a { + border-radius: 50%; + display: inline-block; + vertical-align: middle; + zoom: 1; + margin: 3px; + transition: 0.3s; + text-align: center; + color: main-color; + width: 28px; + height: 28px; + line-height: 26px; + font-size: 13px; + i { + font-size: 24px + } + &.weibo { + color weibo-color + } + &.weixin { + color wechat-color + } + &.qq { + color qq-color + } + &.douban { + color douban-color + } + &.twitter { + color twitter-color + } + &.facebook { + color facebook-color + } + &.google { + color google-color + } + &:active { + color: ocean; + } + + &:hover { + transform: scale(1.2); + } + } +} + +.wx-share-modal { + position: fixed; + top: 24%; + left: 50%; + z-index: 9999; + padding: 20px; + text-align: center; + color: #727272; + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + opacity: 0; + transform: translate(-50%, -200%); + + p { + margin-bottom: 10px; + } + + &.ready { + visibility: 0; + display: block; + transform: translate(-50%, -100%); + transition: .3s; + } + + &.in { + display: block; + visibility: visible; + opacity: 1; + transform: translate(-50%, 0); + } + + .modal-close { + position: absolute; + right: 15px; + top: 15px; + color: rgba(0, 0, 0, .2); + font-size: 16px; + line-height: 20px; + i{ + font-size: 24px; + } + + &:hover, + &:active { + color: rgba(0, 0, 0, .4); + } + } +} + +#share-mask{ + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color rgba(0,0,0,.6); + z-index: 999; + display: none; + } \ No newline at end of file diff --git a/source/css/_variables.styl b/source/css/_variables.styl index 15e3380..2ec0c90 100644 --- a/source/css/_variables.styl +++ b/source/css/_variables.styl @@ -28,6 +28,10 @@ sand-gray = #bbb red = #ea434a // Share Colors +weibo-color = #d81e06 +wechat-color = #51c332 +qq-color = #4cafe9 +douban-color = #05b711 twitter-color = #00aced facebook-color = #3b5998 pinterest-color = #cb2027 diff --git a/source/css/style.styl b/source/css/style.styl index 238f936..f3b25c5 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -68,6 +68,7 @@ button @import "_partial/gitalk" @import "_partial/apple" @import "_partial/reward" +@import "_partial/share" if sidebar @import "_partial/sidebar" diff --git a/source/js/ayer.js b/source/js/ayer.js index f70276a..1024b12 100644 --- a/source/js/ayer.js +++ b/source/js/ayer.js @@ -65,56 +65,7 @@ // // Share - $('body').on('click', function () { - $('.article-share-box.on').removeClass('on'); - }).on('click', '.article-share-link', function (e) { - e.stopPropagation(); - - var $this = $(this), - url = $this.attr('data-url'), - encodedUrl = encodeURIComponent(url), - id = 'article-share-box-' + $this.attr('data-id'), - offset = $this.offset(); - - if ($('#' + id).length) { - var box = $('#' + id); - - if (box.hasClass('on')) { - box.removeClass('on'); - return; - } - } else { - var html = [ - '
', - '', - '
', - '', - '', - '', - '', - '
', - '
' - ].join(''); - - var box = $(html); - $('body').append(box); - } - $('.article-share-box.on').hide(); - - box.css({ - top: offset.top + 25, - left: offset.left - }).addClass('on'); - }).on('click', '.article-share-box', function (e) { - e.stopPropagation(); - }).on('click', '.article-share-box-input', function () { - $(this).select(); - }).on('click', '.article-share-box-link', function (e) { - e.preventDefault(); - e.stopPropagation(); - - window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450'); - }); + $('.share-outer').click(()=>$('.share-wrap').fadeToggle()) // // fancybox @@ -195,8 +146,8 @@ // reward $('#reward-btn').on('click', function () { - $('#mask').fadeIn(100) - $('#reward').fadeIn(100) + $('#reward').fadeIn(150) + $('#mask').fadeIn(150) }); $('#reward .close, #mask').on('click', function () { $('#mask').fadeOut(100) diff --git a/source/js/share.js b/source/js/share.js new file mode 100644 index 0000000..2485062 --- /dev/null +++ b/source/js/share.js @@ -0,0 +1,75 @@ + +function generate(url, opts) { + var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl)) + .replace(/<%-sTitle%>/g, opts.sTitle) + .replace(/<%-sDesc%>/g, opts.sDesc) + .replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic)); + + window.open(url); +} + +function showWX() { + let $wx = $('.wx-share-modal') + let $mask = $('#share-mask') + $wx.addClass('in') + $wx.addClass('ready') + $mask.show() +} + +function hideWX() { + let $wx = $('.wx-share-modal') + let $mask = $('#share-mask') + $wx.removeClass('in') + $wx.removeClass('ready') + $mask.hide() +} + +function handleClick(type, opts) { + if (type === 'weibo') { + generate('http://service.weibo.com/share/share.php?url=<%-sUrl%>&title=<%-sTitle%>&pic=<%-sPic%>', opts) + } else if (type === 'qq') { + generate('http://connect.qq.com/widget/shareqq/index.html?url=<%-sUrl%>&title=<%-sTitle%>&source=<%-sDesc%>', opts) + } else if (type === 'douban') { + generate('https://www.douban.com/share/service?image=<%-sPic%>&href=<%-sUrl%>&name=<%-sTitle%>&text=<%-sDesc%>', opts) + } else if (type === 'qzone') { + generate('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%-sUrl%>&title=<%-sTitle%>&pics=<%-sPic%>&summary=<%-sDesc%>', opts) + } else if (type === 'facebook') { + generate('https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>', opts) + } else if (type === 'twitter') { + generate('https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>&via=<%-config.url%>', opts) + } else if (type === 'google') { + generate('https://plus.google.com/share?url=<%-sUrl%>', opts) + } else if (type === 'weixin') { + showWX(); + } +} + +let init = function () { + let $sns = document.querySelectorAll('.share-sns'); + if (!$sns || $sns.length === 0) return; + + let sUrl = window.location.href; + let sTitle = document.querySelector('title').innerHTML; + let $img = document.querySelectorAll('.article-entry img'); + let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : ''; + if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) { + sPic = window.location.origin + sPic + } + + $sns.forEach(($em) => { + $em.onclick = (e) => { + let type = $em.getAttribute('data-type') + handleClick(type, { + sUrl: sUrl, + sPic: sPic, + sTitle: sTitle, + sDesc: sTitle + }) + } + }) + + document.querySelector('#mask').onclick = hideWX + document.querySelector('.modal-close').onclick = hideWX +} + +init() \ No newline at end of file