为什么不选择baidushare
,因为百度分享不支持http
,我选择了next
主题自带的needmoreshare2
插件,首先在主题的_config.yml
中启用:
1 | needmoreshare2: |
启用即可在博客中查看,如果样式满意可以不必修改,原始插件是没有QQ分享的,在配置文件中显示的networks
中的内容为用户需要显示的分享图标,插件支持的分享有:1
2
3
4# 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
的内容,建议原始内容注释。最终代码如下:
1 | #needsharebutton-postbottom { |
修改
..\blog\themes\next\source\lib\needsharebutton\needsharebutton.css
,修改后的代码,注意下列代码更改的是对应的类,没有把全文贴上,全文太长:
need-share-button_dropdown
类
1 | /*新样式*/ |
need-share-button_link
类1 | /*旧样式*/ |
通过更改1
2
3
4
5
6
7.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
中1
2/* Network buttons
***********************************************/
下方对应的为图标颜色,根据对应的标签进行颜色更改。我开启的分享有微博
,豆瓣
,人人
,QQ空间
,Linkedin
,QQ
,微信
,我的样式为:
1 | .need-share-button_wechat:hover { |
在这里我们需要添加QQ分享的图标颜色(如果不需要QQ分享的可以跳过这一步)1
2
3
4
5
6.need-share-button_qq:hover {
color: #008cff;
}
.need-share-button_qq{
color: #7f7f7f;
}
3.更改图标
注:如果不需要QQ分享可跳过这一步
首先在:https://www.iconfont.cn/创建项目
然后挑选图标加入项目中,这里建议你将你需要的所有分享的图标都搜一遍。挑选完成将其添加至项目。
在项目中下载代码:
在下载的代码中找到iconfont.css
,用记事本打开:
删除iconfont.css
中的iconfont
类:
将..\blog\themes\next\source\lib\needsharebutton\font-embedded.css
中的内容只保留:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30.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
文件中,注意类名的命名规则:1
2
3.icon-分享平台:before{
content: "内容";
}
例如:1
2
3.icon-qqzone:before {
content: "\e633";
}
可能下载的代码中的可能会出现大写也可能出现:1
2
3.icon-QQzone-fill:before {
content: "\e633";
}
这种形式,我们严格按照命名规则来即可,其中的分享平台名称以下方为准1
2
3
4# 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
,将其中微信部分进行修改:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17"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的分享事件:1
2
3
4
5
6
7
8
9"qq": function (el) {
var myoptions = getOptions(el);
var url = "https://connect.qq.com/widget/shareqq/index.html?title=" +
encodeURIComponent(myoptions.title) +
"&url=" + encodeURIComponent(myoptions.url) +
"&pics=" + encodeURIComponent(myoptions.image) +
"&desc=" + encodeURIComponent(myoptions.description);
root.popup(url);
},
更改主页快速修改:1
2
3
4
5
6
7
8// 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"
};
更改图标文件:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21// 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
中添加部分样式:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32/*微信图片样式*/
.need-share-button-opened img.need-share-wechat-code-image{
box-shadow: none
border-radius: 0
margin: 0px 0px 20px 45px
border: 2px solid white
}
/*导航栏样式*/
.sidebar-toggle{
background-color: rgba(0,0,0,0)
}
.sidebar-toggle-line{
background: #7f7f7f
}
.page-post-detail .sidebar-toggle-line{
background: #7f7f7f
}
.back-to-top{
background: rgba(0,0,0,0)
color: #7f7f7f
}
.back-to-top:hover{
background: rgba(0,0,0,0)
color: #ffa400
}
#needsharebutton-float .btn{
color: #7f7f7f
}
#needsharebutton-float .btn:hover{
color: #ffa400
}
最终效果如图所示:
6.完整代码
路径:..\themes\next\source\css\_custom\custom.styl
下的custom.styl
添加代码
1 | /*微信图片样式*/ |
路径:..\blog\themes\next\source\lib\needsharebutton\needsharebutton.js
下的needsharsbutton.js
1 | /*********************************************** |
路径:themes\next\source\lib\needsharebutton\needsharebutton.css
下的needsharebutton.css
1 | /*********************************************** |
路径:..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl
下的needsharebutton.styl
1 | #needsharebutton-postbottom { |
路径:..\themes\next\source\lib\needsharebutton\font-embedded.css
下的font-embedded.css
1 | /*iconfont */ |