aleks/hexo-theme-ayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add Share Platform

Browse Source
This commit is contained in:
shenyu 2020-02-06 23:14:35 +08:00
parent 83243b93f4
commit ad93a588f7
11 changed files with 301 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -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

2
_config.yml
View File

@ -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: 分享

1
layout/_partial/after-footer.ejs
View File

@ -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') %>
<% } %>

4
layout/_partial/article.ejs
View File

@ -41,8 +41,8 @@
<% } %>
</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
View 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>

12
source/css/_partial/reward.styl
View File

@ -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
View 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;
}

4
source/css/_variables.styl
View File

@ -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

1
source/css/style.styl
View File

@ -68,6 +68,7 @@ button
@import "_partial/gitalk"
@import "_partial/apple"
@import "_partial/reward"
@import "_partial/share"
if sidebar
@import "_partial/sidebar"

55
source/js/ayer.js
View File

@ -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
View 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()