hexo美化

为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 =`
            <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>全选</pan>                                                                          
            </div>`;
        var button = $(button_html);

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

   转载规则


《hexo美化》 lttztt 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
js深入浅出笔记-jrg js深入浅出笔记-jrg
js深入浅出你真的懂函数吗 匿名函数 var fn = function(){ //fn 是匿名函数的引用. console.log('fn') }; var fn2 = fn; fn.name; // fn fn2.name;
2018-10-19
下一篇 
clip-path clip-path
clip-pathclip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path
2018-10-16
  目录