给hexo主题添加代码块复制功能

文章目录

1. 创建clipboard_use.js
2. 添加CSS
3. 引入font-awesome
4. 引用其他js
5. 部署

适用于所有的Hexo主题

创建clipboard_use.js

在themes/xxx/source/js 目录下，创建clipboard_use.js，添加内容如下

$(".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); */

        $(".code-wrapper .highlight table").before(copyHtml);
        var clipboard = new ClipboardJS('.btn-copy', {
            target: function (trigger) {
                var tablee = trigger.nextElementSibling;
               <!--  return trigger.nextElementSibling; -->
                return tablee.firstElementChild.firstElementChild.firstElementChild.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);

添加CSS

在theme/xxx/source/css/style.css样式中添加如下代码：

/* 代码块复制按钮 */
.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;
}

引入font-awesome

按钮上面添加了一个小图标美化，需要引入font-awesome.
在themes\xxx\layout\_partial\head.ejs或themes\xxx\layout\_common\head.ejs中的</head>之前添加

1	<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

引用其他js

在themes\xxx\layout\layout.ejs文件中的</body>标签前也就是body标签之间的最后加入如下代码,这里是将clipboard.min.js和clipboard-use.js保存到CDN上，通过远程引用或者将他们直接下载到本地直接引用也可

<!-- 代码块复制功能 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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提交就行啦

hexo g -d

参考资料

为Hexo主题增加代码块复制功能