当前位置: 首页 > 教程 > 博客搭建

Django个人博客搭建(5)-文章添加markdown渲染

作者: admin 2019-09-14 13:17:18 阅读(289) 评论(1)

前言

今天我们将讲述如何在后台管理中加入 markdown 编辑器,并为文章添加 markdown 渲染,使得文章中的代码高亮,显得更加炫酷。

添加markdown编辑器

  • 在终端中利用pip install django-mdeditor命令行安装markdown编辑器。 安装markdown编辑器

  • 安装成功以后,在settigns.py中注册markdown编辑器App。如下所示:

INSTALLED_APPS = [
    'simpleui',  # 注册simpleui
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'article',
    'front',
    'mdeditor',  # 注册markdown编辑器
]
  • 修改 article/models.py 文件,引入定制模型类,修改文章内容content字段,如下所示。
import uuid
from django.conf import settings
from django.db import models
from mdeditor.fields import MDTextField

# 文章模型类
class Article(models.Model):
    id = models.BigAutoField(primary_key=True)  # 主键
    img = models.ImageField(upload_to=article_image_upload_to, max_length=255, null=True, verbose_name="文章图片")  # 图片字段
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, verbose_name="作者")  # 与自带的auth.user关联
    label = models.ManyToManyField('Label', verbose_name="标签")  # Label和Article为多对多关系
    title = models.CharField(max_length=100, verbose_name="标题")  # 标题
    content = MDTextField(max_length=100000, verbose_name="内容")  # 内容,修改为MDTextField
    summary = models.CharField(blank=True, max_length=200, verbose_name="摘要")  # 摘要
    gmt_created = models.DateTimeField(blank=True, null=True, auto_now_add=True)  # 创建时间
    gmt_modified = models.DateTimeField(blank=True, null=True, auto_now=True)  # 修改时间

    class Meta:
        verbose_name = '文章'
        verbose_name_plural = '文章'

    def __str__(self):
        return self.title
  • 启动项目,进入后台管理系统,点击添加文章,检查markdown编辑器效果。 检查markdown编辑器效果

  • 我们试着用markdown语法,来写一篇文章并保存。

增加文章详情视图

  • 编写 article/views.py 视图文件,添加文章详情页视图函数。先从URL中获取id(主键),再根据主键获取文章对象,利用render函数将数据渲染至article-detail.html页面。如下所示:
# 文章详情页   
def article_detail(request):   
    id = request.GET.get("id")  # 从get请求中获取id   
    article = Article.objects.get(id=id)  # 根据id获取文章对象   
    return render(request, 'article-detail.html', {'article': article})  
  • 将该视图函数注册到article/urls.py路由中,如下所示:
from django.urls import path   
from article import views   

urlpatterns = [   
    path('detail', views.article_detail, name='article_detail'),   
]   
  • 编辑根目录下的总路由urls.py,将 article 此App的路由分发到总路由中。
from django.contrib import admin   
from django.urls import path, include, re_path   
from django.views.static import serve   
from article.views import index   
from rainbow_blog import settings   

urlpatterns = [   
    path('', index, name='index'),  # path第一个参数为空表示主页   
    path('admin/', admin.site.urls),   
    path('front/', include('front.urls')),   
    path('article/', include('article.urls')),  # 分发article的路由   
    re_path(r'media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),  # media配置   
]  
  • 修改article/templates/article-detail.html文件,在此模板中显示从后台获取的文章内容。
<div class="article-content markdown-body">
      <!--使用safe过滤器是为了取消转义-->
      {{ article.content | safe }}
</div>
  • 编辑 article/templates/index.html 文件,为文章列表中的 a 标签添加URL,使得点击文章列表中的标题,能够跳转到文章详情页。如下所示:  a 标签添加URL

  • 重新运行项目,进入主页,点击之前添加的那篇文章的标题,观察能否正常跳转进入文章详情页。 文章详情页

代码高亮

安装组件

  • 利用pip install markdownpip install Pygments命令行安装代码高亮所需的组件。

  • 安装完毕之后,在项目根目录下执行命令行pygmentize -S monokai -f html -a .codehilite > code.css。执行完毕之后,将在项目根目录下生成一个名为code.css的样式文件,将该文件复制到 article/static/css 文件夹下。

  • 在文章详情页引入此css文件。

    <link rel="stylesheet" type="text/css" href="{% static 'css/code.css' %}">
  • 我们发现文章详情页并不能规则地显示代码高亮和文章内容,所以需要在文章详情页视图中,利用 markdown 组件,对数据库中的文章内容进行渲染。如下所示:
import markdown
from django.shortcuts import render
from article.models import Article

# 文章详情页
def article_detail(request):
    id = request.GET.get("id")  # 从get请求中获取id
    article = Article.objects.get(id=id)  # 根据id获取文章对象
    article.content = markdown.markdown(article.content.replace("\r\n", '  \n'), extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ], safe_mode=True, enable_attributes=False)  # 渲染文章内容
    return render(request, 'article-detail.html', {'article': article})
  • 重新运行项目,进入文章详情页,观察文章内容,发现效果有些问题,部分字体模糊不清。 字体模糊不清

    因为我在详情页中导入了github-markdown.css样式,此样式与code.css样式冲突了,将此样式删除即可。

  • 刷新文章详情页面,不出意外就能看见高亮的代码了? 。 文章详情页-代码高亮

本次教程主要讲述了如何在django中添加markdown编辑器并完成代码高亮,下一篇博客将讲述如何给文章添加评论。

1 条评论

厉害

0 0