hexo+yilia添加複製代碼塊的功能

---

實現複製代碼塊的功能，效果：

我的提問

我在hexo-theme-yilia-plus主題上的提問：https://github.com/JoeyBling/hexo-theme-yilia-plus/issues/29

初級版

支持複製代碼塊的功能，如下圖（截自csdn）：

個人覺得這個功能還是挺重要的。

加強版

如果文章中有原創版權聲明，複製時，會攜帶相關信息。

🙋Others

我自己也去查了下，找到的好像都是next主題的，沒有yilia主題的，但是不太會轉化……

參考鏈接：

• 工具：clipboard.js：https://github.com/zenorocha/clipboard.js，中文網：http://www.clipboardjs.cn/
• Hexo NexT 代碼塊複製功能:https://www.jianshu.com/p/3e9d614c1e77
• hexo-next 添加代碼塊複製功能：https://www.zhyong.cn/posts/ca02/
• Hexo–第二彈(包含複製代碼塊，和版權聲明)：https://www.jianshu.com/p/4d0020bde612

---

自己動手

因爲回覆比較慢，就自己動手去嘗試了。

參考：[clipboard.js]代碼塊複製

該文章也是基於next主題，遷移過來有些問題：

1. next主題可能自帶jQuery，故沒有引入，但是yilia沒有，需要引入。
2. 會報錯ClipboardJS is not defined，我這裏直接改成了Clipboard就可以了，後面找到原因了：是版本問題，https://github.com/zenorocha/clipboard.js/releases/v2.0.0，v2.0.0的變化：Changes constructor from new Clipboard() to new ClipboardJS() #468。相關問題：
   • Clipboard not defined
   • clipboard複製剪貼板功能，以及用requirejs時報錯—Uncaught ReferenceError: Clipboard is not defined

0.原理

在頁面加載完畢後，使用js動態地爲每一個代碼塊添加一個按鈕，使用這個按鈕複製代碼塊內容。

1.新建實現複製功能的js

H:\Hexo\themes\yilia\source\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

在H:\Hexo\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>

需要注意的問題：

• 前面提到：因爲：clipboard_use.js中需要用到jQuery，而yilia沒有引入jQuery，故需要引入。
• 對於clipboard.js的引入問題：根據github社區反饋，引入本地文件好像會出現問題（我本地測試就引入不了），故使用CDN引入。（有人反映CDN好像也會有問題，反正我沒有遇到……）
• 注意引入順序：jquery和clipboard.js需要在clipboard_use.js之前引入。
• <script>標籤問題，雖然HTML5標準裏面沒有嚴格要求標籤一定要關閉，但是建議要關閉，不然可能會出現問題。這裏我一開始沒有關閉標籤，就出現問題了，後面研究了很久才發現原來是這個問題。

3.添加樣式

修改：H:\Hexo\themes\yilia\source\main.0cf68a.css，在末尾添加下面代碼（最好是pre .css~* .id, pre .id下面，即代碼塊樣式附近）

/*  這是原代碼塊 */
pre .css~* .id, pre .id {
    color:#fd971f
}

/* 代碼塊複製按鈕 */
 .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;
}
/* 代碼塊複製按鈕 */

成果

點擊按鈕後，會全選代碼塊，就複製成功了。
效果圖：

動圖：

問題討論

乍一看效果還不錯，但是還是存在問題：

1. 如果代碼塊超出，會出現問題。雖然圖標樣式使用絕對定位，但是該按鈕沒有“固定”在代碼塊頁面的右上角，僅僅是固定在當前頁面的右上角，可能不好理解，截個圖：
   
   然後我去研究了下CSDN的樣式，發現好像差不多，但是效果明顯不一樣啊。後面有空再研究吧。
2. 雖然複製成功會全選代碼塊，但是不成功呢？不曉得？好像沒反應。後期可能會添加對應設置（模仿CSDN）：默認時“複製”，複製成功顯示“複製成功”，幾秒後再次顯示“複製”，失敗給出對應提示。

依賴升級

使用最新版本的clipboard.js–v2.0.4，CDN：https://cdn.jsdelivr.net/npm/[email protected]/dist/，替換之前的，需要修改的地方：

1.改變引入源

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.js"></script>

2.改變函數名

Clipboard to ClipboardJS

    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

改爲：

    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

---

文章首發於：hexo+yilia添加複製代碼塊的功能