欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在Django的模板中自定义过滤器,使用markdown语法展示个人博客中的内容

程序员文章站 2022-05-23 07:54:41
...
  1. 安装markdown
pip install markdown
  1. 在子应用下面建一个templatetags包,在包里创建一个后面要在HTML文件引用的py文件,在py文件中,先导入from django import template (关于相关配置在可以参考我的另一篇文章
  2. 在templatetags创建一个py文件,在文件自定义过滤器
from django.template.defaultfilters import stringfilter
from markdown.extensions.toc import TocExtension
from django.utils.safestring import mark_safe
from django.utils.text import slugify
register = template .Library()


# 马克飞象渲染文档  自定义过滤器
@register.filter(is_safe=True)
@stringfilter
def markdown_content(content):
    md = markdown.Markdown(extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite', # 表示的是代码高亮
        TocExtension(slugify=slugify),
    ])
    md_content = md.convert(content)
    md_content = md_content.replace('<table>', '<table class="table table-bordered">')
    return mark_safe(md_content)
  1. 在模板中使用
<!-- 1.首先要导入自定义标签库 tags,即在templatetags目录先创建的目录 -->
{% load tags%}

{% block personage %}

<div class="row" style="background-color: #dddddd">
    <div class="col-md-12">
        <div class="widget">
            <!-- 2. 在合适的地方使用 tags.py 文件中自定义的过滤器 -->
            
            <h4>{{ article.title|markdown_content }}</h4>

            <div class="row" style="padding-top: 20px;padding-bottom: 20px;">
                <div class="col-md-6 text-left">
                    <a class="blog-btn" href=""><span class="glyphicon glyphicon-comment"></span> 发表评论</a>
                </div>
                <div class="col-md-6 text-right">
                    <p class="blog-tag"><span class="glyphicon glyphicon-eye-open"></span> {{ article.views }}</p>
                </div>
            </div>
{% endblock %}

代码高亮

要想使得文章中的代码可以高亮显示,除了上面在自定义过滤器的时候使用了markdown.extensions.codehilite
还需要安装 Pygments 模块。安装方式也非常简单

pip install pygments
如果安装不了可以去Bitbucket 下载他的源码才能完成安装。下载下来解压执行:
python setup.py install
安装完成后要是想要实现代码高亮需要css样式进行驱动,pygments默认是不带样式的。不过你可以借助pygmentize -S default -f html > default.css命令让它生成一个默认的css

(blog_django_2.2_py3) C:\Users\Shinelon\Desktop\my_django_blog> pygmentize -S default -f html > default.css

把default.css放到项目中静态文件中去,然后在HTML文档中引入他

<link rel="stylesheet" href="../static/css/default.css">

此时就能看到高亮代码了。如果你不喜欢这个样式的话,pygments-css提供了很多样式供你选择
在Django的模板中自定义过滤器,使用markdown语法展示个人博客中的内容