hexo博客yilia主题添加复制代码块功能

博客中的复制代码块功能还是挺实用的，本文参考自这个博客，感谢并膜拜这位大佬，该博客应该是yilia主题添加复制代码块功能的首创，详细记录了整个过程，看起来比较繁琐（无贬义），所以我单独整理一份最终版

在themes\yilia\source中新建js文件夹，在该文件夹中新建clipboard_use.js如下：

$(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) {/* code */var initCopyCode = function () {var copyHtml = '';copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';copyHtml += '  <i class="fa fa-clipboard"></i><span>复制</span>';copyHtml += '</button>';$(".highlight .code").before(copyHtml);var clipboard = new ClipboardJS('.btn-copy', {target: function (trigger) {return trigger.nextElementSibling;}});clipboard.on('success', function (e) {e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"setTimeout(function () {e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"}, 1000)e.clearSelection();});clipboard.on('error', function (e) {e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"setTimeout(function () {e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"}, 1000)e.clearSelection();});}initCopyCode();
}(window, document);

在themes\yilia\layout\layout.ejs 文件的结尾处 </body> （注意这个是body的结束标签）前插入如下代码：

<!-- 代码块复制功能开始 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/clipboard_use.js"></script>
<!-- 代码块复制功能结束 -->

在themes\yilia\source\main.0cf68a.css 最末尾添加如下代码：

.btn-copy {display: inline-block;position: absolute;right: 5px;top: 5px;cursor: pointer;background-color: #515151;border: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-appearance: none;font-size: 13px;font-weight: 700;line-height: 20px;color: #d5d5d5;-webkit-transition: opacity .3s ease-in-out;-o-transition: opacity .3s ease-in-out;transition: opacity .3s ease-in-out;padding: 2px 6px;
}.btn-copy span {margin-left: 5px
}.code-wrapper .btn-copy:hover {color: #fff;
}

结果展示如图：

hexo博客yilia主题添加复制代码块功能相关推荐

Hexo博客yilia主题添加Gitment评论系统
gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址实现方便,只要简单的配置没有广告,这个很重要注册OAuth ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
为Hexo博客next主题添加友链
为Hexo博客next主题添加友链 20230427153826|left
hexo博客 Maupassant主题添加萌妹纸、萌宠
给hexo博客养一个萌妹子或者萌宠,也是偶然之间发现可以添加可爱的妹纸或者是萌宠,发现挺好玩的,而且作者提供了很多模型供你选择,没事的时候还可以逗一逗 ? 文章目录本博文的简述or解决问题? 获取 ...
hexo博客next主题添加对数学公式的支持
hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...
hexo博客fluid主题添加aplayer组件
aplayer是一个非常漂亮好用的HTML5音乐播放器,和dplayer师出同门.我用的主题是fluid,记录一下添加音乐插件的过程. 我的HEXO博客安装aplayer npm和github两种方 ...
Hexo博客yilia主题文章添加目录
参考文章添加目录的文章有一些是自己添加css文件和修主题配置作者也更新了文章大体目录的功能打开配置文件themes/yilia/_config.yml 你可以选择toc设置为1 或者2 toc: ...

hexo博客yilia主题添加复制代码块功能

hexo博客yilia主题添加复制代码块功能相关推荐

最新文章

热门文章