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)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章