引入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)