為什麼要抽模板,因為這樣能夠復用代碼,減少代碼量,需要原代碼時就不需要修改,也不需要添加; 如果不同,就只需要單獨修改不一樣的地方就行 : 多挖坑,少代碼,這就是抽模板的精髓,挖坑就是({% block xxx %}需要改變的代碼{% endblock %}) 靜態頁面抽取模板一、分析靜態頁面 1 ...

為什麼要抽模板,因為這樣能夠復用代碼,減少代碼量,需要原代碼時就不需要修改,也不需要添加; 如果不同,就只需要單獨修改不一樣的地方就行 : 多挖坑,少代碼,這就是抽模板的精髓,挖坑就是({% block xxx %}需要改變的代碼{% endblock %})

靜態頁面抽取模板

一、分析靜態頁面

1.靜態vs動態

2.本次項目頁面分析

本項目由5個模塊組成分別是：news、course、doc、user、admin，按照django的風格，在前面創建的模板文件夾templates下，分別創建以app名命名的文件夾news，course，doc，user，admin，用於存放每個應用的模板文件。在前面創建的靜態文件夾statc下，也分別創建js，css，images，font等文件夾用來存放靜態文件。

3.分析模板頁面

觀察提供靜態模板頁面，找出模板的公共部分，然後抽取作為基礎模板。

經過觀察，發現提供的模板佈局為，頂部導航，中間內容，右邊側欄，和底部頁腳。其中除了中間內容的佈局有所差異，其他三個部分的佈局都沒有改變，我們可以將這三個部分抽出來作為base模板。

二、模板抽取

首先提供的模板靜態文件先複製進static文件下相應的文件夾

1.base模板抽取

根據上面的分析提取頂部導航，底部頁腳，和側欄，在base目錄下創建base.html代碼如下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <!-- title 模板 -->
  <title>{% block title %}{% endblock title %}</title>
    <!-- title 模板 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" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
    <!-- 頁面css 模板 -->
    {% block link %}
    {% endblock link %}
    <!-- 頁面css 模板 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 class="active"><a href="base.html">首頁</a></li>
        <li><a href="../course/course.html">線上課堂</a></li>
        <li><a href="../doc/docDownload.html">下載文檔</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="../users/login.html" class="login">登錄</a> / <a href="../users/register.html"
                                                                          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 start 模板 -->
{% block main_start %}
<main id="main">
  <div class="w1200 clearfix">
    <!-- main-contain 模板  -->
      {% block main_contain %}

      {% endblock main_contain %}
    <!-- main-contain  end -->

    <!-- side 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">報名中</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2432"> Django 項目班</a></span>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-end">已結束</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2321">Python入門基礎班</a></span>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="side-attention clearfix">
              <h3 class="attention-title">關註我</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>掃碼關註</p>
              </div>
          </div>
            <!-- 熱門推薦 模板  -->
          {% block hot_recommend %}
          <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調試工具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 hot_recommend %}
            <!-- 熱門推薦 模板 end -->

      </aside>
        {% endblock side %}
    <!-- side end -->
  </div>
</main>
{% endblock main_start %}
<!-- main 內容模板 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)">關於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">關於我: <i class="PyWhich py-wechat"></i> XinLan</span>
            </p>
            <p class="bottom-content">
                <span>地址： xxxx</span>
                <span>聯繫方式: <a href="tel:400-1567-315">400-1567-315</a> (24小時線上)</span>
            </p>
        </div>
        <p class="copyright-desc">
            Copyright &copy; 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>
<!-- 自定義js模板 -->
{% block script %}
{% endblock script %}
<!-- 自定義js模板 end -->
</body>
</html>

註意靜態文件的引用。

2.news模塊index頁面

news/index.html代碼：

{% extends 'base/base.html' %}
{% load static %}

