对应github地址:https://github.com/pshyms/django/tree/master/mxonline/7_day
一. 定制不同页面中样式相同,内容不同的模板标签,
1. 拷贝org-list.html到templates目录中,新建base.html后把org-list.html中的内容拷贝到base.html
2. 定制base.html
2.1 加载静态文件位置变量
![](https://i-blog.csdnimg.cn/blog_migrate/ed718957531bd3dec827fa94b92a1a68.png)
2.2 在<title>中添加标题模块,默认是"慕学在线网"
![](https://i-blog.csdnimg.cn/blog_migrate/15d34e70c98ae34ca220a3ac783a1f04.png)
block模板标签可以继承原网页样式,同时动态改变不同网页中的变量内容,用法就是用block模板标签包着原网页内容
2.3 在通用css,js后添加用户自定义类型,让用户在继承通用样式的基础上还可以添加其他样式
![](https://i-blog.csdnimg.cn/blog_migrate/c7767a4736e5c51ffd2b565efcf6bc03.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c50e00ff9675696039305c466ad77079.png)
2.4 分别在导航和机构内容的section块前后加
{% block custom_bread %} .... {% endblock %}
{% block content %} ... {% endblock %}
其中导航块就是页面中显示如下内容的代码,俗称面包屑
![](https://i-blog.csdnimg.cn/blog_migrate/c376270a0e83dc51ddedf966d44fe1ca.png)
3. 使用定制模板
首先清空org-list.html后,然后添加如下
3.1 继承base.html中的所有内容
![](https://i-blog.csdnimg.cn/blog_migrate/2a987d3240e59c452ca7431f4984c66b.png)
3.2 修改标题为"我的慕学在线网"
![](https://i-blog.csdnimg.cn/blog_migrate/84badcd338db1428b1304e41ef0eb879.png)
3.3 重写面包屑代码,改为"我的课程机构"
![](https://i-blog.csdnimg.cn/blog_migrate/630d1b8c53f0d2832f2d6dd8dfa0d1eb.png)
3.4 重写机构内容部分的section
1)把base.html中的{% block content %}以及中间的html代码都拷贝到org-list.html中
2)把base.html中{% block content %}中的section代码块删除
3)在org-list.html中添加{% load staticfiles %},因为section代码块中用到了{% static %}模板标签
4. 编写view和URL
4.1 在organizaiton/views.py中添加
![](https://i-blog.csdnimg.cn/blog_migrate/cfb5510b22031da10b56f7b21a65af71.png)
4.2 在mxonline/urls.py中添加如下内容,首先当导入OrgView
![](https://i-blog.csdnimg.cn/blog_migrate/efa9c7d05961b7f6dc066ac323487a1e.png)
后期可以在organizaiton中新建urls.py,优化一下URL结构
然后访问http://127.0.0.1:8000/org_list,即可成功访问网页内容
二. 课程机构列表页数据展示
1. 配置图片上传路径
新建mxonline/static目录
在settings.py中添加
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
2. organization/models.py中的CourseOrg中增加机构类别字段
![](https://i-blog.csdnimg.cn/blog_migrate/f16c87f0e41f6bc6c0ddcf92ba570829.png)
迁移数据库: makemigrations/migrate
3. 将网页中的静态显示的城市,机构信息改写成动态从数据库获取数据
3.1 完善organization/views.py
![](https://i-blog.csdnimg.cn/blog_migrate/c09406d30546984ff977109583908f2d.png)
3.2 改写城市名
在网页42行左右表示城市的代码处添加,其中<a>标签中的内容就是复制原先的代码,改了城市名部分
![](https://i-blog.csdnimg.cn/blog_migrate/fe93348c40dc053107d0425b56db0f60.png)
然后删除原先表示城市的所有代码行
3.3 改写课程机构封面图
每一个课程机构都是一个<dl>标签,在大概60行处第一个<dl>标签加一个for循环的模板标签,把任意一个<dl>标签内容拷贝到其中,其他的<dl>标签都可删掉了
![](https://i-blog.csdnimg.cn/blog_migrate/56a82a2b3532139aca6a6534ac9d5208.png)
在数据库中封面图的存储方式为org/2018/8/xx.jpg,它是一个字符串的相对路径。models.py中定义上传图片类型为ImageField,怎么把一个imageField类型转为一个URL地址呢?
原先表示封面图的html代码如下
![](https://i-blog.csdnimg.cn/blog_migrate/3cf0900b54b421b9b86136988767cd35.png)
只需修改data-url即可
![](https://i-blog.csdnimg.cn/blog_migrate/786357ce49ce08560e18370075afe57a.png)
要想使上面的一行代码成功,需要做如下设置
1)想用{{ MEDIA_URL }},需要在settings.py->TEMPLATES->OPTIONS->context_processors字段中添加media上下文处理器
![](https://i-blog.csdnimg.cn/blog_migrate/3214dcefe11f40b5b25c594d829d8ffb.png)
2)mxonline/urls.py中添加类似如下代码,只要模块导入以及最后一行
![](https://i-blog.csdnimg.cn/blog_migrate/419ce3b845ce5a5836b62010a2551891.png)
3.4 改写课程机构数量
因为在views.py中已经定义org_nums并传到了org-list.html中,所以只需在网页代码中使用变量标签就好,修改第50行如下,把具体数字15改成{{ org_nums }}
![](https://i-blog.csdnimg.cn/blog_migrate/2f0a3ced7b25c31f9fb42dae7cd2637f.png)
3.5 修改课程机构名字,地址等。只需在相应位置用变量标签替换就好,比如机构名可替换为
{{ course_org.name }}