NEXT主题优化分享样式

在本文中我将分享needmoreshare2文章分享的优化

注意:本文中的优化是直接对needmoreshare2底层css进行更改

为什么不选择baidushare,因为百度分享不支持http,我选择了next主题自带的needmoreshare2插件,首先在主题的_config.yml中启用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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中的内容为用户需要显示的分享图标,插件支持的分享有:

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配置中一定要开启floatposition一定要选择middleleft

1.更改整体位置。

找到..\blog\themes\next\source\css\_common\components\third-party\needsharebutton.styl,更改idneedsharebutton-float的内容,建议原始内容注释。最终代码如下:

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#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

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*新样式*/
.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
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
/*旧样式*/
/* .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;
}

通过更改

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
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.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分享的可以跳过这一步)

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,用记事本打开:
打开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 !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添加代码

点击显/隐代码
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 !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

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
/***********************************************
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?title=" +
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?title=" +
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 += "&notes=" + 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

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
/***********************************************
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

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#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

点击显/隐代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*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";
}

本文标题:NEXT主题优化分享样式

文章作者:小哲

发布时间:2020年03月20日 - 08:09

最后更新:2020年03月28日 - 14:04

原始链接: 点击复制原始链接

许可协议: 协议-转载请保留原文链接及作者