{% block title %}首頁{% endblock title %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/news/index.css' %}">
{% endblock link %}

{% block main_contain %}
<div class="main-contain">
      <!-- banner start -->
        <div class="banner">
            <ul class="pic">
                <!--淡入淡出banner-->


                <li><a href="javascript:void(0);"><img src="{% static 'images/linux.jpg' %}" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="{% static 'images/python_gui.jpg' %}" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="{% static 'images/python_function.jpg' %}" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="{% static 'images/python_advanced.jpg' %}" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="{% static 'images/jichujiaochen.jpeg' %}" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="{% static 'images/python_web.jpg' %}" alt="test"></a></li>


            </ul>
            <a href="javascript:void(0);" class="btn prev">
                <i class="PyWhich py-arrow-left"></i></a>
            <a href="javascript:void(0);" class="btn next">
                <i class="PyWhich py-arrow-right"></i></a>
            <ul class="tab">
                <!-- 按鈕數量必須和圖片一致 -->


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


            </ul>
        </div>
      <!-- banner end -->

      <!-- content start -->
      <div class="content">
        <!-- recommend-news start -->
          <ul class="recommend-news">
              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="{% static 'images/python_gui.jpg' %}" alt="title">
                      </div>
                      <p class="info">Python GUI 教程 25行代碼寫一個小鬧鐘</p>
                  </a>
              </li>

              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="{% static 'images/python_advanced.jpg' %}" alt="title">
                      </div>
                      <p class="info">python高性能編程方法一</p>
                  </a>
              </li>

              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="{% static 'images/jichujiaochen.jpeg' %}" alt="title">
                      </div>
                      <p class="info">python基礎 split 和 join函數比較</p>
                  </a>
              </li>
          </ul>
        <!-- recommend-news end -->

        <!--  news-nav start-->
          <nav class="news-nav">
              <ul class="clearfix">
                  <li class="active"><a href="javascript:void(0)">最新資訊</a></li>

                  <li><a href="javascript:void(0)" data-id="1">python框架</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="2">Python基礎</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="3">Python高級</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="4">Python函數</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="6">Linux教程</a>
                  </li>

              </ul>
          </nav>
        <!--  news-nav end -->

        <!-- news-contain start -->
          <div class="news-contain">
              <ul class="news-list">

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="linux查找文件或目錄命令"
                               title="linux查找文件或目錄命令">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="#">linux查找文件或目錄命令</a>
                          </h4>
                          <p class="news-details">linux查找文件或目錄命令，前提：知道文件或者目錄的具體名字，例如：sphinx.conffind 查找find / -name
                              dirname 查找目錄find -name...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="linux下svn命令的使用"
                               title="linux下svn命令的使用">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
                          </h4>
                          <p class="news-details">1、將文件checkout到本地目錄svn checkout path（path是伺服器上的目錄） 例如：svn checkout
                              svn://192.168.1.1/pro/domain 簡寫：svn co2、往版本庫中添加新的文件 svn addfile 例如：svn add te...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="實現linux和windows文件傳輸"
                               title="實現linux和windows文件傳輸">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432/886">實現linux和windows文件傳輸</a>
                          </h4>
                          <p class="news-details">
                              其實這個題目有點大，這裡介紹的只是linux和windows文件傳輸中的一種，但是這種方法卻非常實用，那就是：ZModem協議具體是linux命令是：rz...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt=".htaccess配置詳解"
                               title=".htaccess配置詳解">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">.htaccess配置詳解</a>
                          </h4>
                          <p class="news-details">　　.htaccess文件設置基礎教程 如果你設置好了比如常用的404頁面 301重定向 頁面還有500頁面等會設置了
                              無非對你的seo技術有很大幫助那麼 .htaccess文件到底怎麼設置呢　　- .htaccess 文件(或者&quot;分散式...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="使用nohup命令讓linux程式後臺運行"
                               title="使用nohup命令讓linux程式後臺運行">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">使用nohup命令讓linux程式後臺運行</a>
                          </h4>
                          <p class="news-details">使用nohup讓程式永遠後臺運行Unix/Linux下一般比如想讓某個程式在後臺運行，很多都是使用 &amp;
                              在程式結尾來讓程式自動運行。比如我們要運行mysql在後臺：/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

              </ul>
          </div>
        <!-- news-contain end -->

        <!-- btn-more start -->
        <a href="javascript:void(0);" class="btn-more">載入更多</a>
        <!-- btn-more end -->
      </div>
      <!-- content end -->
    </div>
{% endblock main_contain %}

{% block script %}
    <script src="{% static 'js/news/index.js' %}"></script>
{% endblock script %}

news/views.py代碼(視圖代碼)

from django.shortcuts import render


def index(request):
    return render(request, 'news/index.html')

news/urls.py代碼(路由配置)

from django.urls import path
from . import views
# url的命名空間
app_name = 'news'

urlpatterns = [
    path('', views.index, name='index'),    # 將這條路由命名為index
]

這會還得在主項目下配置分路由代碼(根urls.py代碼)

from django.urls import path, include

urlpatterns = [
　　# 配置分路由用include
    path('', include('news.urls'))
]

Django項目: 2.模板抽取