Hexo next 添加复制粘贴代码的功能
广告:
本人博客地址: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 添加复制粘贴代码的功能的更多相关文章
- Cocos Creator JS web平台复制粘贴代码(亲测可用)
Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...
- 使用vs2010复制粘贴代码时特别卡用一段时间就特别卡重启也没用
vs2010编写代码一段时间后复制粘贴特别卡,下拉条也特别卡,这个状况困扰了我两个月,实在忍不住了,去网上搜了搜 有网友说是快捷键冲突,所以我就把其他程序结束了,结果莫名奇妙的瞬间就不卡了.最终弄明白 ...
- CSDN中的MARKDOWN编辑器如何快速复制粘贴图片?
前言 我们在使用csdn的markdown编辑器复制其它网站图片,按住ctrl+C复制选择图片,然后按ctrl+V粘贴图片到md编辑器无任何反应!markdown编辑器每次都没法复制粘贴截图! 下面小 ...
- VC++6.0/MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能
Ctrl组合键ASCII码 ^Z代表Ctrl+z ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符0(00) ...
- 【转】MFC 自定义edit 限制输入十六进制内容 响应复制粘贴全选剪切的功能
参考地址:MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能 Ctrl组合键ASCII码 ^Z代表Ctrl+z ASCII值 控制字符 AS ...
- vim粘贴代码格式变乱
转自netingcn.com 有时候从编辑器里面复制粘贴代码到vim中,代码格式会完全乱套.其原因是vim开启了smartindent(智能缩减)或autoindent(自动对齐)模式.为了保持代码的 ...
- 仿复制粘贴功能,长按弹出tips的实现
方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
- Java递归实现操作系统文件的复制、粘贴和删除功能
通过Java IO递归实现操作系统对文件的复制.粘贴和删除功能,剪切=复制+粘贴+删除 代码示例: import java.io.BufferedInputStream; import java.io ...
随机推荐
- SercletConfig 详解
ServletConfig:从一个servlet被实例化后,对任何客户端在任何时候访问有效,但仅对本servlet有效,一个servlet的ServletConfig对象不能被另一个servlet访问 ...
- python字符串常用函数-大小写,删除空格,字符串切片
- 3403. 题解【NOIP2013模拟】数列变换 (Standard IO)
先看题目: Description 小X 看到堆成山的数列作业十分头疼,希望聪明的你来帮帮他.考虑数列A=[A1,A2,...,An],定义变换f(A,k)=[A2,A3,,,,.Ak,A1,Ak+2 ...
- tensorflow队列tf.FIFOQueue | enqueue | enqueue_many | dequeue | dequeue_many
关于队列的相关知识,盗用一张https://blog.csdn.net/HowardWood/article/details/79406891的动态图 import tensorflow as tf ...
- lvm 磁盘扩容
LVM磁盘管理 一.LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘 ...
- IDisposable实现的方法什么时候被执行的
一,以什么是GC所认为的垃圾? 不再被应用程序的root或者别的对象所引用的对象就是已经死亡的对象,即所谓的垃圾,需要被回收 二,在仓储设计中,我们都知道非托管资源的手动释放,但继承的IDisposa ...
- mySQL查看存储过程、函数、视图、触发器
一.查看存储过程 1.show procedure status; //查看所有的 2.show create procedure proc_AllUser[proc_name]; 查看proc_Al ...
- Java 编写过滤手机号码或者固定电话的工具类
以下是分享自己编写的用于过滤手机号码.固定电话.黑名单的工具类TelCheckUtils, import java.util.HashSet; import java.util.Set; import ...
- Mybatis+Springmvc+Spring整合常用的配置文件
1.创建web项目 2.导入mabatis spring springnvc 需要的jar包 3.创建mybatis,spring,springmvc的配置文件 (1)web.xml配置文件 < ...
- php函数练习20191031
<?php$str="what is you name?";$arr=array('i','s');$arr_1=array('s','i');//是先后替换的.echo s ...