为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% 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. error while loading shared libraries: lib*.so: cannot open shared object file: No such file or directory

    动态库的搜索路径搜索的先后顺序是: 1.编译目标代码时指定的动态库搜索路径; 2.环境变量LD_LIBRARY_PATH指定的动态库搜索路径: 比如export LD_LIBRARY_PATH=/us ...

  2. MQTT--笔记

    一.MQTT协议基本介绍 1.1.MQTT是什么? MQTT,全称为Message Queue Telemetry Transport.在1999年,由IBM的Andy Stanford-Clark和 ...

  3. c++ strlen() 函数

    { char *buf = new char[1024]; ZeroMemory(buf,1024) for(int i = 0; i < 1023; i++) { buf[i] = '5'; ...

  4. bsgs+求数列通项——bzoj3122（进阶指南模板该进）

    /* 已知递推数列 F[i]=a*F[i-1]+b (%c) 解方程F[x]=t an+1 = b*an + c an+1 + c/(b-1) = b(an + c/(b-1)) an+1 + c/( ...

  5. LUOGU P4042 [AHOI2014/JSOI2014]骑士游戏 (spfa+dp)

    传送门 解题思路 首先设\(f[x]\)表示消灭\(x\)的最小花费,那么转移方程就是 \(f[x]=min(f[x],\sum f[son[x]] +s[x])\),如果这个转移是一个有向无环图,那 ...

  6. csp-s模拟测试87

    csp-s模拟测试87 考场状态还可以$T1$我当时以为我秒切,$T2$确认自己思路不对后毅然决然码上,$T3$暴力挂了太可惜了. 03:01:28 03:16:07 03:11:38 140 03: ...

  7. hdu多校第二场 1010 （hdu6600）Just Skip This Problem

    题意: 给你一个数x,允许你多次询问yi,然后回答你x xor yi 是否等于yi,询问尽量少的次数以保证能求出xi是几,求出这样询问次数最少的询问方案数. 结果mod1e6+3 题解: 队友赛时很快 ...

  8. linux大神

    http://blog.csdn.net/skykingf/article/category/780616

  9. 2017/7/26 SCJP英语学习

    1 Declarations and Access Control ............... 1 Java Refresher . . . . . . . . . . . . . . . . . ...

  10. SQL SERVER 备份数据库时候错误处理

    当备份数据库时候出现如下错误时候 只需要删除备份目标就行了