mxonline实战7,模板继承和模板标签
2024-09-18 21:58:48
对应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 }}
最新文章
- Xcode同一个Workspace中两个工程依赖于Undefined Symbol Error
- Linux~centos上安装.netcore,HelloWorld归来!
- java基础学习总结——基础语法1
- eclipse注释模板及格式化模板导入步骤
- 解决中64位Win7系统上PLSQL无法连接ORACLE的方法(PLSQL无法识别ORACLE_HOME的配置)
- 机器学习技法-决策树和CART分类回归树构建算法
- Linux定时任务crontab每三秒执行一次shell
- onmouseleave与onmouseout区别
- poj2586
- [jQuery] jQuery如何获取同一个类标签的所有的值
- NA笔记
- grep的小技巧
- Vue(五)Vue规范
- java 中int与integer的区别
- 洛谷.T22136.最长不下降子序列(01归并排序 分治)
- 使用Python自己实现简单的数据可视化
- oracle 判断字符串是否包含指定内容
- Jquery_artDialog对话框弹出
- SSL原理
- Week Three