给 stellar 主题添加代码块复制功能
我们可以利用 hexo 的注入器来完成这个功能
项目根目录下新建一个 scripts
文件,添加codeCopy.js
文件(文件名可以随意取)。添加如下代码
创建的 scripts
文件夹中的文件会被 hexo 自动加载
/scripts/codeCopy.js1 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"
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> ` })
|