测试环境
python:3.6.0
Anaconda:4.3.0
os:win10
django:2.1.4
参考:https://blog.csdn.net/duke10/article/details/81033686
使用Django搭建的个人博客主页:http://whutlcy.cn/Blog/
Django整合django-mdeditor
1.安装django-mdeditor
pip install django-mdeditor
2.在项目的settings.py的INSTALLED_APPS中添加’mdeditor’
INSTALLED_APPS = [
'Blog',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'mdeditor', #富文本编辑器
]
3.添加路径到设置中
#settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') #uploads必须存在,且在项目目录下
MEDIA_URL = '/media/' #你上传的文件和图片会默认存在/uploads/editor下
4.添加设置到url中
#urls.py
from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('Blog/',include('Blog.urls')),
path('admin/', admin.site.urls),
url(r'mdeditor/',include('mdeditor.urls')),
]
if settings.DEBUG:
#static files (images,css,javascript, etc.)
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
5.在app中使用
from django.db import models
from mdeditor.fields import MDTextField #必须导入
class Article(models.Model):
article_title = models.CharField('title',max_length = 100)
article_content = MDTextField('content') #注意为MDTextField()
article_pubdate = models.DateTimeField('date published')
article_publisher = models.ForeignKey(User,on_delete=models.CASCADE,verbose_name='publisher')
article_class = models.ForeignKey(Class,null=True,blank=True,on_delete=models.CASCADE,verbose_name='class')
def __str__(self):
return self.article_title
6.在Blog/admin.py中注册
from django.contrib import admin
from Blog.models import *
admin.site.register(Article)
7.此时在Django的后台管理页面添加或编辑该类时,article_content就可以用markdown编辑并实时预览了。
Django前端显示markdown
1.首先下载markdown
pip install markdown # 下载时最好使用管理员权限
2.在views.py中使用:
注意这里使用了3个markdown扩展,extra 本身包含很多拓展,而 codehilite 是语法高亮拓展,这为我们后面的实现代码高亮功能提供基础,而 toc 则允许我们自动生成目录。
前端可能不会为代码换行,为了解决这个问题使用article.content.replace(“\r\n”, ’ \n’)解决,把换行符替换成两个空格+换行符,这样经过markdown转换后才可以转成前端的br标签
from django.shortcuts import render,get_object_or_404
from .models import Article
import markdown
# 文章详情页
def detail(request,article_id):
article = get_object_or_404(Article,pk=article_id)
article.article_content = markdown.markdown(article.article_content.replace("\r\n", ' \n'),
extensions=['markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',],safe_mode=True,enable_attributes=False)
context = {
'article':article,
}
return render(request,'Blog/detail.html',context)
3.前端显示时必须使用safe过滤器
<div>
{{article.article_content | safe}}
</div>
4.实现代码高亮
首先安装Pygments
pip install Pygments
安装完成后运行:
pygmentize -S default -f html -a .codehilite > code.css
该命令会在命令路径下生成.css文件,code.css还可以换成github.css等。将该css文件放到应用的静态文件夹中。
最后在html页面引入:
{% load static %}
...
<link rel="stylesheet" href="{% static 'Blog/github.css' %}" />
5.现在刷新前端页面,文章内容便以markdown形式展示了。