酷小呵博客的字体是如何设置的呢？
字体设置
很简单，在 _config.yml中引入：
1
2
3
| inject:
head:
- <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="all" />
|
然后在_config.stellar.yml中引入：(更改相应内容即可)
1
2
3
4
| style:
font-family:
logo: '"LXGW WenKai Screen", ...
body: '"LXGW WenKai Screen", ...
|
stellar主题添加代码块复制功能
给 stellar 主题添加代码块复制功能
我们可以利用 hexo 的注入器来完成这个功能
项目根目录下新建一个 scripts 文件夹，添加 codeCopy.js 文件（文件名可以随意取）。添加如下代码
创建的 scripts 文件夹中的文件会被 hexo 自动加载
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
| "use strict";
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>
`;
});
|
