鼠标选取文字自动提示版权信息

本站使用 NexT 主题,本文适用于使用SWIG模板的主题

理论上使用EJS模板的主题将文件后缀改为.ejs,并在layout文件中引用应该也可以用,没试验过仅供参考

在本站随意选取一段文字即可看到效果

步骤如下:

首先在Hexo\themes\next\layout_third-party目录下新建selectionCopyright.swig文件

然后在文件里依次添加如下代码:

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
<style>
#selectionCopyright {
position: absolute;
display: none;
background: rgba(244,67,54,.7);
color: #fff;
border-radius: 6px;
box-shadow: none;
border: none;
font-size: 14px;
}
#selectionCopyright a{
color:#fff;
border-color: #fff;
}
#selectionCopyright::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 8px 6px 0;
border-color: transparent rgba(244,67,54,.7) transparent transparent;
position: absolute;
left: -8px;
top:50%;
transform:translateY(-50%);
}
</style>

Html:

1
<button id="selectionCopyright" disabled="disabled">本文发表于[<a href="http://asifadeaway.com/">AsiFadeAway.com</a>]分享请注明来源!</button>

javascript:

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
<script>
window.onload = function