发布于 
阅读: - 🔥 访客: -

酷小呵博客的字体是如何设置的呢?

字体设置

很简单,在 _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";

// 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>
`;
});


本站使用主题: Stellar

本”页面“访问 次 | 👀总访问 次 | 🥷总访客

萌备 萌ICP备20230928号

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;

不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。

本站信息来自网络收集整理,版权争议与本站无关。

您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。

本站所发布的全部内容源于互联网搬运,

仅限于小范围内传播学习和文献参考,请在下载后24小时内删除.

如果有侵权之处请第一时间联系我们删除。敬请谅解!