课程列表页分析

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模板继承-课程列表页的更多相关文章

  1. [py][mx]django添加后台课程机构页数据-图片上传设置

    分析下课程页前台部分 机构类别-目前机构库中没有这个字段,需要追加下 所在地区 xadmin可以手动添加 课程机构 涉及到机构封面图, 即图片上传media设置, 也需要在xadmin里手动添加几条 ...

  2. 19、Django实战第19天：课程列表页

    从今天开始,我们将完成"公开课"课程的相关功能..... 1.把course-list.html复制到templates目录下 2.这个页面的头部.底部与之前定义的base.htm ...

  3. [py]django模板继承

    参考 1.展示arr,d等数据类型 2.逻辑for if / url获取 3.获取内置变量 django模板继承 通过搞一个base.html 这个base.html可以包含两类 block片断 其他 ...

  4. mxonline实战10，课程列表页，课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  5. Django 2.0 学习(13)：Django模板继承和静态文件

    Django模板继承和静态文件 模板继承(extend) Django模板引擎中最强大也是最复杂的部分就是模板继承了,模板继承可以让我们创建一个基本的"骨架"模板,它可以包含网页中 ...

  6. Python学习---django模板继承180123

    django模板继承  --20180123 a.include 模板标签 b.extend(继承)模板标签 ------include 模板标签 该标签允许在(模板中)包含其它的模板的内容. 标签的 ...

  7. django学习-8.django模板继承（block和extends）

    1.前言 django模板继承的作用:模板可以用继承的方式来实现复用,减少冗余内容. 一般来说,一个网站里一般存在多个网页的头部和尾部内容都是一致的,我们就可以通过模板继承来实现复用. 父模板用于放置 ...

  8. [py][mx]django课程页显示city和机构封面图

    city和课程机构信息展示到前台去 organization/views.py from django.views.generic.base import View from organization ...

  9. [py][mx]django实现课程机构排名

    如果是第一次做这个玩意,说实话,确实不知道怎么弄, 做一次后就有感觉了 此前我们已经完成了: 分类筛选 分页 这次我们做的是 课程机构排名 知识点: - 按照点击数从大到小排名, 取出前三名 hot_ ...

随机推荐

  1. Objective-c官方文档 怎么使用对象

    版权声明:原创作品,谢绝转载!否则将追究法律责任.   对象发送和接受消息 尽管有不同的方法来发送消息在对象之间,到目前位置是想中括号那样[obj doSomeThing]:左边是接受消息的接收器,右 ...

  2. Android设计和开发系列第二篇：Navigation Drawer(Develop)

    Creating a Navigation Drawer THIS LESSON TEACHES YOU TO: Create a Drawer Layout Initialize the Drawe ...

  3. django进阶-1

    前言: 各位久等了,django进阶篇来了. 一.get与post 接口规范: url不能写动词,只能写名词 django默认只支持两种方式: get, post get是获取数据 ?user=zcl ...

  4. 【Drools-开源业务规则引擎】入门实例(含源码)

    该实例转自:http://blog.csdn.net/quzishen/article/details/6163012 便于理解的应用实例1: 现在我们模拟一个应用场景:网站伴随业务产生而进行的积分发 ...

  5. Java 使用单例模式的注意事项

    某个类使用单例模式实现,如果该类里面含有List或Map等集合,使用时,请注意两点 1. List或Map 等集合使用前,需要判断是否已经数据,调用clear()方法先清除掉 2. List或Map ...

  6. Google APK下载

    在线下载google play中apk的网站 1.http://apps.evozi.com/apk-downloader 2.http://downloader-apk.com/ 3.http:// ...

  7. sencha touch 在线实战培训 第一期 第四节

    2014.1.4晚上8点开的课 第一节收费课程,还是有几位同学付费了,这些课程也录像了的,以后也会持续销售. 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:          ...

  8. VC++组合框——学习笔记1（组合框选项的添加和无法显示下拉选项）

    VC++控件 ---组合框  环境VC2003 1.组合框添加下拉菜单选项  现在有尝试了两个命令 (m_com为组合框控control类型的变量.) 方法一  m_com.AddString(&qu ...

  9. 使用COSBench工具对ceph s3接口进行压力测试

    一.COSBench安装 COSBench是Intel团队基于java开发,对云存储的测试工具,全称是Cloud object Storage Bench 吐槽下,貌似这套工具是intel上海团队开发 ...

  10. yii---生产链接的方法

    yii生成链接的方法: Yii::$app->urlManager->createUrl('xxx/xxx') <?= Yii::$app->urlManager->cr ...