NEXT主题优化分享样式
2020-03-20 本文已影响0人
小哲1998
在本文中我将分享needmoreshare2文章分享的优化
注意：本文中的优化是直接对needmoreshare2底层css进行更改
为什么不选择baidushare，因为百度分享不支持http,我选择了next主题自带的needmoreshare2插件，首先在主题的_config.yml中启用：
needmoreshare2:
enable: true
postbottom:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: middleCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: horizontal
position: middleLeft
networks: Weibo,Douban,QQZone,Linkedin,renren,Wechat,QQ
启用即可在博客中查看，如果样式满意可以不必修改，原始插件是没有QQ分享的，在配置文件中显示的networks中的内容为用户需要显示的分享图标，插件支持的分享有：
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
# Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
# Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
# Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
另外对于QQ的添加，我会在后文提到。
样式的修改
首先，注意一下，在主题的_config.yml配置中一定要开启float而position一定要选择middleleft。
1.更改整体位置。
找到..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl,更改id为needsharebutton-float的内容，建议原始内容注释。最终代码如下：
#needsharebutton-postbottom {
position: relative;
cursor: pointer;
height: 26px;
.btn {
display: initial;
padding: 1px 4px;
border: 1px solid $btn-default-border-color;
border-radius: 3px;
}
}
/*原始样式*/
// #needsharebutton-float {
// position: fixed;
// bottom: 38px;
// left: -8px;
// z-index: 9999;
// cursor: pointer;
// .btn {
// //display: initial;
// padding: 0 10px 0 14px
// border: 1px solid $btn-default-border-color;
// border-radius: 4px;
// }
// }
/*新样式*/
#needsharebutton-float {
position: fixed;
bottom: 70px
right: 30px
z-index: 9999;
cursor: pointer;
.btn {
border: 0;
width: 14px
padding: 5px
line-height: 0
height 14px
background: rgba(0,0,0,0)
}
}
修改..\blog\themes\next\source\lib\needsharebutton\needsharebutton.css,修改后的代码，注意下列代码更改的是对应的类，没有把全文贴上，全文太长：
need-share-button_dropdown类
/*新样式*/
.need-share-button_dropdown {
position: absolute;
z-index: 10;
visibility: hidden;
overflow: hidden;
width: 256px;
font-size: 16px;
-ms-transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-moz-transition: .3s;
transition: .3s;
-ms-transform: translate(200px,0); /* IE 9 */
-webkit-transform: translate(200px,0); /* Safari and Chrome */
-o-transform: translate(200px,0); /* Opera */
-moz-transform: translate(200px,0);
transform: translate(200px,0);
text-align: right;
white-space: normal;
opacity: 0;
background-color: rgba(0,0,0,0);
}
/*旧样式*/
/* .need-share-button_dropdown {
position: absolute;
z-index: 10;
visibility: hidden;
overflow: hidden;
width: 300px;
font-size: 16px;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
text-align: center;
white-space: normal;
opacity: 0;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
} */
need-share-button_link类
/*旧样式*/
/* .need-share-button_link {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
text-align: center;
} */
/*新样式*/
.need-share-button_link {
display: inline-block;
width: 20px;
height: 20px;
line-height: 0;
margin-right: 15px;
cursor: pointer;
text-align: center;
}
通过更改
.need-share-button_dropdown-middle-left {
/* top: 50%; */
bottom: 0;
right: 100%;
margin-right: 5px;
}
中的margin-right属性进行位置调整。
2.更改图标颜色
在..\blog\themes\next\source\lib\needsharebutton\needsharebutton.css中
/* Network buttons
***********************************************/
下方对应的为图标颜色，根据对应的标签进行颜色更改。我开启的分享有微博，豆瓣,人人,QQ空间,Linkedin,QQ,微信,我的样式为：
.need-share-button_wechat:hover {
color: #aaff00;
}
.need-share-button_wechat{
color: #7f7f7f;
}
.need-share-button_wechat.need-share-button_link-box {
color: #fff;
background: #a2dc30;
}
.need-share-button_weibo{
color: #7f7f7f;
}
.need-share-button_weibo:hover {
color: #ff0000;
}
.need-share-button_weibo.need-share-button_link-box {
color: #fff;
background: #d52b2b;
}
.need-share-button_douban {
color: white;
}
.need-share-button_douban:hover {
color: rgb(0, 255, 72);
}
.need-share-button_douban{
color: #7f7f7f;
}
.need-share-button_douban.need-share-button_link-box {
color: #fff;
background: #072;
}
.need-share-button_qqzone:hover {
color: #ffd000;
}
.need-share-button_qqzone{
color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
color: #fff;
background: #ffce00;
}
.need-share-button_qqzone.need-share-button_link-box {
color: #fff;
background: #659bff;
}
.need-share-button_renren:hover {
color: #ff00f2;
}
.need-share-button_renren{
color: #7f7f7f;
}
.need-share-button_renren.need-share-button_link-box {
color: #fff;
background: #207cc5;
}
.need-share-button_linkedin:hover {
color: #0085af;
}
.need-share-button_linkedin{
color: #7f7f7f;
}
在这里我们需要添加QQ分享的图标颜色(如果不需要QQ分享的可以跳过这一步)
.need-share-button_qq:hover {
color: #008cff;
}
.need-share-button_qq{
color: #7f7f7f;
}
3.更改图标
注：如果不需要QQ分享可跳过这一步
首先在：https://www.iconfont.cn/创建项目
创建项目
然后挑选图标加入项目中，这里建议你将你需要的所有分享的图标都搜一遍。挑选完成将其添加至项目。
添加项目
在项目中下载代码:
下载至本地
在下载的代码中找到
iconfont.css,用记事本打开：
打开CSS
删除
iconfont.css中的iconfont类：
删除类
将
..\blog\themes\next\source\lib\needsharebutton\font-embedded.css中的内容只保留:
.need-share-button_dropdown [class^="icon-"]:before, .need-share-button_dropdown [class*=" icon-"]:before {
font-family: "iconfont";
font-style: normal;
font-weight: normal;
speak-as: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
其余部分删除（注意备份！）
将iconfont.css中剩余的内容粘贴至..\blog\themes\next\source\lib\needsharebutton\font-embedded.css文件中，注意类名的命名规则：
.icon-分享平台:before{
content: "内容";
}
例如：
.icon-qqzone:before {
content: "\e633";
}
可能下载的代码中的可能会出现大写也可能出现：
.icon-QQzone-fill:before {
content: "\e633";
}
这种形式，我们严格按照命名规则来即可，其中的分享平台名称以下方为准
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
# Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
# Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
# Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
所有的都小写。
4.修改部分js
找到themes\next\source\lib\needsharebutton\needsharebutton.js，将其中微信部分进行修改：
"wechat": function (el) {
var myoptions = getOptions(el);
// var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);
var imgSrc = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+encodeURIComponent(myoptions.url);
// root.popup(imgSrc);
var dropdownEl = el.querySelector(".need-share-button_dropdown");
var img = dropdownEl.getElementsByClassName("need-share-wechat-code-image")[0];
if (img) {
img.remove();
} else {
img = document.createElement("img");
img.src = imgSrc;
img.alt = "loading wechat image...";
img.setAttribute("class", "need-share-wechat-code-image");
dropdownEl.prepend(img);
}
},
添加qq的分享事件：
"qq": function (el) {
var myoptions = getOptions(el);
var url = "https://connect.qq.com/widget/shareqq/index.html?url=" +
encodeURIComponent(myoptions.title) +
"&url=" + encodeURIComponent(myoptions.url) +
"&pics=" + encodeURIComponent(myoptions.image) +
"&desc=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
更改主页快速修改：
// create default options
root.options = {
iconStyle: "default", // default or box
boxForm: "horizontal", // horizontal or vertical
position: "bottomCenter", // top / middle / bottom + Left / Center / Right
protocol: ["http", "https"].indexOf(window.location.href.split(":")[0]) === -1 ? "https://" : "//",
networks: "QQ,Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote"
};
更改图标文件：
// fill fropdown with buttons
var iconClass = myoptions.iconStyle == "default" ?
"need-share-button_link need-share-button_" :
"need-share-button_link-" + myoptions.iconStyle + " need-share-button_link need-share-button_";
for (var network in myoptions.networks) {
if (myoptions.networks.hasOwnProperty(network)) {
var link = document.createElement("span");
network = myoptions.networks[network].trim();
var networkLC = network.toLowerCase();
link.className = iconClass + networkLC;
// var fontello = ["weibo", "wechat", "douban", "qqzone", "renren","qq","linkedin"];
// if (fontello.indexOf(networkLC) === -1) {
// link.className += " social-" + networkLC;
// } else {
link.className += " icon-" + networkLC;
// }
link.dataset.network = networkLC;
link.title = network;
dropdownEl.appendChild(link);
}
}
5.更改部分样式
在themes\next\source\css\_custom\custom.styl中添加部分样式：
/*微信图片样式*/
.need-share-button-opened img.need-share-wechat-code-image{
box-shadow: none !important
border-radius: 0 !important
margin: 0px 0px 20px 45px !important
border: 2px solid white
}
/*导航栏样式*/
.sidebar-toggle{
background-color: rgba(0,0,0,0) !important
}
.sidebar-toggle-line{
background: #7f7f7f !important
}
.page-post-detail .sidebar-toggle-line{
background: #7f7f7f !important
}
.back-to-top{
background: rgba(0,0,0,0)
color: #7f7f7f !important
}
.back-to-top:hover{
background: rgba(0,0,0,0)
color: #ffa400 !important
}
#needsharebutton-float .btn{
color: #7f7f7f !important
}
#needsharebutton-float .btn:hover{
color: #ffa400 !important
}
最终效果如图所示：
效果
6.完整代码
路径：..\themes\next\source\css\_custom\custom.styl下的custom.styl添加代码
/*微信图片样式*/
.need-share-button-opened img.need-share-wechat-code-image{
box-shadow: none !important
border-radius: 0 !important
margin: 0px 0px 20px 45px !important
border: 2px solid white
}
/*导航栏样式*/
.sidebar-toggle{
background-color: rgba(0,0,0,0) !important
}
.sidebar-toggle-line{
background: #7f7f7f !important
}
.page-post-detail .sidebar-toggle-line{
background: #7f7f7f !important
}
.back-to-top{
background: rgba(0,0,0,0)
color: #7f7f7f !important
}
.back-to-top:hover{
background: rgba(0,0,0,0)
color: #ffa400 !important
}
#needsharebutton-float .btn{
color: #7f7f7f !important
}
#needsharebutton-float .btn:hover{
color: #ffa400 !important
}
路径：..\blog\themes\next\source\lib\needsharebutton\needsharebutton.js下的needsharsbutton.js
/***********************************************
needShareButton
- Version 1.0.0
- Copyright 2015 Dzmitry Vasileuski
- Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
(function () {
// find closest
function closest(elem, parent) {
if (typeof (parent) == "string") {
var matchesSelector = elem.matches || elem.webkitMatchesSelector ||
elem.mozMatchesSelector || elem.msMatchesSelector;
if (!!matchesSelector) {
while (elem) {
if (matchesSelector.bind(elem)(parent)) {
return elem;
} else {
elem = elem.parentElement;
}
}
}
return false;
} else {
while (elem) {
if (elem == parent) {
return elem;
} else {
elem = elem.parentElement;
}
}
return false;
}
}
// share button class
window.needShareButton = function (elem, options) {
// create element reference
var root = this;
root.elem = elem || "need-share-button";
/* Helpers
***********************************************/
// get title from html
root.getTitle = function () {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
content = document.querySelector("title");
if (content) {
return content.innerText;
}
}
return document.title;
};
// get image from html
root.getImage = function () {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
content = document.querySelector("meta[property=\"og:image\"]") ||
document.querySelector("meta[name=\"twitter:image\"]");
if (content) {
return content.getAttribute("content");
} else {
return "";
}
} else {
return "";
}
};
// get description from html
root.getDescription = function () {
var content;
// check querySelector existance for old browsers
if (document.querySelector) {
content = document.querySelector("meta[property=\"og:description\"]") ||
document.querySelector("meta[name=\"twitter:description\"]") ||
document.querySelector("meta[name=\"description\"]");
if (content) {
return content.getAttribute("content");
} else {
return "";
}
} else {
content = document.getElementsByTagName("meta").namedItem("description");
if (content) {
return content.getAttribute("content");
} else {
return "";
}
}
};
// share urls for all networks
root.share = {
"weibo": function (el) {
var myoptions = getOptions(el);
var url = "http://v.t.sina.com.cn/share/share.php?title=" +
encodeURIComponent(myoptions.title) +
"&url=" + encodeURIComponent(myoptions.url) +
"&pic=" + encodeURIComponent(myoptions.image);
root.popup(url);
},
"wechat": function (el) {
var myoptions = getOptions(el);
// var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url);
var imgSrc = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+encodeURIComponent(myoptions.url);
// root.popup(imgSrc);
var dropdownEl = el.querySelector(".need-share-button_dropdown");
var img = dropdownEl.getElementsByClassName("need-share-wechat-code-image")[0];
if (img) {
img.remove();
} else {
img = document.createElement("img");
img.src = imgSrc;
img.alt = "loading wechat image...";
img.setAttribute("class", "need-share-wechat-code-image");
dropdownEl.prepend(img);
}
},
"douban": function (el) {
var myoptions = getOptions(el);
var url = "https://www.douban.com/share/service?name=" +
encodeURIComponent(myoptions.title) +
"&href=" + encodeURIComponent(myoptions.url) +
"&image=" + encodeURIComponent(myoptions.image);
root.popup(url);
},
"qqzone": function (el) {
var myoptions = getOptions(el);
var url = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
encodeURIComponent(myoptions.title) +
"&url=" + encodeURIComponent(myoptions.url) +
"&pics=" + encodeURIComponent(myoptions.image) +
"&desc=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
"qq": function (el) {
var myoptions = getOptions(el);
var url = "https://connect.qq.com/widget/shareqq/index.html?url=" +
encodeURIComponent(myoptions.title) +
"&url=" + encodeURIComponent(myoptions.url) +
"&pics=" + encodeURIComponent(myoptions.image) +
"&desc=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
"renren": function (el) {
var myoptions = getOptions(el);
var url = "http://widget.renren.com/dialog/share?title=" +
encodeURIComponent(myoptions.title) +
"&resourceUrl=" + encodeURIComponent(myoptions.url) +
"&pic=" + encodeURIComponent(myoptions.image) +
"&description=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
"mailto": function (el) {
var myoptions = getOptions(el);
var url = "mailto:?subject=" + encodeURIComponent(myoptions.title) +
"&body=Thought you might enjoy reading this: " + encodeURIComponent(myoptions.url) +
" - " + encodeURIComponent(myoptions.description);
window.location.href = url;
},
"twitter": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "twitter.com/intent/tweet?text=";
url += encodeURIComponent(myoptions.title) + "&url=" + encodeURIComponent(myoptions.url);
root.popup(url);
},
"pinterest": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "pinterest.com/pin/create/bookmarklet/?is_video=false";
url += "&media=" + encodeURIComponent(myoptions.image);
url += "&url=" + encodeURIComponent(myoptions.url);
url += "&description=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"facebook": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.facebook.com/share.php?";
url += "u=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"googleplus": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "plus.google.com/share?";
url += "url=" + encodeURIComponent(myoptions.url);
root.popup(url);
},
"reddit": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.reddit.com/submit?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"delicious": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "del.icio.us/post?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
url += "¬es=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
"stumbleupon": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.stumbleupon.com/submit?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"linkedin": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.linkedin.com/shareArticle?mini=true";
url += "&url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
url += "&source=" + encodeURIComponent(myoptions.source);
root.popup(url);
},
"slashdot": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "slashdot.org/bookmark.pl?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"technorati": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "technorati.com/faves?";
url += "add=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"posterous": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "posterous.com/share?";
url += "linkto=" + encodeURIComponent(myoptions.url);
root.popup(url);
},
"tumblr": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.tumblr.com/share?v=3";
url += "&u=" + encodeURIComponent(myoptions.url);
url += "&t=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"googlebookmarks": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.google.com/bookmarks/mark?op=edit";
url += "&bkmk=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
url += "&annotation=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
"newsvine": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.newsvine.com/_tools/seed&save?";
url += "u=" + encodeURIComponent(myoptions.url);
url += "&h=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"evernote": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.evernote.com/clip.action?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"friendfeed": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.friendfeed.com/share?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
root.popup(url);
},
"vkontakte": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "vkontakte.ru/share.php?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
url += "&description=" + encodeURIComponent(myoptions.description);
url += "&image=" + encodeURIComponent(myoptions.image);
url += "&noparse=true";
root.popup(url);
},
"odnoklassniki": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1";
url += "&st.comments=" + encodeURIComponent(myoptions.description);
url += "&st._surl=" + encodeURIComponent(myoptions.url);
root.popup(url);
},
"mailru": function (el) {
var myoptions = getOptions(el);
var url = myoptions.protocol + "connect.mail.ru/share?";
url += "url=" + encodeURIComponent(myoptions.url);
url += "&title=" + encodeURIComponent(myoptions.title);
url += "&description=" + encodeURIComponent(myoptions.description);
url += "&imageurl=" + encodeURIComponent(myoptions.image);
root.popup(url);
}
};
// open share link in a popup
root.popup = function (url) {
// set left and top position
var popupWidth = 600,
popupHeight = 500,
// fix dual screen mode
dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left,
dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top,
width = window.innerWidth ?
window.innerWidth :
document.documentElement.clientWidth ?
document.documentElement.clientWidth :
screen.width,
height = window.innerHeight ?
window.innerHeight :
document.documentElement.clientHeight ?
document.documentElement.clientHeight :
screen.height,
// calculate top and left position
left = ((width / 2) - (popupWidth / 2)) + dualScreenLeft,
top = ((height / 2) - (popupHeight / 2)) + dualScreenTop,
// show popup
shareWindow = window.open(url, "targetWindow",
"toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=" + popupWidth +
", height=" + popupHeight + ", top=" + top + ", left=" + left);
// Puts focus on the newWindow
if (window.focus) {
shareWindow.focus();
}
};
/* Set options
***********************************************/
// create default options
root.options = {
iconStyle: "default", // default or box
boxForm: "horizontal", // horizontal or vertical
position: "bottomCenter", // top / middle / bottom + Left / Center / Right
protocol: ["http", "https"].indexOf(window.location.href.split(":")[0]) === -1 ? "https://" : "//",
networks: "QQ,Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote"
};
// integrate custom options
for (var i in options) {
if (options.hasOwnProperty(i)) {
root.options[i] = options[i];
}
}
// convert networks string into array
//root.options.networks = root.options.networks.toLowerCase().split(",");
root.options.networks = root.options.networks.split(",");
function getOptions(el) {
// integrate data attribute options
var ret = {};
for (var i in root.options) {
if (root.options.hasOwnProperty(i)) {
ret[i] = root.options[i];
}
}
// these attrs must get dynamically.
ret.url = window.location.href;
ret.title = root.getTitle();
ret.image = root.getImage();
ret.description = root.getDescription();
for (var option in el.dataset) {
// replace only 'share-' prefixed data-attributes
if (option.match(/share/)) {
var newOption = option.replace(/share/, "");
if (!newOption.length) {
continue;
}
newOption = newOption.charAt(0).toLowerCase() + newOption.slice(1);
var val = el.dataset[option];
if (newOption === "networks") {
//val = val.toLowerCase().split(",");
val = val.split(",");
} else if (newOption === "url" && val && val[0] === "/") {
// fix relative url problem.
val = location.origin + val;
}
ret[newOption] = val;
}
}
return ret;
}
function createDropdown(el) {
// create dropdown
var dropdownEl = document.createElement("span");
dropdownEl.className = "need-share-button_dropdown";
if (el.querySelector(".need-share-button_dropdown")) {
return;
}
var myoptions = getOptions(el);
// set dropdown row length
if (myoptions.iconStyle == "box" && myoptions.boxForm == "horizontal") {
dropdownEl.className += " need-share-button_dropdown-box-horizontal";
} else if (myoptions.iconStyle == "box" && myoptions.boxForm == "vertical") {
dropdownEl.className += " need-share-button_dropdown-box-vertical";
}
// set dropdown position
setTimeout(function () {
switch (myoptions.position) {
case "topLeft":
dropdownEl.className += " need-share-button_dropdown-top-left";
break;
case "topRight":
dropdownEl.className += " need-share-button_dropdown-top-right";
break;
case "topCenter":
dropdownEl.className += " need-share-button_dropdown-top-center";
dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
break;
case "middleLeft":
dropdownEl.className += " need-share-button_dropdown-middle-left";
dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px";
break;
case "middleRight":
dropdownEl.className += " need-share-button_dropdown-middle-right";
dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px";
break;
case "bottomLeft":
dropdownEl.className += " need-share-button_dropdown-bottom-left";
break;
case "bottomRight":
dropdownEl.className += " need-share-button_dropdown-bottom-right";
break;
case "bottomCenter":
dropdownEl.className += " need-share-button_dropdown-bottom-center";
dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
break;
default:
dropdownEl.className += " need-share-button_dropdown-bottom-center";
dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px";
break;
}
}, 1);
// fill fropdown with buttons
var iconClass = myoptions.iconStyle == "default" ?
"need-share-button_link need-share-button_" :
"need-share-button_link-" + myoptions.iconStyle + " need-share-button_link need-share-button_";
for (var network in myoptions.networks) {
if (myoptions.networks.hasOwnProperty(network)) {
var link = document.createElement("span");
network = myoptions.networks[network].trim();
var networkLC = network.toLowerCase();
link.className = iconClass + networkLC;
// var fontello = ["weibo", "wechat", "douban", "qqzone", "renren","qq","linkedin"];
// if (fontello.indexOf(networkLC) === -1) {
// link.className += " social-" + networkLC;
// } else {
link.className += " icon-" + networkLC;
// }
link.dataset.network = networkLC;
link.title = network;
dropdownEl.appendChild(link);
}
}
dropdownEl.addEventListener("click", function (event) {
if (closest(event.target, ".need-share-button_link")) {
event.preventDefault();
event.stopPropagation();
root.share[event.target.dataset.network](el);
return false;
}
});
el.appendChild(dropdownEl);
}
// close on click outside
document.addEventListener("click", function (event) {
var openedEl = document.querySelector(".need-share-button-opened");
if (!closest(event.target, ".need-share-button-opened")) {
if (openedEl) {
openedEl.classList.remove("need-share-button-opened");
// hide wechat code image when close the dropdown.
if (openedEl.querySelector(".need-share-wechat-code-image")) {
openedEl.querySelector(".need-share-wechat-code-image").remove();
}
} else {
var el = closest(event.target, root.elem);
if (el) {
if (!el.classList.contains("need-share-button-opened")) {
createDropdown(el);
setTimeout(function () {
el.classList.add("need-share-button-opened");
}, 1);
}
}
}
} else {
setTimeout(function () {
openedEl.classList.remove("need-share-button-opened");
// hide wechat code image when close the dropdown.
if (openedEl.querySelector(".need-share-wechat-code-image")) {
openedEl.querySelector(".need-share-wechat-code-image").remove();
}
}, 1);
}
});
};
})();
路径：themes\next\source\lib\needsharebutton\needsharebutton.css下的needsharebutton.css
/***********************************************
needShareButton
- Version 1.0.0
- Copyright 2015 Dzmitry Vasileuski
- Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
/* Social icons font
***********************************************/
@import url('font-embedded.css');
.need-share-button {
position: relative;
}
.need-share-button-opened {
position: relative;
}
.need-share-button-opened img.need-share-wechat-code-image {
display: block;
width: 100%;
max-width: 200px;
margin: auto;
}
/*新样式*/
.need-share-button_dropdown {
position: absolute;
z-index: 10;
visibility: hidden;
overflow: hidden;
width: 256px;
font-size: 16px;
-ms-transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-moz-transition: .3s;
transition: .3s;
-ms-transform: translate(200px,0); /* IE 9 */
-webkit-transform: translate(200px,0); /* Safari and Chrome */
-o-transform: translate(200px,0); /* Opera */
-moz-transform: translate(200px,0);
transform: translate(200px,0);
text-align: right;
white-space: normal;
opacity: 0;
background-color: rgba(0,0,0,0);
}
/*旧样式*/
/* .need-share-button_dropdown {
position: absolute;
z-index: 10;
visibility: hidden;
overflow: hidden;
width: 300px;
font-size: 16px;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: scale(.1);
-ms-transform: scale(.1);
transform: scale(.1);
text-align: center;
white-space: normal;
opacity: 0;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
} */
.need-share-button-opened .need-share-button_dropdown {
visibility: visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.need-share-button_dropdown-box-vertical,
.need-share-button_dropdown-box-horizontal {
-webkit-border-radius: 0;
border-radius: 0;
}
.need-share-button_dropdown-box-vertical {
width: 50px;
}
.need-share-button_dropdown-box-horizontal {
width: auto;
white-space: nowrap;
}
/*旧样式*/
/* .need-share-button_link {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
text-align: center;
} */
/*新样式*/
.need-share-button_link {
display: inline-block;
width: 20px;
height: 20px;
line-height: 0;
margin-right: 15px;
cursor: pointer;
text-align: center;
}
.need-share-button_link:hover {
-webkit-transition: .3s;
transition: .3s;
opacity: .7;
}
/* Dropdown position
***********************************************/
.need-share-button_dropdown-top-left {
right: 100%;
bottom: 100%;
margin-right: 10px;
margin-bottom: 10px;
}
.need-share-button_dropdown-top-right {
bottom: 100%;
left: 100%;
margin-bottom: 10px;
margin-left: 10px;
}
.need-share-button_dropdown-top-center {
bottom: 100%;
left: 50%;
margin-bottom: 10px;
}
.need-share-button_dropdown-middle-left {
/* top: 50%; */
bottom: 0;
right: 100%;
margin-right: 5px;
}
.need-share-button_dropdown-middle-right {
top: 50%;
left: 100%;
margin-left: 10px;
}
.need-share-button_dropdown-bottom-left {
top: 100%;
right: 100%;
margin-top: 10px;
margin-right: 10px;
}
.need-share-button_dropdown-bottom-right {
top: 100%;
left: 100%;
margin-top: 10px;
margin-left: 10px;
}
.need-share-button_dropdown-bottom-center {
top: 100%;
left: 50%;
margin-top: 10px;
}
/* Default theme
***********************************************/
.need-share-button-default {
display: inline-block;
margin-bottom: 0;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
font-weight: 400;
color: #333;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
vertical-align: middle;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #fff;
}
/* Network buttons
***********************************************/
.need-share-button_wechat:hover {
color: #aaff00;
}
.need-share-button_wechat{
color: #7f7f7f;
}
.need-share-button_wechat.need-share-button_link-box {
color: #fff;
background: #a2dc30;
}
.need-share-button_weibo{
color: #7f7f7f;
}
.need-share-button_weibo:hover {
color: #ff0000;
}
.need-share-button_weibo.need-share-button_link-box {
color: #fff;
background: #d52b2b;
}
.need-share-button_douban {
color: white;
}
.need-share-button_douban:hover {
color: rgb(0, 255, 72);
}
.need-share-button_douban{
color: #7f7f7f;
}
.need-share-button_douban.need-share-button_link-box {
color: #fff;
background: #072;
}
.need-share-button_qqzone:hover {
color: #ffd000;
}
.need-share-button_qqzone{
color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
color: #fff;
background: #ffce00;
}
.need-share-button_qq:hover {
color: #008cff;
}
.need-share-button_qq{
color: #7f7f7f;
}
.need-share-button_qqzone.need-share-button_link-box {
color: #fff;
background: #659bff;
}
.need-share-button_renren:hover {
color: #ff00f2;
}
.need-share-button_renren{
color: #7f7f7f;
}
.need-share-button_renren.need-share-button_link-box {
color: #fff;
background: #207cc5;
}
.need-share-button_mailto {
color: #efbe00;
}
.need-share-button_mailto.need-share-button_link-box {
color: #fff;
background: #efbe00;
}
.need-share-button_twitter {
color: #00acec;
}
.need-share-button_twitter.need-share-button_link-box {
color: #fff;
background: #00acec;
}
.need-share-button_pinterest {
color: #cd2027;
}
.need-share-button_pinterest.need-share-button_link-box {
color: #fff;
background: #cd2027;
}
.need-share-button_facebook {
color: #3b5998;
}
.need-share-button_facebook.need-share-button_link-box {
color: #fff;
background: #3b5998;
}
.need-share-button_googleplus {
color: #d44132;
}
.need-share-button_googleplus.need-share-button_link-box {
color: #fff;
background: #d44132;
}
.need-share-button_reddit {
color: #000;
}
.need-share-button_reddit.need-share-button_link-box {
color: #fff;
background: #000;
}
.need-share-button_delicious {
color: #000;
}
.need-share-button_delicious.need-share-button_link-box {
color: #fff;
background: #000;
}
.need-share-button_stumbleupon {
color: #f04e23;
}
.need-share-button_stumbleupon.need-share-button_link-box {
color: #fff;
background: #f04e23;
}
.need-share-button_linkedin:hover {
color: #0085af;
}
.need-share-button_linkedin{
color: #7f7f7f;
}
.need-share-button_linkedin.need-share-button_link-box {
color: #fff;
background: #0085af;
}
.need-share-button_slashdot {
color: #026664;
}
.need-share-button_slashdot.need-share-button_link-box {
color: #fff;
background: #026664;
}
.need-share-button_technorati {
color: #49ae47;
}
.need-share-button_technorati.need-share-button_link-box {
color: #fff;
background: #49ae47;
}
.need-share-button_posterous {
color: #795d31;
}
.need-share-button_posterous.need-share-button_link-box {
color: #fff;
background: #795d31;
}
.need-share-button_tumblr {
color: #34465d;
}
.need-share-button_tumblr.need-share-button_link-box {
color: #fff;
background: #34465d;
}
.need-share-button_googlebookmarks {
color: #fde331;
}
.need-share-button_googlebookmarks.need-share-button_link-box {
color: #fff;
background: #fde331;
}
.need-share-button_newsvine {
color: #03652c;
}
.need-share-button_newsvine.need-share-button_link-box {
color: #fff;
background: #03652c;
}
.need-share-button_evernote {
color: #79d626;
}
.need-share-button_evernote.need-share-button_link-box {
color: #fff;
background: #79d626;
}
.need-share-button_friendfeed {
color: #b0cbe9;
}
.need-share-button_friendfeed.need-share-button_link-box {
color: #fff;
background: #b0cbe9;
}
.need-share-button_vkontakte {
color: #4c75a3;
}
.need-share-button_vkontakte.need-share-button_link-box {
color: #fff;
background: #4c75a3;
}
.need-share-button_odnoklassniki {
color: #ed812b;
}
.need-share-button_odnoklassniki.need-share-button_link-box {
color: #fff;
background: #ed812b;
}
.need-share-button_mailru {
color: #f89c0e;
}
.need-share-button_mailru.need-share-button_link-box {
color: #fff;
background: #f89c0e;
}
路径：..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl下的needsharebutton.styl
#needsharebutton-postbottom {
position: relative;
cursor: pointer;
height: 26px;
.btn {
display: initial;
padding: 1px 4px;
border: 1px solid $btn-default-border-color;
border-radius: 3px;
}
}
/*原始样式*/
// #needsharebutton-float {
// position: fixed;
// bottom: 38px;
// left: -8px;
// z-index: 9999;
// cursor: pointer;
// .btn {
// //display: initial;
// padding: 0 10px 0 14px
// border: 1px solid $btn-default-border-color;
// border-radius: 4px;
// }
// }
/*新样式*/
#needsharebutton-float {
position: fixed;
bottom: 70px
right: 30px
z-index: 9999;
cursor: pointer;
.btn {
border: 0;
width: 14px
padding: 5px
line-height: 0
height 14px
background: rgba(0,0,0,0)
}
}
路径：..\themes\next\source\lib\needsharebutton\font-embedded.css下的font-embedded.css
/*iconfont */
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1584449909698'); /* IE9 */
src: url('iconfont.eot?t=1584449909698#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1584449909698') format('woff'),
url('iconfont.ttf?t=1584449909698') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1584449909698#iconfont') format('svg'); /* iOS 4.1- */
}
.need-share-button_dropdown [class^="icon-"]:before, .need-share-button_dropdown [class*=" icon-"]:before {
font-family: "iconfont";
font-style: normal;
font-weight: normal;
speak-as: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-douban:before {
content: "\e600";
}
.icon-wechat:before {
content: "\e617";
}
.icon-qq:before {
content: "\e61d";
}
.icon-renren:before {
content: "\e603";
}
.icon-weibo:before {
content: "\e645";
}
.icon-qqzone:before {
content: "\e633";
}
.icon-linkedin:before {
content: "\e73e";
}
