用Django搭建个人博客网站(五. 构建后台和文章编辑器)

首先,我们先在models.py中创建一个文章的数据模型

创建文章

打开models.py文件,编写一个文章的数据模型:

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第1张图片
文章模型

注意,不要忘了新建了数据模型后要使用makemigrations和migrate进行同步。

接下来,Django自带一个用户管理系统,让我们先把这个系统搭建起来。

搭建后台管理

首先我们在项目根目录下输入以下命令创建超级管理员:

>>>python3 manage.py createsuperuser

然后依次输入用户名,邮箱(可以不输,直接回车跳过),密码。另外别忘记了密码需要输入两遍。

然后在同目录下的admin.py文件中编写如下内容:

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第2张图片
admin.py

我们可以理解为在后台管理系统中为这个数据模型“开户口”,这样以后我们就可以在管理员后台中查看到这个数据模型的情况了。

到目前为止,我们可以在运行项目后在浏览器中输入(http://127.0.0.1:8000/admin/)查看后台了。输入超级用户的用户名和密码,成功登录后看到以下的界面,我们可以看到刚才注册的文章数据模型了。

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第3张图片
管理员后台

但是这个界面是英文的,对于英文不太好的同学可能不太友好,我们也可以汉化一下它。

管理员后台的汉化

首先,我们需要先安装一个bootstrap插件

>>(sudo) pip3 install bootstrap-admin

然后我们打开配置文件settings.py改写LANGUAGE_CODE和TIME_ZONE为以下两行内容

配置

然后我们再打开管理员后台看看,看看是不是汉化成功了。

接下来我们来构建一个Django编辑文章的功能。

集成DjangoUeditor编辑器

首先,我们需要让Django可以编辑包含图片的文本,以及能轻松的改变文本格式,这里我们要集成一个百度的Ueditor到我们的系统:

https://github.com/twz915/DjangoUeditor3

可以直接下载或者clone得到,然后将里面的DjangoUeditor文件夹直接放到项目的根目录中。

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第4张图片
DjangoUeditor的位置

之后,我们在配置文件中将这个应用配置进去,让Django能识别到这个模块。

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第5张图片
配置

接下来让我们在urls.py中再添加一些内容

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第6张图片
urls.py

这样,django就能访问编辑器模块了。

最后几行的进行了一些静态文件的配置,在这里我们总结一下Django配置文件中所有静态文件路径之间的关系:

STATIC_URL:

        这个是django会默认寻找静态文件路径之一,在发布前Django会从各个文件夹中收集静态文件统一放入这个文件夹中,期间有可能会覆盖掉原来的文件,所以并不建议大家上来就把静态文件塞这里面。

STATIC_ROOT:

        这个就是静态文件相对于系统的目录。

MEDIA_URL:

        我们一般会将上传的文件放入这个文件夹中。

MEDIA_ROOT:

        上传的文件相对于系统的目录。

STATICFILES_DIRS:

        这是一个元组,里面放置的是开发环境下Django自动寻找静态文件的路径。

到目前为止,相关静态文件的路径如下所示:

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第7张图片
静态文件路径

注意!开发环境下static_root应该注释掉。

然后,我们回到models.py中更改文章的数据模型

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第8张图片
更新文章的数据模型

然后更新同步一下数据,就可以运行登录后台了,我们这时看到的文章数据管理界面应该是这样的:

用Django搭建个人博客网站(五. 构建后台和文章编辑器)_第9张图片
元素路径

你可能感兴趣的:(用Django搭建个人博客网站(五. 构建后台和文章编辑器))