个人网站搭建（Day 6）— Django-markdownx的使用

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。  Markdown简洁的语法，以及方便转换成各种格式的特点使得它饱受好评，并且得到广泛的应用，比如github上的Readme文档便是由markdown编写的。

在个人网站中我们也选择了markdown插件来丰富我们的文本编辑功能，我们就以Message为例子，具体来说明如何使我们的项目支持markdown语法吧。

 

Django-Markdownx配置

我们选择的是django-markdownx插件，配置步骤如下：

 

1.安装Django-markdowx：

 pip install django-markdownx 

 

2.配置相关环境：

1）将markdownx添加到 settings.py 的 INSTALLED_APPS 中：

INSTALLED_APPS = [
    'django.contrib.admin',
    ...

    #third party app
    'markdownx',
]

2）将以下配置添加到 settings.py 中：

# upload folder
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# markdownx options
MARKDOWNX_EDITOR_RESIZABLE = False
MARKDOWNX_MARKDOWN_EXTENSIONS = [
    'markdown.extensions.extra',
    'markdown.extensions.nl2br',
    'markdown.extensions.codehilite',
]
MARKDOWNX_MEDIA_PATH = datetime.now().strftime('markdown/upload/%Y/%m/%d')
MARKDOWNX_UPLOAD_MAX_SIZE = 4 * 1024 * 1024
MARKDOWNX_UPLOAD_CONTENT_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml']
MARKDOWNX_IMAGE_MAX_SIZE = {
    'size': (800, 500),
    'quality': 90
}

3）将 markdownx.url，media_urls 添加到主的 urlpatterns 中

urlpatterns = [
    ...
    path('markdownx/', include('markdownx.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\

4）配置模板标签（重点，模板标签的知识在之后还会使用）

由于我们在其他的app中也要使用这些模板标签，因此我们将模板过滤器的文件放置到 home app 中

在home目录中创建 templatetags文件夹，django会自动检测该文件夹；然后我们在该文件夹中创建一个 base.py并加入以下代码：

from django import template

register = template.Library()

@register.filter(is_safe = True)
def custom_markdown(value):
    return mark_safe(markdown.markdown(value,
                              extensions = ['markdown.extensions.extra',
                                            'markdown.extensions.toc',
                                            'markdown.extensions.sane_lists',
                                            'markdown.extensions.nl2br',
                                            'markdown.extensions.codehilite',],
                              safe_mode = True,
                              enable_attributes = False))

更多模板标签的知识可参考：django 的模板语言template ，自定义过滤器，自定义标签，模板继承

 

3. 修改Message模型：

from markdownx.models import MarkdownxField

class Message(models.Model):
    text = MarkdownxField(max_length=2000)
    date_added = models.DateTimeField(auto_now_add=True)
    ...

    def __str__(self):
        return self.text

 

4.前端相关代码修改：

1）输入部分，主要要注意的是添加 {{ form.media }} 标签：

{% csrf_token %}
  

      Receiver ID
       
      {% bootstrap_form form %}
  
  Send
  Go Back
{{ form.media }}

2）显示部分，使用模板标签显示markdown预览的结果

Content:
{{ message.text | custom_markdown }}

 

使用效果

 

     输入效果

     显示效果

由于django-markdownx插件是从很久之前的Lenote项目中沿用而来，对于一些具体的操作已经不是记得很清楚了，因此可能在某些细节上存在错误，欢迎在评论区中指出，作者会第一时间修改，非常感谢 ^_^