专栏首页赵俊的Java专栏Hexo优化 --- 添加复制功能

Hexo优化 --- 添加复制功能

前言

Hexo Next 主题自带的代码块功能,没有复制功能,很不方便。

经过一番查找后,在主题的 Issues 中找到了解决方案,这里记录下。

下载

需要下载 clipboard.js

提供下载

将下载的文件存到如下目录:(相对目录为工程目录,没有目录则创建)

1

.\themes\next\source\lib\zclip\clipboard.min.js

导入

新建文件 custom.js ,目录如下:(相对目录为工程目录)

1

\themes\next\source\js\src\custom.js

修改 custom.js 为如下内容:

//此函数用于创建复制按钮
function createCopyBtns() {
    var $codeArea = $("figure table");
    //查看页面是否具有代码区域,没有代码块则不创建 复制按钮
    if ($codeArea.length > 0) {
        //复制成功后将要干的事情
        function changeToSuccess(item) {
             $imgOK = $("#copyBtn").find("#imgSuccess");
                if ($imgOK.css("display") == "none") {
                    $imgOK.css({
                        opacity: 0,
                        display: "block"
                    });
                    $imgOK.animate({
                        opacity: 1
                    }, 1000);
                    setTimeout(function() {
                        $imgOK.animate({
                            opacity: 0
                        }, 2000);
                    }, 2000);
                    setTimeout(function() {
                        $imgOK.css("display", "none");
                    }, 4000);
                };
        };
        //创建 全局复制按钮,仅有一组。包含:复制按钮,复制成功响应按钮
        //值得注意的是:1.按钮默认隐藏,2.位置使用绝对位置 position: absolute; (position: fixed 也可以,需要修改代码)
        $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
        //创建 复制 插件,绑定单机时间到 指定元素,支持JQuery
        var clipboard = new Clipboard('#copyBtn', {
            target: function() {
                //返回需要复制的元素内容
                return document.querySelector("[copyFlag]");
            },
            isSupported: function() {
                //支持复制内容
                return document.querySelector("[copyFlag]");
            }
        });
        //复制成功事件绑定
        clipboard.on('success',
            function(e) {
                //清除内容被选择状态
                e.clearSelection();
                changeToSuccess(e);
            });
        //复制失败绑定事件
        clipboard.on('error',
            function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        //鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
        $("#copyBtn").hover(
            function() {
                $(this).stop();
                $(this).css("opacity", 1);
            },
            function() {
                $(this).animate({
                    opacity: 0
                }, 2000);
            }
        );
    }
}
//感应鼠标是否在代码区
$("figure").hover(
    function() {
        //-------鼠标活动在代码块内
        //移除之前含有复制标志代码块的 copyFlag
        $("[copyFlag]").removeAttr("copyFlag");
        //在新的(当前鼠标所在代码区)代码块插入标志:copyFlag
        $(this).find(".code").attr("copyFlag", 1);
        //获取复制按钮
        $copyBtn = $("#copyBtn");
        if ($copyBtn.lenght != 0) {
            //获取到按钮的前提下进行一下操作
            //停止按钮动画效果
            //设置为 显示状态
            //修改 复制按钮 位置到 当前代码块开始部位
            //设置代码块 左侧位置
            $copyBtn.stop();
            $copyBtn.css("opacity", 0.8);
            $copyBtn.css("display", "block");
            $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
            $copyBtn.css("left", -$copyBtn.width() - 3);
        }
    },
    function() {
        //-------鼠标离开代码块
        //设置复制按钮可见度 2秒内到 0
        $("#copyBtn").animate({
            opacity: 0
        }, 2000);
    }
);
//页面载入完成后,创建复制按钮
$(document).ready(function() {
  createCopyBtns();
});

配置

新建文件 custom.swig ,目录:.\themes\next\layout\_custom\custom.swig(相对目录为工程目录)

<script type="text/javascript" src="/lib/zclip/clipboard.min.js"></script>	
<script type="text/javascript" src="/js/src/custom.js"></script>

修改文件 _layout.swig ,目录:\themes\next\layout\_layout.swig(相对目录为工程目录)

<!doctype html>
...
<html class="{{ html_class | lower }}" lang="{{ config.language }}">
<head>
  ...
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
    ...
    ...
    {% include '_third-party/mathjax.swig' %}
    {% include '_third-party/scroll-cookie.swig' %}
    {% include '_third-party/exturl.swig' %}

    {% include '_custom/custom.swig' %}
</body>
</html>

向文件中 </body> 前一行插入文件引用,如第 15 行效果。

1

{% include '_custom/custom.swig' %}


本文参考 Issues #1684 代码块增加复制功能

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • LeetCode 1008 Construct Binary Search Tree from Preorder Traversal

    一份执着✘
  • 二叉树的最大深度

    一份执着✘
  • Shiro认证

    认证在 Shiro 中被称为 Authentication,用来验证用户是不是拥有相应的身份,也可以理解为登陆时校验登陆凭证的过程。

    一份执着✘
  • h5ai服务器目录

    在前几天,我帮人安装h5ai这个东西,结果直接踩坑,装了一个下午,打算自己也装一个,顺便写一下教程 最终效果演示:

    huanhao
  • C++核心准则C.80:如果明确希望使用默认语义,使用=default

    C.80: Use =default if you have to be explicit about using the default semantics

    面向对象思考
  • JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性。

    document.evaluate()就是通过xpath获取dom节点。 返回的结果通过.iterateNext()可以获得dom对象,每次调用会少一个,当没...

    小蓝枣
  • 浅谈运维工具体系

    运维行业正在变革,推荐阅读:30万年薪Linux运维工程师成长魔法 运维流程管理工具 发布变更流程管理工具:做为系统接口与其他角色的工作衔接。并提供审批环节控制...

    小小科
  • Java窗体应用之聊天室

    一个非常适合Java初学者学习的聊天室,个人感觉还不错,就分享出来吧!如果有需要的话就在下方留言邮箱,看到的话第一时间会发给大家!不喜勿喷。

    cherishspring
  • 由一道面试题来了解进程间的通信

    周末面试碰到一个面试题,题目是: 在MMO游戏中,服务器采用Linux操作系统,网络通信与游戏逻辑处理进程一般是分离的。 例如:GameSvr进程处理游戏逻辑,...

    hbbliyong
  • 编程小白 | 每日一练(94)

    这道理放在编程上也一并受用。在编程方面有着天赋异禀的人毕竟是少数,我们大多数人想要从编程小白进阶到高手,需要经历的是日积月累的学习,那么如何学习呢?当然是每天都...

    闫小林

扫码关注云+社区

领取腾讯云代金券