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

原文地址
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 = 
            '
'right: 3%;' + 'margin-top: 5px;' + 'font-family: consolas, Menlo, \'PingFang SC\', \'Microsoft YaHei\', monospace;' + 'font-size: 10px;' + 'cursor: pointer;' + 'color: #e31436;' + '">' + '全选' + '
'
; var button = $(button_html); $(button).click(function() { SelectText(code); }); $(button).insertBefore(this); }); });

文章地址

你可能感兴趣的:(技巧)