为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% 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">--</a> (24小时在线)</span>

            </p>

        </div>

        <p class="copyright-desc">

            Copyright &copy;  -  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="">python框架</a>

                  </li>

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

                  </li>

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

                  </li>

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

                  </li>

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

                  </li>

                  <li><a href="javascript:void(0)" data-id="">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">/ :</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">、将文件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">/ :</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">/ :</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">/ :</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">/ :</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.模板抽取的更多相关文章

  1. Django项目中模板标签及模板的继承与引用【网站中快速布置广告】

    Django项目中模板标签及模板的继承与引用 常见模板标签 {% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环 ...

  2. django项目班笔记-模板抽取

    目录 一.将前端静态文件放置到项目文件目录 二.模板设置 三.将静态文件拖放到项目对应目录 四.检查HTML文件中的应用是否自动更改了 4.1 文件引用没有改变的解决方法 4.2 设置static文件 ...

  3. 潭州课堂25班：Ph201805201 django 项目 第五课 静态页面转为模板 (课堂笔记)

    一.分析静态页面   1.静态vs动态 条目 静态页面 动态页面 网站内容 固定不变 经常变动 浏览器加载速度 更快(无需向服务器发起请求) 更慢 改变网站内容 很难(修改或者创建新的html页面) ...

  4. Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基础文件配置,Web框架的本质,服务器程序和应用程序(wsgiref服务端模块,jinja2模板渲染模块)的使用

    Django---Http协议简述和原理,HTTP请求码,HTTP请求格式和响应格式(重点),Django的安装与使用,Django项目的创建和运行(cmd和pycharm两种模式),Django的基 ...

  5. dya49:django:wsgrief&模板渲染Jinjia2&django的MTV/MVC框架&创建/启动一个django项目

    目录 1.自定义web框架wsgiref版 2.自定义web框架wsgiref版-优化版 3.模板渲染JinJa2 4.MTV和MVC框架 5.django:下载安装&创建启动 自定义web框 ...

  6. Django项目纪要

    开发流程 公司高层 项目立项 | 市场部门 需求分析-->需求分析说明书, 需求规格说明书 | 产品部门 产品原型-->产品 UI 前端 后端 测试 移动端 | |------------ ...

  7. mac osx 上面部署Django项目 apache+mysql+mod_wsgi

    1.安装Xcode command line tools 首先,编译mysql和Homebrew需要用到Xcode command line tools,所以首先安装command line tool ...

  8. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  9. [翻译]在Django项目中添加谷歌统计(Google Analytics)

    原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...

随机推荐

  1. Mysql优化-字段设计

    摘抄并用于自查笔记 1. 对精度有要求decimal float 类型用于表示单精度浮点数值,而double类型用于表示双精度浮点数值,float 和 double 都是浮点型,而 decimal 是 ...

  2. 新知道一个 端对端加密 Signal protocol

    看 socketio Sponsors 列表中的小蓝鸟,发现网站中有使用 x-jquery-tmpl [翻译]WhatsApp 加密概述(技术白皮书) 知道一个叫 Signal 协议 的端对端加密 端 ...

  3. for循环和字典预习

    print("*" *8)for a in range(1,9): print(a,end="")#1-9的奇数print()for a in range(1, ...

  4. 2019亚太内容分发大会，阿里云获CDN领袖奖、技术突破奖

    近日,亚太CDN产业联盟主办的2019亚太内容分发大会在上海召开.本次大会以"5G分发"为主题,集结了CDN领域近千名行业领袖.专家参与.在会上,阿里云斩获“CDN领袖奖”.“技术 ...

  5. expect离线安装

    expect5.45.4.tar.gz和tcl8.4.11-src.tar.gz压缩包请前往以下链接下载: https://download.csdn.net/download/gangzi221/1 ...

  6. csp-s模拟测试60

    csp-s模拟测试60       2019-10-05 RT. 又颓又垃圾. 状态低迷,题都交不上去. 交了也是爆零,垃圾玩家没有什么可说的,就是垃圾. A. 嘟嘟噜 $mlogn$的毒瘤做法. 贴 ...

  7. 2018-2019-2 20175323 实验一《Java开发环境的熟悉》实验报告

    java开发环境的熟悉-1 java开发环境的熟悉-2 下载IDEA和破解的过程我参考了https://blog.csdn.net/shengshengshiwo/article/details/79 ...

  8. (2)python tkinter-按钮.标签.文本框、输入框

    按钮 无功能按钮 Button的text属性显示按钮上的文本 tkinter.Button(form, text='hello button').pack() 无论怎么变幻窗体大小,永远都在窗体的最上 ...

  9. iOS开发线程之NSThread

    1.初始化 - (instancetype)init API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0)) NS_DESIGNAT ...

  10. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...