课程列表页分析

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. ASP/SQL 注入天书

    引言 随着 B/S 模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于这个行业的入门门槛不高,程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候,没有对用户输入数据 ...

  2. cnBlogs博客推荐

      数据结构和算法若可以称为为编程的细胞结构,那设计模式就是编程的灵魂气脉. 一个从是编程的微观演绎,一个是编程的宏观设计.这个从技术和艺术的结合体,毫无疑问是在世界末日之前的很伟大的一项发明. 设计 ...

  3. 很好用的php在线调试工具

    什么叫在线调试?就是在线上生产环境进行调试,假设有一天某个用户报某个页面某个数据怎么不对啊,看来线上出BUG了,于是你要迅速找出原因,首先看日志,可是悲剧的没有足够的日志让你确定线上BUG的原因,也许 ...

  4. cxGrid使用汇总4

    1.     CxGrid汇总功能 ① OptionsView-Footer设置为True,显示页脚   ② CxGrid的Summary选项卡定义要汇总的列和字段名及汇总方式,Footer选项卡定义 ...

  5. Android 线程与主线程

    网络连接需要时间.Web服务器可能需要1~2秒的时间来响应,文件下载则耗时更久.考虑到这个因素,Android禁止任何主线程网络连接行为.即使强行为之,Android也会抛出NetworkOnMain ...

  6. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  7. laravel with 渴求式加载指定字段

    在使用 Laravel 的关联查询中,我们经常使用 with 方法来避免 N+1 查询,但是 with 会将目标关联的所有字段全部查询出来,对于有强迫症的我们来说,当然是不允许的. 这时候我们可以使用 ...

  8. os.walk的用法

    import os path = 'C:\\aa' for root,dirs,files in os.walk(path): print("Root=",root,'dirs=' ...

  9. 微信小游戏 修改appid

    微信开发者工具中,当你使用一个公众号开发一个项目,有需求切换到另外一个公众号继续开发时,需要修改appid. 修改微信小游戏 project.config.json 文件的appid

  10. 【CF865C】Gotta Go Fast 二分+期望DP

    [CF865C]Gotta Go Fast 题意:有n个关卡需要依次通过,第i关有pi的概率要花ai时间通过,有1-pi的概率要花bi时间通过,你的目标是花费不超过m的时间通关,每一关开始时你都可以选 ...