一. 分析頁面
1.頁面分析
本項(xiàng)目由5個(gè)模塊組成分別是：news眼刃、course、doc胖腾、user、admin瘪松，按照django的風(fēng)格咸作，在前面創(chuàng)建的模板文件夾templates下，分別創(chuàng)建以app名命名的文件夾news宵睦，course记罚，doc，user状飞，admin毫胜，用于存放每個(gè)應(yīng)用的模板文件。在前面創(chuàng)建的靜態(tài)文件夾static下诬辈，也分別創(chuàng)建js，css荐吉，images焙糟，font等文件夾用來存放靜態(tài)文件。
本章先創(chuàng)建news样屠、course doc user 為例子：
01.jpg
2.分析模板頁面
觀察提供靜態(tài)模板頁面穿撮，找出公共部分，然后抽取作為基礎(chǔ)模板（base.html）痪欲。
02.jpg
經(jīng)過多次對比悦穿，發(fā)現(xiàn)提供的模板布局為，頭部導(dǎo)航业踢，中間內(nèi)容栗柒，右邊側(cè)欄，和尾部頁腳知举。
其中除了中間內(nèi)容的布局有所差異瞬沦，其他三個(gè)部分的布局都沒有改變太伊，
我們可以將這三個(gè)部分（頭部導(dǎo)航，中間內(nèi)容逛钻，右邊側(cè)欄）抽出來作為base模板僚焦。
二.模板抽取
首先提供的模板靜態(tài)文件先復(fù)制進(jìn)static文件下相應(yīng)的文件夾
css、images 曙痘、js 等文件夾
1.base模板抽取
提取頭部導(dǎo)航芳悲，尾部頁腳，和右邊的側(cè)欄边坤，在base目錄下創(chuàng)建base.html
03.jpg
在模板上面建議多做幾個(gè)繼承接口（
{% block 接口名字 %} {% endblock 接口名字%}）增加接口名字是為了更好區(qū)分代碼區(qū)域名扛，正所謂一個(gè)蘿卜一個(gè)坑。
截圖如下：
04.jpg
05.jpg
base.html 代碼如下：
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- title model start -->
<title>{% block title %}{% endblock %}</title>
<!-- title model end -->
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" >
<!-- css model start -->
{% block link %}
{% endblock %}
<!-- css model end -->
</head>
<body>
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
<li><a href={% url 'news:index' %}>首頁</a></li>
<li><a href={% url 'course:index' %}>在線課堂</a></li>
<li><a href={% url 'doc:index' %}>下載文檔</a></li>
<li><a href="search.html">搜索</a></li>
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
<div>
<i class="PyWhich py-user"></i>
<span>
<a href={% url 'user:login' %} class="login">登錄</a> / <a href={% url 'user:register' %}
class="reg">注冊</a>
</span>
</div>
<div class="author hide">
<i class="PyWhich py-user"></i>
<span>qwertyui</span>
<ul class="author-menu">
<li><a href="javascript:void(0);">后臺管理</a></li>
<li><a href="javascript:void(0);">退出登錄</a></li>
</ul>
</div>
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main model start -->
{% block main_start %}
<main id="main">
<div class="w1200 clearfix">
<!-- main-contain model start -->
{% block main_contain %}
{% endblock main_contain %}
<!-- main-contain model end -->
<!-- side model start -->
{% block side %}
<aside class="side">
<div class="side-activities">
<h3 class="activities-title">在線課堂<a href="javascript:void(0)">更多</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="{% static 'images/english.jpg' %}" alt="title">
</a>
<p class="activities-tips">對話國外小姐姐</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">報(bào)名中</span>
<span class="active-title"><a
> Django 項(xiàng)目班</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">已結(jié)束</span>
<span class="active-title"><a
>Python入門基礎(chǔ)班</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">關(guān)注我</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i
class="PyWhich py-GitHub"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>XinLan</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>XinLan</a>
</li>
</ul>
<div class="side-attention-qr">
<p>掃碼關(guān)注</p>
</div>
</div>
<!-- hot news model start -->
{% block hotnews %}
<div class="side-hot-recommend">
<h3 class="hot-recommend">熱門推薦</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="{% static 'images/python_web.jpg' %}"
alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django調(diào)試工具django-debug-toolbar安裝使用教程</p>
<div class="hot-news-other clearfix">
<span class="news-type">python框架</span>
<!-- 自帶的 -->
<time class="news-pub-time">11月11日</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div>
{% endblock hotnews %}
<!-- hot news model start -->
</aside>
{% endblock side %}
<!-- side model end -->
</div>
</main>
{% endblock main_start %}
<!-- main model end -->
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">關(guān)于Python</a> |
<a href="javascript:void(0)">我就是我</a> |
<a href="javascript:void(0)">人生苦短</a> |
<a href="javascript:void(0)">我用Python</a>
</span>
<span class="about-me">關(guān)于我: <i class="PyWhich py-wechat"></i> XinLan</span>
</p>
<p class="bottom-content">
<span>地址： xxxx</span>
<span>聯(lián)系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小時(shí)在線)</span>
</p>
</div>
<p class="copyright-desc">
Copyright © 2008 - 2018 xxx有限公司. All Rights Reserved
</p>
</div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src={% static 'js/base/common.js'%}></script>
<!-- script model start -->
{% block script %}
{% endblock script %}
<!-- script model end -->
</body>
</html>
2.doc模塊以及docDownload.html:
截圖如下：
09.jpg
08.jpg
10.jpg
docDownload.html 代碼如下：
{% extends 'base/base.html' %}
{% load static %}
{% block title %}下載文檔{% endblock title %}
{% block link %}
<link rel="stylesheet" href={% static 'css/doc/docDownload.css' %}>
<script>
pageIndex=2
</script>
{% endblock link %}
{% block main_contain %}
<div class="main-contain ">
<div class="banner">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802845035,3786939119&fm=26&gp=0.jpg"
alt="">
</div>
<div class="pay-doc-contain">
<ul class="pay-list">
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="d-contain">
<p class="doc-title">python cookbook 3.0 教程</p>
<p class="doc-desc">強(qiáng)烈推薦的python 教程惩嘉。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下載</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">流暢的Python</p>
<p class="pay-desc">【本書特色】
本書由奮戰(zhàn)在Python開發(fā)一線近20年的Luciano Ramalho執(zhí)筆罢洲，Victor Stinner、Alex
Martelli等Python大咖擔(dān)綱技術(shù)審稿人文黎，從語言設(shè)計(jì)層面剖析編程細(xì)節(jié)惹苗，兼顧Python 3和Python
2，告訴你Python中不親自動手實(shí)踐就無法理解的語言陷阱成因和解決之道耸峭，教你寫出風(fēng)格地道的Python代碼桩蓉。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下載</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">深入Flask</p>
<p class="pay-desc">深入Flask，強(qiáng)烈推薦劳闹！</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下載</a>
</div>
</li>
</ul>
</div>
</div>
{% endblock main_contain %}
{% block script %}
{% endblock script %}
其他頁面如此類推院究，，最終成果截圖
11.jpg
三. 最后別忘記推送到 碼云
$ git add .
$ git commit -m 'update projects'
$ git push origin master
