mxonline实战7，模板继承和模板标签

 

 

对应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 加载静态文件位置变量

 

2.2 在<title>中添加标题模块，默认是"慕学在线网"

block模板标签可以继承原网页样式，同时动态改变不同网页中的变量内容，用法就是用block模板标签包着原网页内容

 

2.3 在通用css,js后添加用户自定义类型，让用户在继承通用样式的基础上还可以添加其他样式

 

2.4 分别在导航和机构内容的section块前后加

{% block custom_bread %} .... {% endblock %}

{% block content %} ... {% endblock %}

 

其中导航块就是页面中显示如下内容的代码，俗称面包屑

 

 

3. 使用定制模板

 

首先清空org-list.html后，然后添加如下

3.1 继承base.html中的所有内容

 

3.2 修改标题为"我的慕学在线网"

 

3.3 重写面包屑代码，改为"我的课程机构"

 

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中添加

 

4.2 在mxonline/urls.py中添加如下内容，首先当导入OrgView

后期可以在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中增加机构类别字段

 

迁移数据库: makemigrations/migrate

 

 

3. 将网页中的静态显示的城市，机构信息改写成动态从数据库获取数据

 

3.1 完善organization/views.py

 

 

3.2 改写城市名

在网页42行左右表示城市的代码处添加，其中<a>标签中的内容就是复制原先的代码，改了城市名部分

然后删除原先表示城市的所有代码行

 

 

 

3.3 改写课程机构封面图

每一个课程机构都是一个<dl>标签，在大概60行处第一个<dl>标签加一个for循环的模板标签，把任意一个<dl>标签内容拷贝到其中，其他的<dl>标签都可删掉了

 

在数据库中封面图的存储方式为org/2018/8/xx.jpg，它是一个字符串的相对路径。models.py中定义上传图片类型为ImageField，怎么把一个imageField类型转为一个URL地址呢？

原先表示封面图的html代码如下

只需修改data-url即可

 

要想使上面的一行代码成功，需要做如下设置

1）想用{{ MEDIA_URL }}，需要在settings.py->TEMPLATES->OPTIONS->context_processors字段中添加media上下文处理器

 

2）mxonline/urls.py中添加类似如下代码，只要模块导入以及最后一行

 

 

3.4  改写课程机构数量

因为在views.py中已经定义org_nums并传到了org-list.html中，所以只需在网页代码中使用变量标签就好，修改第50行如下，把具体数字15改成{{ org_nums }}

 

3.5 修改课程机构名字，地址等。只需在相应位置用变量标签替换就好，比如机构名可替换为

{{ course_org.name }}