广告:

本人博客地址:https://mmmmmm.me

源码:https://github.com/dataiyangu/dataiyangu.github.io

一个将csdn文章转为hexo支持的文章格式的小东西:https://github.com/dataiyangu/csdn2hexo

自己的方式

在博客根目录下,输入:

cd themes/next/layout/_third-party/

然后在此文件夹下创建名为copy-code.swig的文件,在此文件中输入以下内容:

  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }

    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>

  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)

        if(result)$(this).text('复制成功')
        else $(this).text('复制失败')

        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('复制')
        }, 300)
      }).append(e)
    })
  </script>

然后返回上一层目录,即layout文件夹下,编辑_layout.swig,如图:



添加

{% include '_third-party/copy-code.swig' %}

注意我加入了pjax,这句话不要放在pjax的container中

另外在自己的pjax文件中加入

//复制js
function copy_code(){
  $('.highlight').each(function (i, e) {
    var $wrap = $('<div>').addClass('highlight-wrap')
    $(e).after($wrap)
    $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
      var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
        return $(e).text()
      }).toArray().join('\n')
      var ta = document.createElement('textarea')
      document.body.appendChild(ta)
      ta.style.position = 'absolute'
      ta.style.top = '0px'
      ta.style.left = '0px'
      ta.value = code
      ta.select()
      ta.focus()
      var result = document.execCommand('copy')
      document.body.removeChild(ta)
      if(result)$(this).text('复制成功')
      else $(this).text('复制失败')

      $(this).blur()
    })).on('mouseleave', function (e) {
      var $b = $(this).find('.copy-btn')
      setTimeout(function () {
        $b.text('复制')
      }, 300)
    }).append(e)
  })
}

感谢

https://qiming.info/about/

这个作者充分的了解了hexo的机制应该,通过配置的方法,我自己不太需要配置,所以做了点小小的改动

Hexo next 添加复制粘贴代码的功能的更多相关文章

  1. Cocos Creator JS web平台复制粘贴代码(亲测可用)

    Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...

  2. 使用vs2010复制粘贴代码时特别卡用一段时间就特别卡重启也没用

    vs2010编写代码一段时间后复制粘贴特别卡,下拉条也特别卡,这个状况困扰了我两个月,实在忍不住了,去网上搜了搜 有网友说是快捷键冲突,所以我就把其他程序结束了,结果莫名奇妙的瞬间就不卡了.最终弄明白 ...

  3. CSDN中的MARKDOWN编辑器如何快速复制粘贴图片?

    前言 我们在使用csdn的markdown编辑器复制其它网站图片,按住ctrl+C复制选择图片,然后按ctrl+V粘贴图片到md编辑器无任何反应!markdown编辑器每次都没法复制粘贴截图! 下面小 ...

  4. VC++6.0/MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能

    Ctrl组合键ASCII码 ^Z代表Ctrl+z                     ASCII值 控制字符  ASCII值 控制字符  ASCII值 控制字符  ASCII值 控制字符0(00) ...

  5. 【转】MFC 自定义edit 限制输入十六进制内容 响应复制粘贴全选剪切的功能

    参考地址:MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能   Ctrl组合键ASCII码 ^Z代表Ctrl+z                     ASCII值 控制字符  AS ...

  6. vim粘贴代码格式变乱

    转自netingcn.com 有时候从编辑器里面复制粘贴代码到vim中,代码格式会完全乱套.其原因是vim开启了smartindent(智能缩减)或autoindent(自动对齐)模式.为了保持代码的 ...

  7. 仿复制粘贴功能,长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  8. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

  9. Java递归实现操作系统文件的复制、粘贴和删除功能

    通过Java IO递归实现操作系统对文件的复制.粘贴和删除功能,剪切=复制+粘贴+删除 代码示例: import java.io.BufferedInputStream; import java.io ...

随机推荐

  1. SercletConfig 详解

    ServletConfig:从一个servlet被实例化后,对任何客户端在任何时候访问有效,但仅对本servlet有效,一个servlet的ServletConfig对象不能被另一个servlet访问 ...

  2. python字符串常用函数-大小写,删除空格,字符串切片

  3. 3403. 题解【NOIP2013模拟】数列变换 (Standard IO)

    先看题目: Description 小X 看到堆成山的数列作业十分头疼,希望聪明的你来帮帮他.考虑数列A=[A1,A2,...,An],定义变换f(A,k)=[A2,A3,,,,.Ak,A1,Ak+2 ...

  4. tensorflow队列tf.FIFOQueue | enqueue | enqueue_many | dequeue | dequeue_many

    关于队列的相关知识,盗用一张https://blog.csdn.net/HowardWood/article/details/79406891的动态图 import tensorflow as tf ...

  5. lvm 磁盘扩容

    LVM磁盘管理 一.LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘 ...

  6. IDisposable实现的方法什么时候被执行的

    一,以什么是GC所认为的垃圾? 不再被应用程序的root或者别的对象所引用的对象就是已经死亡的对象,即所谓的垃圾,需要被回收 二,在仓储设计中,我们都知道非托管资源的手动释放,但继承的IDisposa ...

  7. mySQL查看存储过程、函数、视图、触发器

    一.查看存储过程 1.show procedure status; //查看所有的 2.show create procedure proc_AllUser[proc_name]; 查看proc_Al ...

  8. Java 编写过滤手机号码或者固定电话的工具类

    以下是分享自己编写的用于过滤手机号码.固定电话.黑名单的工具类TelCheckUtils, import java.util.HashSet; import java.util.Set; import ...

  9. Mybatis+Springmvc+Spring整合常用的配置文件

    1.创建web项目 2.导入mabatis spring springnvc 需要的jar包 3.创建mybatis,spring,springmvc的配置文件 (1)web.xml配置文件 < ...

  10. php函数练习20191031

    <?php$str="what is you name?";$arr=array('i','s');$arr_1=array('s','i');//是先后替换的.echo s ...