站内搜索:
首页 >> 前端 >> 内容
为Hexo博客的代码片段添加选择全部按钮

时间:2017/6/10 10:34:00

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); }); });

  • 上一篇:html开发中关于清除浮动的几种方法及注意事项
  • 下一篇:css入门
  • 返回顶部