课程列表页分析

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. vim重复操作的宏录制

    在编辑某个文件的时候,可能会出现需要对某种特定的操作进行许多次的情况,以编辑下面的文件为例: ;==================================================== ...

  2. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  3. java（3） 面向对象

    1.super关键字 * 使用super关键字调用父类的成员变量和成员方法.具体格式: super.成员变量 super.成员方法([参数1,参数2...]) * 使用super关键字调用父类的构造方 ...

  4. JavaScript怎样学

    嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎么接触 Web 编程,听说 Web 技术已经发生了一些变化.听说你是这里对新技术最了解的 Web 开发工程师? 准确地说,我是一名「前端工程师 ...

  5. vue生成路由实例, 使用单个vue文件模板生成路由

    一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...

  6. 【CF671E】Organizing a Race 单调栈+线段树

    [CF671E]Organizing a Race 题意:n个城市排成一排,每个城市内都有一个加油站,赛车每次经过第i个城市时都会获得$g_i$升油.相邻两个城市之间由道路连接,第i个城市和第i+1个 ...

  7. 【BZOJ3328】PYXFIB 数论+矩阵乘法

    [BZOJ3328]PYXFIB Description Input 第一行一个正整数,表示数据组数据 ,接下来T行每行三个正整数N,K,P Output T行,每行输出一个整数,表示结果 Sampl ...

  8. [APP] Android 开发笔记 001-环境搭建与命令行创建项目

    1. 安装JDK,SDK JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html Android SDK http ...

  9. np.tile 函数使用

    >>> import numpy>>> numpy.tile([0,0],5)#在列方向上重复[0,0]5次,默认行1次array([0, 0, 0, 0, 0, ...

  10. .NET中的类型对象

    .NET中的任何类型,都有对应的一个类型对象.类型对象和类型实例(类型创建的一个对象)不是同一个概念. 类型对象包含类型的静态字段和方法,当类访问静态方法静态字段,实例调用方法时就会去类型对象中查找静 ...