[py][mx]django模板繼承-課程列表頁
阿新 • • 發佈：2018-02-04
-h rip body from load list title ctype register
課程列表頁分析
先分析下
縱觀頁面,頁頭頁腳都一樣. 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模板繼承-課程列表頁