[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"content:\u002Fposts\u002F2023\u002Fstellar-theme-code-copy":3,"surround:\u002Fposts\u002F2023\u002Fstellar-theme-code-copy":91},{"id":4,"title":5,"body":6,"canonical":65,"categories":66,"date":68,"description":65,"draft":69,"extension":70,"image":65,"meta":71,"navigation":76,"path":77,"permalink":65,"readingTime":78,"recommend":65,"references":65,"seo":83,"sitemap":84,"stem":87,"tags":88,"type":65,"updated":68,"__hash__":90},"content\u002Fposts\u002F2023\u002Fstellar-theme-code-copy.md","stellar主题添加代码块复制功能",{"type":7,"value":8,"toc":62},"minimark",[9,13,20,31,43,52],[10,11,12],"p",{},"给 stellar 主题添加代码块复制功能",[10,14,15],{},[16,17],"img",{"alt":18,"src":19},"","https:\u002F\u002Fwhbbit-blog.oss-cn-beijing.aliyuncs.com\u002F202301311342006.png",[10,21,22,23,30],{},"我们可以利用 hexo 的",[24,25,29],"a",{"href":26,"rel":27},"https:\u002F\u002Fhexo.io\u002Fzh-cn\u002Fapi\u002Finjector",[28],"nofollow","注入器","来完成这个功能",[10,32,33,34,38,39,42],{},"项目根目录下新建一个 ",[35,36,37],"code",{"code":37},"scripts"," 文件，添加",[35,40,41],{"code":41},"codeCopy.js","文件（文件名可以随意取）。添加如下代码",[44,45,46],"blockquote",{},[10,47,48,49,51],{},"创建的 ",[35,50,37],{"code":37}," 文件夹中的文件会被 hexo 自动加载",[53,54,60],"pre",{"className":55,"code":57,"language":58,"meta":59},[56],"language-js","\"use strict\"\n\n\u002F\u002F code block copy\nhexo.extend.injector.register(\"body_end\", function () {\n    return `\n  \u003Cstyle>\n    .highlight {\n      position: relative;\n    }\n    .highlight .code .copy-btn{\n      position: absolute;\n      top: 0;\n      right: 0;\n      padding: 4px 0.5rem;\n      opacity: 0.25;\n      font-weight: 700;\n      color: var(--theme);\n      cursor: pointer;\n      transination: opacity 0.3s;\n    }\n    .highlight .code .copy-btn:hover{\n      color: var(--text-code);\n      opacity: 0.75;\n    }\n    .highlight .code .copy-btn.success {\n      color: var(--swiper-theme-color);\n      opacity: 0.75;\n\n    }\n\n  \u003C\u002Fstyle>\n  \u003Cscript>\n    const codeElementArr = document.querySelectorAll('.code')\n    codeElementArr.forEach(code => {\n      const codeBeforeWidth = window.getComputedStyle(code, '::before').width.split('px')[0]\n      const codeBeforePadding = window.getComputedStyle(code, '::before').padding.split(' ').pop().split('px')[0]\n\n      \u002F\u002F copy btn\n      const codeCopyBtn = document.createElement('div')\n      codeCopyBtn.classList.add('copy-btn')\n      codeCopyBtn.style.right = Number(codeBeforeWidth) + Number(codeBeforePadding) * 2 + 'px'\n      codeCopyBtn.innerText = '复制代码'\n      code.appendChild(codeCopyBtn)\n\n      codeCopyBtn.addEventListener('click', async () => {\n        const currentCodeElement = code.children[0]?.innerText\n        await copyCode(currentCodeElement)\n\n        codeCopyBtn.innerText = '复制成功'\n        codeCopyBtn.classList.add('success')\n\n        setTimeout(() => {\n          codeCopyBtn.innerText = '复制代码'\n          codeCopyBtn.classList.remove('success')\n        },1000)\n      })\n    })\n\n    async function copyCode(currentCode) {\n      console.log(currentCode)\n      console.log('复制代码')\n      if (navigator.clipboard) {\n        try {\n          await navigator.clipboard.writeText(currentCode)\n        } catch (error) {\n          \u002F\u002F 未获得用户许可\n          console.error(error)\n        }\n      } else {\n        console.error('当前浏览器不支持此api')\n      }\n    }\n  \u003C\u002Fscript>\n  `\n})\n","js","\u002Fscripts\u002FcodeCopy.js",[35,61,57],{"__ignoreMap":18},{"title":18,"searchDepth":63,"depth":63,"links":64},4,[],null,[67],"代码","2023-01-31 13:07:10",false,"md",{"excerpt":72},{"type":7,"value":73},[74],[10,75,12],{},true,"\u002Fposts\u002F2023\u002Fstellar-theme-code-copy",{"text":79,"minutes":80,"time":81,"words":82},"2 min read",1.325,79500,265,{"title":5,"description":65},{"loc":77,"images":85},[86],{"loc":19},"posts\u002F2023\u002Fstellar-theme-code-copy",[89],"hexo","Gp6ddNzYcdVE_W0A1VVoxRj4YwKymacc1-pBopYEqS0",[92,97],{"title":93,"path":94,"stem":95,"date":96,"type":65,"children":-1},"使用Hexo Stellar 主题搭建一个独立博客站点","\u002Fposts\u002F2023\u002Fuse-hexo-stellar-create-a-site","posts\u002F2023\u002Fuse-Hexo-Stellar-create-a-site","2023-01-31 00:48:42",{"title":98,"path":99,"stem":100,"date":101,"type":65,"children":-1},"vue3自动引入图标","\u002Fposts\u002F2023\u002Fvue3-auto-import-icon","posts\u002F2023\u002Fvue3-auto-import-icon","2023-02-05 12:27:31",1789642594916]