django admin使用在前端_Django| 给你博客装个Markdown编辑器
小白学Django系列:
小白学Django第一天| MVC、MVT以及Django的那些事
- 小白学Django第二天| Django原来是这么玩的!
- 小白学Django第三天| 一文带你快速理解模型Model
- 小白学Django第四天| Django后台管理及配置MySQL数据库
- 小白学Django第五天| 视图View的初步使用
- 小白学Django第六天| 一文快速搞懂模板的使用
- Django实战小型图书人物信息网页(MVT的综合运用)
- 小白学Django第七天| 模型类Model进阶学习
- 小白学Django第八天| 登录案例实战
- 持续更新中...
前言
最近自己在开发一个blog,因为比较喜欢用Markdown来写文章,而且目前很多平台都支持Markdown的语法,所以想给blog装个Markdown的编辑器。于是,就搜了一下,发现了django-mdeditor这个库,给大家分享一下。
简单介绍
Github地址:
https://github.com/pylixm/django-mdeditor
Django-mdeditor是基于Editor.md的一个django Markdown 文本编辑插件应用。
Django-mdeditor的灵感参考自项目 django-ckeditor
https://github.com/django-ckeditor/django-ckeditor
后端编辑器使用
1.安装相关库
pip install django-mdeditor # 用于后台编辑pip install markdown # 用于前端显示
首先大家先安装这两个库,django-mdeditor库就是用在我们管理后台的md编辑器,markdown则是在前端显示时使用。
2.配置
安装完两个库后,我们需要进行相关的配置。
新增setting配置:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog', 'mdeditor',]
除了配置上面的信息,还需要配置资源文件夹:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/' #你上传的文件和图片会默认存在/media/editor下
以为就完了?不,你还需要去url进行配置:
大家把我打红框的代码弄上去就ok了
这时,我们就大概配置完成了。
3.使用Markdown
此时只需要在model中填写相应的属性,即可调用该编辑器。
当然,在进入管理页面之前,你需要在admin中进行注册
admin.site.register(Acticle) # Acticle 是我文章的model名
打开后台之后,我们就会发现Markdown编辑器出现了:
我们在这里插入的图片或者上传的文件都会在media文件夹中,这个文件夹在上面配置中提到,必须要有!!!
前端使用
我们使用了Markdown编辑器编写的文章在前端显示时,必须得将Markdown语法“翻译”成富文本的形式,所以这里我们需要使用到markdown这个库。
视图函数
pip install markdown
我们书写的博客文章内容存在Post的body属性里,回到我们的详情页视图函数,对post的body 的值做一下渲染,把Markdown文本转为HTML文本再传递给模板:
import markdownfrom django.shortcuts import render, get_object_or_404from .models import Post
def post_article(request, pk): post = get_object_or_404(Post, pk=pk)# 记得在顶部引入 markdown 模块 post.body = markdown.markdown(post.body, extensions=['markdown.extensions.extra','markdown.extensions.codehilite','markdown.extensions.toc', ])return render(request, 'blog/detail.html', context={'post': post})
可能有些朋友不懂get_object_or_404方法,给大家简单介绍一下get_object_or_404:我们原来调用django 的get方法(model.object.get()),如果查询的对象不存在的话,会抛出一个DoesNotExist的异常,现在我们调用django get_object_or_404方法,它会默认的调用django 的get方法,如果查询的对象不存在的话,会抛出一个Http404的异常,我感觉这样对用户比较友好,如果用户查询某个产品不存在的话,我们就显示404的页面给用户,比直接显示异常好。
markdown.extensions.extra: 用于标题、表格、引用这些基本转换
markdown.extensions.codehilite: 用于语法高亮
markdown.extensions.toc: 用于生成目录
替换网页模板
在模板中找到展示博客文章的地方加上如下代码,注意这里需要使用safe过滤器。
{{ post.body|safe }}
通过这样就能够显示md语法的文章了
总结
在开发过程中遇到的一个小需求就分享给大家,当然我介绍的只是mdeditor的一部分知识,mdeditor还有一些相关的配置,这里我就没给大家说了,大家可以去GitHub上自行看他们的官方文档,顺便也可以去star一下!
原创不易!转发在看!
小白学Django第一天| MVC、MVT以及Django的那些事
- 小白学Django第二天| Django原来是这么玩的!
- 小白学Django第三天| 一文带你快速理解模型Model
- 小白学Django第四天| Django后台管理及配置MySQL数据库
- 小白学Django第五天| 视图View的初步使用
- 小白学Django第六天| 一文快速搞懂模板的使用
- Django实战小型图书人物信息网页(MVT的综合运用)
- 小白学Django第七天| 模型类Model进阶学习
- 小白学Django第八天| 登录案例实战
- 持续更新中...
django admin使用在前端_Django| 给你博客装个Markdown编辑器相关推荐
- 前端从头搭建个人博客
项目介绍 几乎每个程序员都有一个博客梦.抱着学习前后端技术的心态花一个月左右的时间来完成这个个人项目. 这是一个使用vue2做前端框架,koa2做后端,mongodb数据库,搭建的单页面应用.网站 ...
- [Django快速开发1]搭建一个简单的博客系统(1)
系列文章目录 Django快速开发0快速搭建环境并得到django项目的hello world 文章目录 系列文章目录 前言 从Django的模型层开始书写 定义文章模型: 使用脚本向sqlite3中 ...
- web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=r ...
- 前端综合项目-个人博客网页设计
个人博客前端部分设计 文章目录 前端综合项目-个人博客网页设计 1. 预计效果 2. 公共样式设计 2.1 背景设计 2.2 导航栏设计 2.3 博客列表页和博客详情页的共同内容 2.3.1 页面划分 ...
- 【django学习】——Django介绍和实战(开发简易版博客网页)
目录 0.视频链接 ?1.环境配置 ?2.django基本命令 1)常见命令 ?2)数据库相关的Django命令 ?3.Django项目 1)Django创建项目 ?2)项目目录介绍 3)运行初始化的 ...
- html编写个人博客_Django 开发简易博客网站
本篇使用 Django 开发博客网站的核心内容,涉及 Django .MySQL .WampServer :我比较喜欢 Django 框架的 MVC (模型.视图.控制器)的软件设计模式,其中我最喜欢 ...
- app python搭建_Django搭建个人博客:创建并配置APP功能模块
创建APP 在Django中的一个app代表一个功能模块.开发者可以将不同功能的模块放在不同的app中, 方便代码的复用.app就是项目的基石,因此开发博客的第一步就是创建新的app,用来实现跟文章相 ...
- 一个前端写的php博客系统2--前台展示+后台登录
前台首页展示 首页的侧边预留的位置是给后面的统计,热门之类的版块预留位置... 控制器 文章列表展示要考虑到文章数量增多后分页展示,那么我们要统计文章数量,使用 count() 计算文章总数,然后使用 ...
- 有哪些非常好的前端网站或个人博客?
1.B站(www.bilibili.com/) 曾经我也只是把B站当做一个看番刷鬼畜的地方,但现在不错的课程也越来越多,之后想学些什么东西的时候,都会优先来B站搜一搜相关的学习视频.这里的视频可能不会 ...
最新文章
- iOS 9音频应用播放音频之音量设置与声道设置
- 微信新增“炸屎”功能,被好友玩坏了。。
- C++中可以以“类名::成员函数”直接引用成员函数哦!
- 《Linux内核原理与分析》第三周作业
- nfs服务启动失败:Failed to start NFS status monitor for NFSv2/3 locking..
- 无服务器-仅仅是构建现代应用程序的一种方法?
- rs485接口上下拉_RS485接口EMC电路设计方案
- HTML照片墙 个性相册源码
- 《别做正常的傻瓜》读书笔记
- 【细节处理】LeetCode 66. Plus One
- java http get 图片_http协议get方法获取图片并保存到本地
- Pytorch安装步骤
- Qimage QBuffer
- linux系统的wps办公软件,linux上安装wps办公软件
- mysql+orm+odb_C++ ORM ODB 入门介绍(一)
- 计算机中所占百分数用哪个函数,Excel中Percentrank函数的使用-计算所占百分比
- Enovia Overview
- vs智能提示英文转为中文
- java MP4视频压缩
- windows下使用VS2010编译jpeglib
热门文章
- Cloud for Customer动态控制任意UI element的visibility
- 如何向通过TCP socket给服务器端发送的数据里注明自己的客户端地址
- 步骤4 - 微服务提供者接收请求,提供服务并传回给Orchestra
- 一个Google Chrome浏览器的英文字典扩展应用
- update empty content to text instance - where is B mode changed to D by frame
- SAP CRM呼叫中心点了interact按钮后的处理逻辑
- Document Builder: 如何将structure level的field加入到word document的table中
- 获得SAP help center的url
- 使用report BSP_UPDATE_MIMEREPOS 批量上传mime object
- 用Eclipse调试Java程序的一些小技巧