您现在的位置：首页 >> 前端 >> 内容

为Hexo博客的代码片段添加选择全部按钮

时间：2017/6/10 10:34:00 点击：

　　核心提示：Hexo生成的博客中，代码片段是不支持选择全部功能的，若代码片段较长，手动选择非常的不方便。添加的方法如下。在页面模板文件（对于Next主题，模板文件为themes/next/layout/_layo...

Hexo生成的博客中，代码片段是不支持选择全部功能的，若代码片段较长，手动选择非常的不方便。
添加的方法如下。
在页面模板文件（对于Next主题，模板文件为themes/next/layout/_layout.swig）的

节点中添加如下代码。

$(document).ready(function () {
    var SelectText = function(element) {
        var doc = document
            , text = element
            , range, selection
        ;    
        if (doc.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();        
            range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    };

    $(".code").each(function() {
        var code = $(this).get(0);
        var button_html = 
            '

' + '全选' + '

'; var button = $(button_html); $(button).click(function() { SelectText(code); }); $(button).insertBefore(this); }); });