[py][mx]django模板继承-课程列表页

课程列表页分析

1,机构类型

2,所在地区

3.排序 学习人数

先分析下

纵观页面,页头页脚都一样. django提供了模板继承.

至少不同页面的title 面包屑路径 content内容不一致,以前总结个django模板继承

base.html(页头页脚公用, tilte content等block) ---> org-list.html(继承base, 将父block替换成自己的)

整改org-list的templates为继承模式

这里我自己写了个简单的style.css.

这里静态文件和url都采用jinjia2的模式

base.html

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{% block title %}

        后台

    {% endblock %} - 在线网</title>

    {# 静态文件部分 #}

    <link rel="stylesheet" href="{% static 'css/style.css' %}">

    {% block custom_css %}

    {% endblock %}

</head>

<body>

{#导航栏部分#}

<div class="header">

    <div class="inner_c">

        <h1 class="logo">

            <a href="#">

                后台在线网

            </a>

        </h1>

        <div class="nav">

            <ul>

                <li class="current">

                    <a href="#">首页</a>

                </li>

                <li class="xiaoming">

                    <a href="#">公开课</a>

                </li>

                <li>

                    <a href="#">授课讲师</a>

                </li>

                <li>

                    <a href="#">授课机构</a>

                </li>

                {% if request.user.is_authenticated %} {#已登录状态#}

                    <li>

                        <a href="#"> {{ request.user }}</a>

                    </li>

                {% else %} {# 未登录状态 #}

                    <li>

                        <a href="{% url 'login' %}">登录</a>

                    </li>

                    <li>

                        <a href="{% url 'register' %}">注册</a>

                    </li>

                {% endif %}

            </ul>

        </div>

    </div>

</div>

{#面包屑路径 首页>课程列表#}

{% block custom_bread %}

    <div>

        <ul>

            <li><a href="">首页</a>></li>

            <li>课程机构</li>

        </ul>

    </div>

{% endblock %}

{#内容#}

{% block content %}

{% endblock %}

<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>

{% block custom_js %}

{% endblock %}

</body>

</html>

org-list.html继承base.html

{% extends 'base.html' %}{# 一定要出现在第一行 #}

{% load staticfiles %}

{% block title %}

    课程列表

{% endblock %}

{% block custom_bread %}

    <div>

        <ul>

            <li><a href="">首页</a>></li>

            <li>课程机构</li>

        </ul>

    </div>

{% endblock %}

抛出课程结构页的接口

url.py

from organization import views as org_views

urlpatterns = [

    # 课程机构

    path('org_list/', org_views.OrgView.as_view(), name="org_list"),

]

organization/views.py

from django.views.generic.base import View

class OrgView(View):#课程机构列表页

    def get(self, request):

        return render(request, 'org-list.html', {})

style.css

* {

    margin: 0;

    padding: 0;

}

.cl {

    clear: both;

}

body {

    font-family: "Microsoft YaHei", "SimSun";

    height: 8888px;

}

.inner_c {

    width: 1000px;

    margin: 0 auto;

}

.header {

    height: 58px;

    background-color: #191D3A;

}

.header .logo {

    float: left;

    padding-left: 12px;

    margin-right: 39px;

    width: 174px;

    height: 58px;

}

.header .logo a {

    display: block;

    width: 174px;

    height: 58px;

    background: url(images/logo.png) no-repeat;

    text-indent: -999em;

}

.header .nav {

    float: left;

    width: 607px;

    height: 58px;

}

.header .nav ul {

    list-style: none;

}

.header .nav ul li {

    float: left;

    width: 100px;

    height: 58px;

    border-left: 1px solid #252947;

}

.header .nav ul li.last {

    border-right: 1px solid #252947;

}

.header .nav ul li a {

    display: block;

    width: 100px;

    height: 58px;

    text-align: center;

    line-height: 58px;

    color: #818496;

    text-decoration: none;

    font-size: 14px;

}

.header .nav ul li a:hover {

    background-color: #252947;

    color: #E2E4ED;

}

.header .nav ul li.current a {

    background-color: #252947;

    color: #E2E4ED;

}

request的变量不仅会传给对应模板,还会传给对应模板的父模板

[py][mx]django模板继承-课程列表页的更多相关文章

[py][mx]django添加后台课程机构页数据-图片上传设置
分析下课程页前台部分机构类别-目前机构库中没有这个字段,需要追加下所在地区 xadmin可以手动添加课程机构涉及到机构封面图, 即图片上传media设置, 也需要在xadmin里手动添加几条 ...
19、Django实战第19天：课程列表页
从今天开始,我们将完成"公开课"课程的相关功能..... 1.把course-list.html复制到templates目录下 2.这个页面的头部.底部与之前定义的base.htm ...
[py]django模板继承
参考 1.展示arr,d等数据类型 2.逻辑for if / url获取 3.获取内置变量 django模板继承通过搞一个base.html 这个base.html可以包含两类 block片断其他 ...
mxonline实战10，课程列表页，课程详情页1
对应github地址:第10天一. 课程列表页 1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加
Django 2.0 学习(13)：Django模板继承和静态文件
Django模板继承和静态文件模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...
Python学习---django模板继承180123
django模板继承 --20180123 a.include 模板标签 b.extend(继承)模板标签 ------include 模板标签该标签允许在(模板中)包含其它的模板的内容. 标签的 ...
django学习-8.django模板继承（block和extends）
1.前言 django模板继承的作用:模板可以用继承的方式来实现复用,减少冗余内容. 一般来说,一个网站里一般存在多个网页的头部和尾部内容都是一致的,我们就可以通过模板继承来实现复用. 父模板用于放置 ...
[py][mx]django课程页显示city和机构封面图
city和课程机构信息展示到前台去 organization/views.py from django.views.generic.base import View from organization ...
[py][mx]django实现课程机构排名
如果是第一次做这个玩意,说实话,确实不知道怎么弄, 做一次后就有感觉了此前我们已经完成了: 分类筛选分页这次我们做的是课程机构排名知识点: - 按照点击数从大到小排名, 取出前三名 hot_ ...

随机推荐

开机出现checking file system on C怎么办
开机出现checking file system on C怎么办 | 浏览:16126 | 更新:2018-02-04 13:51 | 标签:开机百度经验:jingyan.baidu.com 开机出 ...
php API接口入门
1.简述: api接口开发,其实和平时开发逻辑差不多:但是也有略微差异: 平时使用mvc开发网站的思路一般是都由控制器去调用模型,模型返回数据,再由控制器把数据放到视图中,展现给用户: api开 ...
Delphi XE 10 跨平台三层数据库应用教程
Delphi XE 10 跨平台三层数据库应用教程前言: Delphi XE 开始越来越庞大,比经典的Delphi7难用,但依然是目前所有跨平台开发工具中开发效率最高.最容易上手的,其快速设计RAD ...
jpa中时间戳格式应该用哪种类型
遇到个bug,数据库时间存储用了datetime,但是下面的java jpa代码,查询回来,却只有日期. String innerSql = getInnerQuery(departmentId, k ...
jquery scroll()滚动条事件
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...
chrome扩展写法
最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下. 一.chrome扩展基本概念 chrome扩展 ...
MapperScannerConfigurer
MapperScannerConfigurer转自:http://www.cnblogs.com/fangjian0423/p/spring-mybatis-MapperScannerConfigur ...
thinkCMF----增删改查操作
thinkCMF的增删改查基本操作: 一.增加数据 $res = Db::name('form')->insert($data); 示例代码: public function index(){ ...
Postfix邮件
一() 邮件相关协议 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议, 工作在TCP的25端口.它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的 ...
rs.getMetadata
元数据(MetaData),即定义数据的数据.打个比方,就好像我们要想搜索一首歌(歌本身是数据),而我们可以通过歌名,作者,专辑等信息来搜索,那么这些歌名,作者,专辑等等就是这首歌的元数据.因此数据库 ...