个人网站搭建(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 }} 标签:
<form action="{% url 'users:send_message' %}" method="POST" class="form">{% csrf_token %}
<div class="form-group">
<label for="receiver_id">Receiver ID</label>
<input type="text" class="form-control" name="receiver_id" id="receiver_id">
{% bootstrap_form form %}
</div>
<button type="submit" class="btn btn-primary">Send</button>
<a class="btn btn-outline-primary" href="javascript:history.go(-1)">Go Back</a>
</form>{{ form.media }}
2)显示部分,使用模板标签显示markdown预览的结果
<h5>Content:</h5>
<div>{{ message.text | custom_markdown }}</div>
使用效果
输入效果
显示效果
由于django-markdownx插件是从很久之前的Lenote项目中沿用而来,对于一些具体的操作已经不是记得很清楚了,因此可能在某些细节上存在错误,欢迎在评论区中指出,作者会第一时间修改,非常感谢 ^_^