课程列表页分析

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. zip&unzip范例

    范例: zip命令可以用来将文件压缩成为常用的zip格式.unzip命令则用来解压缩zip文件. 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r y ...

  2. Android Studio Error:Connection timed out: connect.解决方案

    遇到了这样的错误: Error:Connection timed out: connect. If you are behind an HTTP proxy, please configure the ...

  3. 时间的类型的相互转换（date/String）及时区的比较

    String ->Date ->String @Test public void date() throws ParseException{ String sdate = "01 ...

  4. 理解proc目录与linux进程、ps命令、netstat命令的关系

    零.proc目录简介 proc目录是虚拟文件系统(VFS)的一种实现,保存了进程信息(pid目录)和一些系统信息. 一.系统的信息 1.cpuinfo和meminfo两个文件 查看CPU和内存相关信息 ...

  5. C语言位操作--判断整数的符号

    关于衡量计算操作的方法: 当为算法统计操作的数量的时候,所有的C运算符被认为是一样的操作.中间过程不被写入随机存储器(RAM)而不被计算,当然,这种操作数的计算方法,只是作为那些接近机器指令和CPU运 ...

  6. iOS － 国际化语言切换

    iOS国际化:如何切换语言   1.国际化就是将标签.提示信息等信息放到资源文件中,随着程序需要的语言提供对应的资源文件.以key/value对存储,每个资源的key值不变,value随着需求改变. ...

  7. VMware虚拟机安装Ubuntu系统英文改中文的方法

    首先点击右上角的这个桌面 1,Change Desktop Background   图片发自简书App 2.到系统设置(System Settings)--- 点击Language Support ...

  8. GlusterFS实战

    预装glusterfs软件包 yum -y install centos-release-gluster37.noarch yum --enablerepo=centos-gluster*-test ...

  9. IIS7.5 配置虚拟目录的经历

    好多网站为了不带上什么端口号所有就建立虚拟目录的试来使用80端口 iis6设置都没有问题可到了7.5碰到了点问题 原来7.5上有个:添加应用程序和添加虚拟目录.还有个转换为应用程序 直接把网站建成虚拟 ...

  10. 视觉slam十四讲开源库安装教程

    目录 前言 1.Eigen线性代数库的安装 2.Sophus李代数库的安装 3.OpenCV计算机视觉库的安装 4.PCL点云库的安装 5.Ceres非线性优化库的安装 6.G2O图优化库的安装 7. ...