引入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">',
' <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)