Django-mdeditor引入及设置
下载django-mdeditor
pip install django-mdeditor # 用于后台编辑
pip install markdown # 用于前端显示
后台编辑
这部分用django-mdeditor
来实现
在项目 settings.py
的 INSTALLED_APPS
中添加 ’mdeditor’
# 项目配置内添加App
INSTALLED_APPS = [
[......]
'mdeditor', # Markdown 编辑器
]
# 添加图片保存路径到 settings.py 中
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = "/media/"
添加设置到你的 url.py
中
from django.conf.urls.static import static
from django.conf import settings
# 添加url
urlpatterns = [
[.......]
path('mdeditor/', include('mdeditor.urls')),
]
if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
在models.py
中修改你需要Markdown的关键词
from mdeditor.fields import MDTextField
class Article(models.Model):
# 文章正文
content = MDTextField() #修改这个类型,把content用于Markdown
在不修改models.py
中arkdown的关键词,在admin里面添加
from markdownx.widgets import AdminMarkdownxWidget
formfield_overrides = {
models.TextField: {'widget': MDEditorWidget}
}
在Blog/admin.py
中注册,就是把这个功能,放到admin
里面
from django.contrib import admin
from django.db import models
class ArticleAdmin(admin.ModelAdmin):
actions = [show_username,]
# 显示哪些字段
fields = [('title','author'),('img','visited'),'abstract','content']
# 不显示哪些字段
# exclude = ['title','author']
list_display=['title','author','visited','created_at','modified_at']
search_fields = list_display
list_filter = list_display
admin.site.register(Article,ArticleAdmin)
前端显示
pip install markdown
将 Markdown
格式的文本渲染成 HTML
文本非常简单,只需调用这个库的 markdown 方法即可。
我们书写的博客文章内容存在 ArticleAdmin
的 content
属性里,回到我们的详情页视图函数,对 ArticleAdmin
的 content
的值做一下渲染,把 Markdown
文本转为 HTML
文本再传递给模板:
def article_detail(request,pk):
single_article = Article.objects.get(pk=pk)
single_article.increase_visted()
single_article.content = markdown.markdown(single_article.content,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
return render(request,"article_detail.html",{"single_article":single_article})
markdown.extensions.extra
:用于标题、表格、引用这些基本转换markdown.extensions.codehilite
:用于语法高亮markdown.extensions.toc
:用于生成目录
替换网页模板
在模板中找到展示博客文章主体的 {{ article.content}} 部分,加上 safe
过滤器,改为{{ article.content|safe }}
代码高亮
要实现代码高亮,我们需要一个样式文件。自己写太艰难了,所以我们用现成的。安装Pygments
Pygments
自带很多好看的高亮格式
在项目的 blog\static\blog\css\highlights\ 目录下应该能看到很多 .css 样式文件,
这些文件是用来提供代码高亮样式的。
选择一个你喜欢的样式文件,在 templates/base.html
引入即可。
比如引入 default.css
样式
{% load static %}
...
...
<link rel="stylesheet" href="{% static 'blog/css/highlights/default.css' %}">
换行
在需要换行的位置,输入<br/>
即可
关于图片上传
我们在admin编辑器中,可以很方便的插入图片
可以直接上传本地图片,但是更推荐直接上传图片链接,加载速度更快
这里推荐一个免费的七牛云云存储服务器,
具体操作可以点这里用Python把图片上传到七牛云
修改图片大小和位置
上传图片的时候,经常因为图片过大,影响电脑端和手机端显示。
上传的时候,在图片格式后面,加上{:width="100%" align=center}
比如:
![图片介绍](http://pxpfco2u1.bkt.clouddn.com/markdown20190921144356.png){:width="100%" align=center}
这里定义了图片的宽度width
是100%
匹配于显示,你也可以设置高度。也可以直接设置大小,比如{:width="900"}
align
表示图片位置,center
表示居中
修改字体和位置
如果你嫌弃默认的Markdown格式不好看,你可以在.css
文件里面进行修改(一劳永逸型)
比如自定义标题字号
.box.post h2 {
font-size: 3.25em;
line-height: 1.25em;
}
.box.post h3 {
font-size: 2.25em;
line-height: 1.25em;
}
或者直接在文章里改(每次自己改)
<font face="微软雅黑" color="red" size="6">字体及字体颜色和大小</font>
<font face="微软雅黑" color="red" size="6">字体及字体颜色和大小</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>