今天我们说一下如何优化Django中的界面，这里要用到我们之前给大家总结的一些前端知识：HTML＋CSS
QQ ZHOU：HTML入门速成zhuanlan.zhihu.com
QQ ZHOU：CSS入门速成zhuanlan.zhihu.com
https://pan.baidu.com/s/1KpThNYuZW5ahuTjrtlnHRg
提取码：imzh
经过前端的修改和美化，我们能把图从A—＞＞＞Ｂ
图A
看到这里有没有一点点的心动。跟着一起来学习吧～
先明确目标:
图B有三块,分别是导航栏,左边的文章列表和最右边的文章类型.我们可以通过点击文章类型.
1.左边的文章列表我们需要标题,发布时间,作者和文字分类
2.从分类中可以跳转到这个分类下的所有文章.也即分类可以作为筛选器筛选出用户关心的文章
Step1:因此,我们需要在model.py中建文章模型和文章分类模型
from
Step2:接着,我们要保存,然后将数据重新makemigrations和migrate.
在命令行输入
python
如果你有历史应用请记得删除之前的migrate文件和sqllite库表. 如此才能对新的模型生效
Step3:模型建好
就是要处理这些数据,用到views.py
from
Step4:上述把数据准备好了,就可以渲染页面了.将HTML文件放到templates命名的文件夹.系统将会自动识别到templates下HTML文件的位置,与view.py同级,放在myfrtsite应用当中.
articleDetail.py --文章详情页
<
articleList.html --文章列表页
{
with_type --点击某个分类的列表页
{
上述还用套用了CSS模块,Bootstrap,网上有,大家可以查一下Bootstrap的看框架
全局 CSS 样式 · Bootstrap v3 中文文档v3.bootcss.com
上述的CSS样式是争对整个页面框架的,比如导航.我们在这里引入了Bootstrap,引入是采用link方式嵌入到html文件中
<
Step5:建CSS文件,并且指定CSS文件路径.此处是针对某个元素或者列表格式.然后写入到CSS文件中,存放在以下路径.在myfrtsite文件下创建static文件夹,然后将css文件放入文件夹.CSS文件如下
#
最后,需要让服务器知道你的CSS文件路径,在settings.py最后输入:
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR, 'static'),
]
# BASE_DIR当前应用根目录绝对路径
完成了上述操作,你也可以看到更Nice的网页,坚持就是胜利,期待我们能建自己的网站应用.
看我写的那么认真,还请大家多多点赞支持~
QQ ZHOU：Python+Django入门通关（一）
QQ ZHOU：Python+Django— 入门通关（二）| Models：创建数据库表
QQ ZHOU：Python+Django— 入门通关（二）| Models：创建数据库表（加餐篇）
QQ ZHOU：Python+Django— 入门通关（三）| admin：后台管理界面
QQ ZHOU：Python+Django— 入门通关（五）| 在公网发布自己的网站