hexo+yilia实现代码块复制功能

2020-02-16

字数统计: 551字 | 阅读时长≈ 2分

摘要：对hexo+yilia实现代码块复试功能，但是在代码块超出时存在复制按钮随代码块移动的问题。

1.新建实现复制功能的js

按这样路径themes\yilia\source\js\clipboard_use.js建立clipboard_use.js ，创建如下代码：

/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
/* code */
var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code").before(copyHtml);
    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
}
initCopyCode();
}(window, document);

2.引入js

在themes\yilia\layout\layout.ejs文件的</body>前引入：（作用：页面加载完再执行js）

<!-- 代码块复制功能 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.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.js"></script>  -->
<script type="text/javascript" src="/js/clipboard_use.js"></script>

3.添加样式

修改：themes\yilia\source\main.0cf68a.css，在最后面添加下面代码：

/* 代码块复制按钮 */
 .highlight {
    /* 方便copy代码按钮（btn-copy）的定位 */
    position: relative;
}
.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;
}
.highlight:hover .btn-copy {
    opacity: 1;
}
/* 代码块复制按钮 */