Django-mdeditor引入及设置

2024-02-24 18:18:28

# 下载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

在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>

码农公寓