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 ...
随机推荐
- sdb报告-10 错误问题定位
# sdb报告-10 错误问题定位在sdb 的集群环境中,如果面对的是一个高并发的操作场景,有时候会莫名其妙地报告 -10 错误. 在 sdb 的错误列表中,-10 错误代表:系统错误. 这是一个笼统 ...
- 如何在Oracle中建表空间、建用户并导入dmp文件详解
假设oracle有个全新的数据库orcl,现在要把数据库文件(.dmp)导入这个全新的数据库orcl中.详细步骤如下: 1. 创建表空间 例如: create tablespace test ...
- 【读书笔记】:MIT线性代数(2):Vector Spaces and Subspaces
Vector Space: R1, R2, R3,R4 , .... Each space Rn consists of a whole collection of vectors. R5 conta ...
- C# 笔记 获取程序当前目录
在C#中,我们有以下几种方式获取程序当前目录: Console.WriteLine(System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssem ...
- maven上传源码脚本
mvn deploy:deploy-file -Dmaven.test.skip=true -Dfile=./target/bbc-common-1.0.0-source.jar -DgroupId= ...
- Windows IIS PHP7 连接 SQLServer 2012
下载 php7 对 SQL Server 的扩展 https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载后 安装到一个 目录 ...
- WPF绑定のRelativeSource
在WPF绑定的时候,指定绑定源时,有一种办法是使用RelativeSource. 这种办法的意思是指当前元素和绑定源的位置关系. 第一种关系: Self 举一个最简单的例子:在一个StackPanel ...
- activiti 流程部署的各种方式
流程资源可以是各种类型的文件,在启动流程或流程实例运行过程中会被读取.下面介绍常用的流程资源. 一.流程资源 流程定义文件:扩展名为bpmn20.xml和bpmn; 流程定义的图片:用BPMN2.0规 ...
- C# 交集 差集 并集
Intersect 交集,Except 差集,Union 并集 , , , , }; , , , , , }; var jiaoJi = oldArray.Intersect(newArray).To ...
- 你(可能)不知道的 web api
转自奇舞周刊 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用 ...