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

本文主要是介绍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.greatscategory_id = thisarticle.category.idcategory = 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)

 

这篇关于Django个人博客搭建教程---给你的代码块加添加复制按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---