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

最新推荐文章于 2024-04-13 17:26:03 发布

雨过_天晴

最新推荐文章于 2024-04-13 17:26:03 发布

阅读量2.6k

点赞数

分类专栏：技巧文章标签： Hexo

本文链接：https://blog.csdn.net/u010513059/article/details/72891631

版权

技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

$(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 = 
            '<div style="position: fixed;'                                                               +
                        'right: 3%;'                                                                     +
                        'margin-top: 5px;'                                                               +
                        'font-family: consolas, Menlo, \'PingFang SC\', \'Microsoft YaHei\', monospace;' +
                        'font-size: 10px;'                                                               +
                        'cursor: pointer;'                                                               +
                        'color: #e31436;'                                                                +
                        '">'                                                                             +
            '<span>全选</span>'                                                                          +
            '</div>';
        var button = $(button_html);

        $(button).click(function() {
            SelectText(code);
        });
        $(button).insertBefore(this);
    });
});