给 stellar 主题添加代码块复制功能

我们可以利用 hexo 的注入器来完成这个功能

项目根目录下新建一个 scripts 文件,添加codeCopy.js文件(文件名可以随意取)。添加如下代码

创建的 scripts 文件夹中的文件会被 hexo 自动加载

/scripts/codeCopy.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
"use strict"

// code block copy
hexo.extend.injector.register("body_end", function () {
return `
<style>
.highlight {
position: relative;
}
.highlight .code .copy-btn{
position: absolute;
top: 0;
right: 0;
padding: 4px 0.5rem;
opacity: 0.25;
font-weight: 700;
color: var(--theme);
cursor: pointer;
transination: opacity 0.3s;
}
.highlight .code .copy-btn:hover{
color: var(--text-code);
opacity: 0.75;
}
.highlight .code .copy-btn.success {
color: var(--swiper-theme-color);
opacity: 0.75;

}

</style>
<script>
const codeElementArr = document.querySelectorAll('.code')
codeElementArr.forEach(code => {
const codeBeforeWidth = window.getComputedStyle(code, '::before').width.split('px')[0]
const codeBeforePadding = window.getComputedStyle(code, '::before').padding.split(' ').pop().split('px')[0]

// copy btn
const codeCopyBtn = document.createElement('div')
codeCopyBtn.classList.add('copy-btn')
codeCopyBtn.style.right = Number(codeBeforeWidth) + Number(codeBeforePadding) * 2 + 'px'
codeCopyBtn.innerText = '复制代码'
code.appendChild(codeCopyBtn)

codeCopyBtn.addEventListener('click', async () => {
const currentCodeElement = code.children[0]?.innerText
await copyCode(currentCodeElement)


codeCopyBtn.innerText = '复制成功'
codeCopyBtn.classList.add('success')

setTimeout(() => {
codeCopyBtn.innerText = '复制代码'
codeCopyBtn.classList.remove('success')
},1000)
})
})

async function copyCode(currentCode) {
console.log(currentCode)
console.log('复制代码')
if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(currentCode)
} catch (error) {
// 未获得用户许可
console.error(error)
}
} else {
console.error('当前浏览器不支持此api')
}
}
</script>
`
})