在Hexo中给BlueLake主题加入代码复制功能_hexo博客代码块复制功能-CSDN博客

本文链接：https://blog.csdn.net/Cheng2016_8/article/details/145887387

在Hexo中给BlueLake主题加入代码复制功能

由于当前BlueLake主题没有给代码块添加复制按钮遂添加

相对主目录./themes/BlueLake/source/js/下，下载clipboard文件，并创建文件post-code-copy.js
在新建文件中加入如下代码

$(document).ready(function() {
  // 为代码块添加父容器（解决滚动条覆盖问题）
  $('.highlight').wrap('<div class="code-wrapper" style="position:relative"></div>');

  // 插入复制按钮
  var copyHtml = '<button class="btn-copy" data-clipboard-snippet><span>复制</span></button>';
  $('.highlight').prepend(copyHtml);

  // 初始化 clipboard.js
  var clipboard = new ClipboardJS('.btn-copy', {
    target: function(trigger) {
      return trigger.nextElementSibling.querySelector(".code");
    }
  });

  // 处理复制反馈
  clipboard.on('success', function(e) {
    // 取消选择
    e.clearSelection();
    e.trigger.innerHTML = '<span>复制成功</span>';
    setTimeout(function() {
      e.trigger.innerHTML = '<span>复制</span>';
    }, 1000);
  });

  clipboard.on('error', function(e) {
    e.trigger.innerHTML = '<span>复制失败</span>';
    setTimeout(function() {
      e.trigger.innerHTML = '<span>复制</span>';
    }, 1000);
  });
});

将代码引入,找到./themes/BlueLake/layout/_partial/after-footer.ejs文件，在第三行加入

<%- js('/js/clipboard.min.js') %>
<%- js('/js/post-code-copy.js') %>

在这里插入图片描述
4. 最后添加css样式，修改文件/themes/BlueLake/source/css/style.styl末尾添加如下代码


.btn-copy {
   position: absolute;
   top: 10px;
   right: 10px;
   padding: 5px 10px;
   background: #f5f5f5;
   border: 1px solid #ddd;
   border-radius: 3px;
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.2s;
   &:hover {
       opacity: 1;
       background: #fff;
       border: 1px solid #3090e4;
       color: #3090e4;
    }
   i { margin-right: 4px; }
}