hexo博客yilia主题下复制代码块功能

转自我的个人博客：hexo博客yilia主题下复制代码块功能

十分感谢 hexo+yilia添加复制代码块的功能 这篇文章给我的基本思路和代码，本文在其代码的基础上进行修改优化，先来看实现效果:

样式一:

样式二:

原理&工具

使用clipboard.js工具，在文章加载完成后在每一个代码块(类名为highlight的figure标签)添加复制代码块按钮，clipboard的具体使用请参考clipboard中文网。

实现步骤

新建实现复制功能的js

步骤

在hexo的根目录下的themes\yilia\source\js中新建clipboard_use.js如下:

注意 : 按钮中的字体图标需引入Font Awesome图标库，详见Font Awesome 中文网

$(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {
    /* code */
    var initCopyCode = function () {
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-clipboard"></i><span>复制</span>';
        copyHtml += '</button>';
        $(".highlight .code").before(copyHtml);
        var clipboard = new ClipboardJS('.btn-copy', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });
        clipboard.on('success', function (e) {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
            setTimeout(function () {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
            }, 1000)
           
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
            setTimeout(function () {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
            }, 1000)
            e.clearSelection();
        });
    }
    initCopyCode();
}(window, document);

代码说明

1. 因为css的"子绝父相"在父元素有滚动条的情况下子元素会跟随父元素滚动，所以使用 hexo+yilia添加复制代码块的功能 的代码会有代码块超出时出现“bug"的情况，解决方案是使用js动态给代码块元素添加父元素(相对定位)作为复制按钮子元素的定位参照父元素，而代码块元素则起到滚动元素的作用。即上文代码中的第一行代码。
2. clipboard提供了复制成功/失败(success/error)后的自定义事件触发，故可以通过这两个方法修改按钮文字，再通过setTimeout()方法在复制1s后再次显示“复制“

引入jQuery和clipboard

在hexo的根目录下的themes\yilia\layout\layout.ejs文件的</body>前引入

<!-- 代码块复制功能 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/clipboard_use.js"></script>

添加样式

修改hexo的根目录下的themes\yilia\source\main.0cf68a.css，在末尾添加下面代码

（最好是pre .css~* .id, pre .id下面，即代码块样式附近）

样式一

.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc, #eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}

.btn-copy span {
    margin-left: 5px
}

.code-wrapper:hover .btn-copy {
    opacity: 1;
}

样式二

.btn-copy {
    display: inline-block;
    position: absolute;
    right: 1px;
    top: -25px;
    cursor: pointer;
    background-color: #515151;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #d5d5d5;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
}

.btn-copy span {
    margin-left: 5px
}

.code-wrapper .btn-copy:hover {
    color: #fff;
}