hexo 主题模板改造记录 2
第一篇： hexo主题迁移and折腾记 第二篇：hexo主题模版改造记录 本来在第二篇的时间就打算把剪贴板这件事搞定的，但是一拖拖了好久。 起因 要知道很多 Hexo 模版都提供剪贴板功能，以及备案号展示功能，但是我这模版太早期了，要是用最新版本的那么自己的代码部分又要全部重新弄，我是非常不愿意这么做。那就不如自己来实现了。然后搜了很久以后我看到这么一篇文章：在 Hexo 主題內新增程式碼片段複製功能 这就很好啊，很符合我的要求。于是动工。 思路 如果直接修改模版的话似乎也不是不行，但是那样的话可能会极大降低灵活度，另外我在翻看页面文件的时候也并未发现指定代码框的部分，因此还是直接用 JS 操作 DOM Tree 吧。 如图我们基本可以看到实际上应该一个 highlight 下面俩子节点一个 code 一个 gutter ，这样的话其实如果按照上面链接内文章操作的话是在这段的顶部套一个 DIV 然后插入按钮什么的进去，但是这样似乎对我的这个模板来说不是很友好，所以最后我会选择插入这么个玩意儿： 1 2 3 4 5 6 7 <div id="codeblock-titlebar"> <span id="lang-title" style="font-size: 5px"></span> <button class="codecopy-btn tooltipped tooltipped-sw" aria-label="Copy to clipboard"> <span class="fa fa-copy" aria-hidden="true"></span> click to copy </button> </div> 这样就好多了，也不需要担心顶层按钮后面放不了东西背景空一块出来。 操作 但是其实只要观察过就会知道，整个代码框的部分全部是动态的，也就是说我们无法根据元素进行定位，只能使用 hexo 给定的父级对象操作，然后针对每个对象都如此操作才能在每个代码框中都插入按钮。因此代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var snippets = document....