Django-mdeditor引⼊及设置
下载django-mdeditor
pip install django-mdeditor  # ⽤于后台编辑
pip install markdown # ⽤于前端显⽰
后台编辑
这部分⽤django-mdeditor来实现
在项⽬ settings.py 的 INSTALLED_APPS 中添加 ’mdeditor’
# 项⽬配置内添加App
INSTALLED_APPS = [
[......]
'mdeditor', # Markdown 编辑器django admin 自定义页面
]
# 添加图⽚保存路径到 settings.py 中
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = "/media/"
添加设置到你的url.py中
f.urls.static import static
f 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⾥⾯
ib 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
ister(Article,ArticleAdmin)
前端显⽰
pip install markdown
将 Markdown 格式的⽂本渲染成 HTML ⽂本⾮常简单，只需调⽤这个库的 markdown ⽅法即可。
我们书写的博客⽂章内容存在 ArticleAdmin 的 content 属性⾥，回到我们的详情页视图函数，对 ArticleAdmin 的 content 的值做⼀下渲染，把 Markdown ⽂本转为 HTML ⽂本再传递给模板：
def article_detail(request,pk):
single_article = (pk=pk)
single_article.increase_visted()
t = markdown.markdown(t,
extensions=[
'a',
'dehilite',
'',
])
return render(request,"article_detail.html",{"single_article":single_article})
<：⽤于⽣成⽬录
替换⽹页模板
在模板中到展⽰博客⽂章主体的 {{ t}} 部分，加上 safe过滤器，改为{{ t|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编辑器中，可以很⽅便的插⼊图⽚
可以直接上传本地图⽚，但是更推荐直接上传图⽚链接，加载速度更快
这⾥推荐⼀个免费的云存储服务器，
具体操作可以点这⾥
修改图⽚⼤⼩和位置
上传图⽚的时候，经常因为图⽚过⼤，影响电脑端和⼿机端显⽰。
上传的时候，在图⽚格式后⾯，加上{: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;
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。