广告:

本人博客地址: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. sdb报告-10 错误问题定位

    # sdb报告-10 错误问题定位在sdb 的集群环境中,如果面对的是一个高并发的操作场景,有时候会莫名其妙地报告 -10 错误. 在 sdb 的错误列表中,-10 错误代表:系统错误. 这是一个笼统 ...

  2. 如何在Oracle中建表空间、建用户并导入dmp文件详解

    假设oracle有个全新的数据库orcl,现在要把数据库文件(.dmp)导入这个全新的数据库orcl中.详细步骤如下:    1. 创建表空间  例如:  create tablespace test ...

  3. 【读书笔记】:MIT线性代数(2):Vector Spaces and Subspaces

    Vector Space: R1, R2, R3,R4 , .... Each space Rn consists of a whole collection of vectors. R5 conta ...

  4. C# 笔记 获取程序当前目录

    在C#中,我们有以下几种方式获取程序当前目录: Console.WriteLine(System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssem ...

  5. maven上传源码脚本

    mvn deploy:deploy-file -Dmaven.test.skip=true -Dfile=./target/bbc-common-1.0.0-source.jar -DgroupId= ...

  6. Windows IIS PHP7 连接 SQLServer 2012

    下载 php7 对 SQL Server 的扩展 https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载后 安装到一个 目录 ...

  7. WPF绑定のRelativeSource

    在WPF绑定的时候,指定绑定源时,有一种办法是使用RelativeSource. 这种办法的意思是指当前元素和绑定源的位置关系. 第一种关系: Self 举一个最简单的例子:在一个StackPanel ...

  8. activiti 流程部署的各种方式

    流程资源可以是各种类型的文件,在启动流程或流程实例运行过程中会被读取.下面介绍常用的流程资源. 一.流程资源 流程定义文件:扩展名为bpmn20.xml和bpmn; 流程定义的图片:用BPMN2.0规 ...

  9. C# 交集 差集 并集

    Intersect 交集,Except 差集,Union 并集 , , , , }; , , , , , }; var jiaoJi = oldArray.Intersect(newArray).To ...

  10. 你(可能)不知道的 web api

    转自奇舞周刊 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用 ...