前言

可以先滚动到文章版权模块下的分享按钮处,点击按钮查看具体效果,有兴趣的话再继续观看教程

因为我觉得原先的分享按钮很鸡肋,比如 QQ,微信的分享按钮,点击之后是跳转到一个二维码页面,然后再打开 QQ,微信去扫描才能完成分享。。。而不是点击分享跳转到 QQ,微信软件直接分享给他人。所以便有了这篇文章,给你的文章新增一个分享按钮,点击直接复制当前文章地址(虽然直接在网页的地址栏直接复制也可以,但这个按钮个人感觉还是比传统的分享按钮更实用一点。

操作步骤

其中的代码改动只显示文件中部分代码,注意好缩进再修改!

  1. 打开Blog\themes\butterfly\layout\includes\third-party\share\index.pug文件
  2. 改动如下,自行添加 diff 块改变的内容即可
1
2
3
4
5
6
7
8
9
.post_share
+ .copybtn(title='复制链接')
+ i.fas.fa-link
if theme.addThis.enable
!=partial('includes/third-party/share/add-this', {}, {cache: true})
else if theme.sharejs.enable
include ./share-js.pug
else if theme.addtoany.enable
!=partial('includes/third-party/share/addtoany', {}, {cache: true})
  1. inject 引入相关 js 文件
1
2
3
4
5
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
- <script defer src="https://fastly.jsdelivr.net/gh/Gahotx/cdn@master/js/clipboard.min.js"></script>
  1. inject 引入的 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
/* copybtn */
.copybtn {
position: relative;
color: #56b6e7;
border: 1px solid;
border-color: #56b6e7;
border-radius: 50%;
width: 1.85em;
height: 1.85em;
line-height: 1em;
text-align: center;
top: 28px;
left: -32px;
cursor: pointer;
transition: background 0.6s ease-out 0s;
}
.copybtn i.fas.fa-link {
margin-top: 6px;
}
.copybtn:hover {
background: #56b6e7;
color: #fff;
}
#post .tag_share .post_share {
margin: -19px -3px;
}

插件地址