feat: Add Share Platform
This commit is contained in:
shenyu
parent
83243b93f4
commit
ad93a588f7
@ -103,6 +103,11 @@ progressBar: ture
|
||||
# Article Setting
|
||||
# (Use this to excerpt if article is too long：<!--more-->)
|
||||
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
|
||||
|
||||
@ -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: 分享
|
||||
|
||||
|
||||
@ -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') %>
|
||||
<% } %>
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
<% } %>
|
||||
</div>
|
||||
<footer class="article-footer">
|
||||
<% if (theme.share_enable){ %><a data-url="<%- post.permalink %>" data-id="<%= post._id %>"
|
||||
class="article-share-link"><%- theme.share_text %></a>
|
||||
<% } %>
|
||||
<% if (!index && theme.share_enable){ %>
|
||||
<%- partial('post/share') %>
|
||||
<% } %>
|
||||
<%- partial('post/tag') %>
|
||||
</footer>
|
||||
|
||||
|
||||
50
layout/_partial/post/share.ejs
Normal file
50
layout/_partial/post/share.ejs
Normal file
@ -0,0 +1,50 @@
|
||||
<%
|
||||
var sUrl = url.replace(/index\.html$/, '');
|
||||
sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;
|
||||
%>
|
||||
<div class="share-btn">
|
||||
<span class="share-sns share-outer">
|
||||
<i class="ri-share-forward-line"></i>
|
||||
<%- theme.share_text %>
|
||||
</span>
|
||||
<div class="share-wrap">
|
||||
<div class="share-icons">
|
||||
<% if( theme.share_china ){ %>
|
||||
<a class="weibo share-sns" href="javascript:;" data-type="weibo">
|
||||
<i class="ri-weibo-fill"></i>
|
||||
</a>
|
||||
<a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
|
||||
<i class="ri-wechat-fill"></i>
|
||||
</a>
|
||||
<a class="qq share-sns" href="javascript:;" data-type="qq">
|
||||
<i class="ri-qq-fill"></i>
|
||||
</a>
|
||||
<a class="douban share-sns" href="javascript:;" data-type="douban">
|
||||
<i class="ri-douban-line"></i>
|
||||
</a>
|
||||
<!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
|
||||
<i class="icon icon-qzone"></i>
|
||||
</a> -->
|
||||
<% } %>
|
||||
<a class="facebook share-sns" href="javascript:;" data-type="facebook">
|
||||
<i class="ri-facebook-circle-fill"></i>
|
||||
</a>
|
||||
<a class="twitter share-sns" href="javascript:;" data-type="twitter">
|
||||
<i class="ri-twitter-fill"></i>
|
||||
</a>
|
||||
<a class="google share-sns" href="javascript:;" data-type="google">
|
||||
<i class="ri-google-fill"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wx-share-modal">
|
||||
<a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
|
||||
<p>扫一扫，分享到微信</p>
|
||||
<div class="wx-qrcode">
|
||||
<img src="<%- 'qrcode' in locals ? qrcode(sUrl) : '//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl %>" alt="微信分享二维码">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="share-mask"></div>
|
||||
@ -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
|
||||
|
||||
145
source/css/_partial/share.styl
Normal file
145
source/css/_partial/share.styl
Normal file
@ -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;
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -68,6 +68,7 @@ button
|
||||
@import "_partial/gitalk"
|
||||
@import "_partial/apple"
|
||||
@import "_partial/reward"
|
||||
@import "_partial/share"
|
||||
|
||||
if sidebar
|
||||
@import "_partial/sidebar"
|
||||
|
||||
@ -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 = [
|
||||
'<div id="' + id + '" class="article-share-box">',
|
||||
'<input class="article-share-input" value="' + url + '">',
|
||||
'<div class="article-share-links">',
|
||||
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
|
||||
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
|
||||
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
|
||||
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].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)
|
||||
|
||||
75
source/js/share.js
Normal file
75
source/js/share.js
Normal file
@ -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()
|
||||
Loading…
Reference in New Issue
Block a user