Django个人博客搭建教程---给你的代码块加添加复制按钮

引入js

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

 在页面文章内容下添加

<p>{{ post.body|safe}}</p>
<script>
    var clipboard = new Clipboard('.copybtn');
    clipboard.on('success', function(e) {
        console.log(e)
    });
    clipboard.on('error', function(e) {
        console.log(e);p
});
</script>

我们的文章内容经过markdown渲染生成了一段html，现在我们要在后端把button按钮添加到这一段html中去

通过控制台可以发现，代码渲染的div是

<div class="codehilite">

首先找到有几个代码块，这里在div中加入id，然后使得id和button中data-clipboard-target="#"的保持一致，因为clipboard.js就是通过id找到要复制的代码块的，也可以通过class来找到代码块，举个例子如下：

<div class="codehilite" id="code">
<button id="ecodecopy" class="copybtn" data-clipboard-action="copy" data-clipboard-target="#code">复制</button>

但是通过re模块替换的时候不能把所有的id都设为一样，这样的话只能找到第一个代码块，所以要保证id的值不一样 

所以后端代码如下：

class JiaPost(View):
    def get(self, request, article_id, slug):
        try:
            thisarticle = get_object_or_404(Articles, id=article_id, status='有效')
            if thisarticle.url_slug != slug:
                return render(request, '404.html')
            thisarticle.increase_views()
        except:
            return render(request, '404.html')
        thisarticle.increase_views()
        greats = thisarticle.greats
        category_id = thisarticle.category.id
        category = get_object_or_404(Category, id=category_id)
        thisarticle.body = markdown.markdown(thisarticle.body, extensions=[
            'markdown.extensions.extra',
            'markdown.extensions.codehilite',
            'markdown.extensions.toc',
            # TocExtension(slugify=slugify)
        ])
        n = thisarticle.body.count('<div class="codehilite">', 0, len(thisarticle.body))
        for i in range(n):
            thisarticle.body = re.sub(r'<div class="codehilite">',
                                  '&nbsp;&nbsp;<button id="ecodecopy" style="float: right;z-index:10" class="copybtn" '
                                  'data-clipboard-action="copy" '
                                  'data-clipboard-target="#code{}">复制</button> '
                                  '<div class="codehilite" id="code{}">'.format(i, i), thisarticle.body, 1)
        comment_list = thisarticle.comment_set.all()
        # thisarticle.body = md.convert(thisarticle.body)
        tag_name = thisarticle.tags.values('name')
        tag_name = [item[key] for item in tag_name for key in item]
        tag = (" ".join(tag_name)).split(" ")
        context = {
            "greats": greats,
            'post': thisarticle,
            'category': category,
            'comment_list': comment_list,
            'tag': tag
        }
        return render(request, 'newblog/post.html', context=context)