Yilia主题增加代码复制按钮

2020-04-14

转载字数统计: 817 | 阅读时长: 4分

QQ截图20200414132450

利用clipboard.js为文章的代码块增加复制按钮。

一、引入`font-awesome`图标库（两种方式），本地方式或使用CDN加速的链接。

☆ CDN加速方式

1、获取自己专属的链接

点击获取：http://www.fontawesome.com.cn/get-started/

QQ截图20200524154334

2、邮箱查收自己的专属代码

20200524154556

上述方法经常会因为网络原因出现问题，推荐用下面的方法获得CDN加速的链接

2021-1-24更新

点击访问获取链接：https://www.bootcdn.cn/font-awesome/

3、引入代码

找到themes\yilia\layout\_partial\head.ejs，在html的<head>标签里添加该代码。

☆ 本地下载方式

1、下载文件

font-awesome官网：http://www.fontawesome.com.cn/

20200414133842

2、解压、重命名

下载完成，把解压后得到的文件夹重命名为font-awesome,放到theme\yilia\source\目录下

20200414134145

3、引入CSS

找到themes\yilia\layout\_partial\head.ejs，在html的<head>标签里添加：

1	<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

二、实现复制按钮

1、添加ejs文件

在\themes\yilia\source\目录下新建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" aria-hidden="true"></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-check' aria-hidden=\"true\"></i><span>复制成功</span>"
            setTimeout(function () {
                e.trigger.innerHTML = "<i class='fa fa-clipboard' aria-hidden=\"true\"></i><span>复制</span>"
            }, 1000)
           
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            e.trigger.innerHTML = "<i class='fa fa-times aria-hidden=\"true\"'></i><span>复制失败</span>"
            setTimeout(function () {
                e.trigger.innerHTML = "<i class='fa fa-clipboard' aria-hidden=\"true\"></i><span>复制</span>"
            }, 1000)
            e.clearSelection();
        });
    }
    initCopyCode();
}(window, document);

2、添加样式

在themes\yilia\source\main.0cf68a.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;
}

3、引入`clipboard.js`和`jquery`

找到\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="/clipboard_use.js"></script>

具体效果见本文代码块(鼠标移动到代码块上会显示复制按钮)。原文链接：CSDN博客

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/80f77d40.html
最后更新： 2021年01月24日 16:14:54
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

一、引入font-awesome图标库（两种方式），本地方式或使用CDN加速的链接。