10-代码复制

阅读: 332
更新: 2022-05-03

为所有代码块添加复制功能
看到 bootstrap 就有，但是没有提供，那就直接扣它代码吧

1. 添加复制功能

从 bootstrap 中扣的代码

F12 查看，找到关键字 clipboard
打开可疑的 js 文件查看关键字
这个 docs.min.js 就很可疑，一搜，没错，就是它
从 js 文件中发现复制功能来自 https://clipboardjs.com/

查到这部分代码：

1	`$('div.highlight').each(function(){ ... })`

修改一下 apps/templates/base.html 文件，添加：

<!-- 复制功能 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/static/js/site.js"></script>

2. 添加复制按钮

咱们需要在所有代码块中右上角添加一个复制按钮
可以看到它是遍历的所有 $('div.highlight') 元素，也就是代码块；
咱的代码块是 $('div.codehilite') 元素，这不巧了吗，几乎一样，修改一下 static/js/site.js 文件：

$(document).ready(function(){
  // 代码复制功能
  $('div.codehilite').each(function(){
    var btnHtml='<div class="bd-clipboard">' +
      '<button type="button" class="btn-clipboard"' +
      ' title="复制到剪切板">复制</button></div>'
    $(this).before(btnHtml)
    $('.btn-clipboard').tooltip().on('mouseleave',function(){
      $(this).tooltip('hide')})
  })
  var clipboard=new ClipboardJS('.btn-clipboard',{
    target:function(trigger){
      return trigger.parentNode.nextElementSibling}
  })
  clipboard.on('success',function(e){
    $(e.trigger).attr('title','复制成功！').tooltip(
      '_fixTitle').tooltip('show').attr(
        'title','复制到剪切板').tooltip('_fixTitle')
    e.clearSelection()})
  clipboard.on('error',function(e){
    var modifierKey=/mac/i.test(navigator.userAgent)?'\u2318':'Ctrl-'
    var fallbackMsg='Press '+modifierKey+'C to copy'
    $(e.trigger).attr(
      'title',fallbackMsg).tooltip('_fixTitle').tooltip('show').attr(
        'title','复制到剪切板').tooltip('_fixTitle')})
});

注：目前发现对 Markdown 的版本有要求： Markdown==3.3.6 和 Pygments==2.11.2
我测试了更新的版本需要遍历的元素就不是 $('div.codehilite') 了，如果你发现你的也不是，要么降低版本，要么修改上述代码

3. 添加样式

照着它的样式修改 static/css/site.css 文件：

.bd-clipboard {
  display: block;
  position: relative;
  float: right;
}
.btn-clipboard {
  position: absolute;
  width: 2.7rem;
  top: 0.45rem;
  right: 0.5rem;
  z-index: 10;
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: 65%;
  color: #007bff;
  background-color: #fff;
  border: 1px solid;
  border-radius: 0.25rem;
}

刷新页面，体验复制功能，完美！

=== 全文完 ===

欢迎加入QQ群：855013471