10-代码复制

  • 阅读: 172
  • 更新: 2022-05-03

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

1. 添加复制功能

bootstrap 中扣的代码

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

查到这部分代码:

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

修改一下 apps/templates/base.html 文件,添加:

1
2
3
4
<!-- 复制功能 -->
<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 文件:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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.6Pygments==2.11.2
我测试了更新的版本需要遍历的元素就不是 $('div.codehilite') 了,如果你发现你的也不是,要么降低版本,要么修改上述代码

3. 添加样式

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
.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群:778391413

京公网安备 11011302003970号 京ICP备2022012301号-1