文章目录

  • 一、模板抽取分析
  • 二、模板抽取
    • 1. base.html挖坑
      • 1. head挖坑
      • 2. body挖坑
    • 2. app应用templates填坑
      • 1. users
      • 2. news
      • 3. docs（待写）
      • 4. course（待写）

配置好了项目基本配置后，下一步就是进行模板抽取了。由于基本的html和css文件都是写好的，因此只需要进行后端的逻辑代码和JS逻辑代码编写就行，其他html和css进行必要的补充。

一、模板抽取分析

模板抽取分析：

  1. 以base.html作为所有html的基本模板
  2. 将base.html分为3个部分：head和body 2个部分，其中：
    1. head分为title和css 2个块
    2. body分为header、main、footer、script 4个部分，其中
      1. header分为：image_logo、menu、login-box 3块
      2. main分为：左main_contain和右side 2块，其中：
        1. 左main_contain分为：banner、hot_news、news_tags、news_contain 4块
        2. 右side分为：online_class、follow_me、hot_recommend 3块
      3. footer分为：footer 1块
      4. script分为：script 1块
  3. 对app应用templates里面的html进行继承base.html进行填坑
    1. users：register.html、login.html
    2. news：index.html、news_detail.html、search.html
    3. docs：docDownload.html
    4. course：course.html、course_detail.html

二、模板抽取

1. base.html挖坑

从上面分析首先对base.html挖坑，根据对应的将坑挖好。

1. head挖坑

  1. title

     <title>{% block title %} 页面标题 {% endblock %}</title>

  2. css

    <link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/news/index.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% block css %}
{% endblock %}
2. body挖坑

  1. header

    • image_logo

      {% block image_logo %}
<h1 class="logo"><a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
{% endblock %}

    • menu

      {% block menu %}
<nav class="nav"><ul class="menu"><li><a href="javascript:void(0);">首页</a></li><li><a href="javascript:void(0);">课堂</a></li><li><a href="javascript:void(0);">下载文档</a></li><li><a href="sjavascript:void(0);
</nav>
{% endblock %}

    • login_box

      {% block login_box %}
<div class="login-box"><div><i class="PyWhich py-user"></i><span><a href="javascript:void(0);" class="login">登录</a> / <a href="javascript:void(0);"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>
{% endblock %}

  2. main

    • main_contain

      • banner

        {% block banner %}
<div class="banner"><ul class="pic"><!--淡入淡出banner--><li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../images/python_gui.jpg" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/linux.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>
{% endblock %}

      • hot_news

        {% block hot_news %}
<ul class="recommend-news"><li><a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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>
{% endblock %}

      • news_tags

        {% block news_tags %}
<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>
{% endblock %}

      • news_contain

        {% block news_contain %}
<div class="news-contain"><ul class="news-list"><li class="news-item"><a href="javascript:void(0)" class="news-thumbnail"target="_blank"><img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"title="linux查找文件或目录命令"></a><div class="news-content"><h4 class="news-title"><ahref="#">linux查找文件或目录命令</a></h4><p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -namedirname 查找目录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="javascript:void(0)" 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"><ahref="javascript:void(0)">linux下svn命令的使用</a></h4><p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkoutsvn://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="javascript:void(0)" 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"><ahref="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="javascript:void(0)" class="news-thumbnail"target="_blank"><img src="../../static/images/linux.jpg" alt=".htaccess配置详解"title=".htaccess配置详解"></a><div class="news-content"><h4 class="news-title"><ahref="javascript:void(0)">.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="javascript:void(0)" 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"><ahref="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>
<a href="javascript:void(0);" class="btn-more">加载更多</a>
{% endblock %}

    • side

      • online_class

        {% block online_class %}
<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="../images/english.jpg" alt="title"></a><p class="activities-tips">xxxx</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"><ahref="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"><ahref="javascript:void(0);">Python入门基础班</a></span></a></li></ul>
</div>
{% endblock %}

      • follow_me

        {% block follow_me %}
<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>Taka</a></li><li><a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"style="color:rgb(0, 108, 226);"></i>Taka</a></li><li><a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"style="color:rgb(245,92,110);"></i>Taka</a></li></ul><div class="side-attention-qr"><p>扫码关注</p></div>
</div>
{% endblock %}

      • hot_recommend

        {% 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 %}

  3. footer

    {% block footer %}
<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> Taka</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 - 2019 xxx有限公司. All Rights Reserved</p></div>
</footer>
{% endblock %}

  4. script

    <script src="{% static 'js/users/jQuery_3.3.1.js' %}"></script>
<script src="{% static 'js/commons.js' %}"></script>
<script src="{%  static 'js/index.js' %}"></script>
{% block script %}
{% endblock %}

base.html挖坑集合为：

{% load staticfiles %}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>{% block title %} IndexPage {% endblock %}</title><link rel="stylesheet" href="{% static 'css/base/reset.css' %}"><link rel="stylesheet" href="{% static 'css/base/common.css' %}"><link rel="stylesheet" href="{% static 'css/news/index.css' %}"><link rel="stylesheet" href="{% static 'css/base/side.css' %}"><link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">{% block css %}{% endblock %}</head><body><!-- header start -->{% block header %}<header id="header"><div class="mw1200 header-contain clearfix"><!-- logo start -->{% block image_logo %}<h1 class="logo"><a href="javascript:void(0);" class="logo-title">Python</a></h1>{% endblock %}<!-- logo end --><!-- nav start -->{% block menu %}<nav class="nav"><ul class="menu"><li><a href="index.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>{% endblock %}<!-- nav end --><!-- login start -->{% block login_box %}<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 -->{% endblock %}</div></header>{% endblock %}<!-- header end --><!-- main start -->{% block main %}<main id="main"><div class="w1200 clearfix"><!-- main-contain start  --><div class="main-contain"><!-- banner start -->{% block banner %}<div class="banner"><ul class="pic"><!--淡入淡出banner--><li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li><li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" 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/linux.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>{% endblock %}<!-- banner end --><!-- content start -->{% block content%}<div class="content"><!-- recommend-news start -->{% block hot_news %}<ul class="recommend-news"><li><a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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>{% endblock %}<!-- recommend-news end --><!--  news-nav start-->{% block news_tags %}<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>{% endblock %}<!--  news-nav end --><!-- news-contain start -->{% block news_contain %}<div class="news-contain"><ul class="news-list"><li class="news-item"><a href="javascript:void(0)" class="news-thumbnail"target="_blank"><img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"title="linux查找文件或目录命令"></a><div class="news-content"><h4 class="news-title"><ahref="#">linux查找文件或目录命令</a></h4><p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -namedirname 查找目录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="javascript:void(0)" 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"><ahref="javascript:void(0)">linux下svn命令的使用</a></h4><p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkoutsvn://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="javascript:void(0)" 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"><ahref="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="javascript:void(0)" class="news-thumbnail"target="_blank"><img src="../../static/images/linux.jpg" alt=".htaccess配置详解"title=".htaccess配置详解"></a><div class="news-content"><h4 class="news-title"><ahref="javascript:void(0)">.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="javascript:void(0)" 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"><ahref="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><a href="javascript:void(0);" class="btn-more">加载更多</a><!-- btn-more end -->{% endblock %}</div>{% endblock %}<!-- content end --></div><!-- main-contain  end --><!-- side start -->{% block aside %}<aside class="side">{% block online_class %}<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="../images/english.jpg" alt="title"></a><p class="activities-tips">xxx</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"><ahref="javascript:void(0);"> Django 项目班</a></span></a></li><li><a href="javascript:void(0);" target="_blank"><span class="active-status active-end">已结束</span><span class="active-title"><ahref="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span></a></li></ul></div>{% endblock %}{% block follow_me %}<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>Taka</a></li><li><a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"style="color:rgb(0, 108, 226);"></i>Taka</a></li><li><a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"style="color:rgb(245,92,110);"></i>Taka</a></li></ul><div class="side-attention-qr"><p>扫码关注</p></div></div>{% endblock %}{% 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 %}</aside>{% endblock %}<!-- side end --></div></main>{% endblock %}<!-- main end --><!-- footer start -->{% block footer %}<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> Taka</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 - 2019 xxx有限公司. All Rights Reserved</p></div></footer>{% endblock %}<!-- footer end --><script src="{% static 'js/users/jQuery_3.3.1.js' %}"></script><script src="{% static 'js/commons.js' %}"></script><script src="{%  static 'js/index.js' %}"></script>{% block script %}{% endblock %}</body>
</html>

2. app应用templates填坑

1. users

  1. register.html 注册页面

    {% extends 'base/base.html' %}
{% load staticfiles %}
{% block title %}
注册
{% endblock %}{% block css %}
<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock %}{% block main %}
<main id="container"><div class="register-contain"><div class="top-contain"><h4 class="please-register">请注册</h4><a href="#" class="login">立即登录 &gt;</a></div><form action="" method="post" class="form-contain">{% csrf_token %}<div class="form-item"><input type="text" placeholder="请输入用户名" id="user_name" name="username" class="form-control"autocomplete="off" ></div><div class="form-item"><input type="password" placeholder="请输入密码" id="pwd" name="password" class="form-control"></div><div class="form-item"><input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control"></div><div class="form-item"><input type="tel" placeholder="请输入手机号" id="mobile" name="telephone" class="form-control" autocomplete="off" ></div><div class="form-item"><input type="text" placeholder="请输入图形验证码" id="input_captcha" name="captcha_graph" class="form-captcha"><a href="#" class="captcha-graph-img"><img src="" alt="验证码" title="点击刷新"></a></div><div class="form-item"><input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" id="input_smscode" autocomplete="off"><a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a></div><div class="form-item"><input type="submit" value="立即注册" class="register-btn"></div></form></div>
</main>
{% endblock %}{% block script %}
<script src="{% static 'js/users/register.js' %}"></script>
{% endblock %}

  2. login.html 登录页面

    {% extends "base/base.html" %}
{% load staticfiles %}
{% block title %}
登录
{% endblock %}{% block link %}
<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock %}{% block main %}
<!-- container start -->
<main id="container"><div class="login-contain"><div class="top-contain"><h4 class="please-login">请登录</h4><a href="javascript:void(0);" class="register">立即注册 &gt;</a></div><form action="" method="post" class="form-contain"><div class="form-item"><input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off"></div><div class="form-item"><input type="password" placeholder="请输入密码" name="password" class="form-control"></div><div class="form-item clearfix"><label><input type="checkbox" name="remember"><span>记住我</span></label><a href="javascript:void(0);" class="forget-password">忘记密码?</a></div><div class="form-login"><input type="submit" value="登录" class="login-btn"></div></form></div>
</main>
<!-- container end -->
{% endblock %}{% block script %}
<script src="{% static 'js/users/login.js' %}"></script>
{% endblock %}

  3. forget.html 修改密码页面(待写)

2. news

  1. index.html

    {% extends "base/base.html" %}
{% load staticfiles %}
{% block  title %}
<title>文章</title>
{% endblock %}{% block banner %}
{% endblock %}{% block news_tags %}
{% endblock %}{% block hot_news %}
{% endblock %}{% block news_contain %}
{% endblock %}{% block script %}
<script src="{% static 'js/news/index.js' %}"></script>
<script src="{% static 'js/news/banner.js' %}"></script>
{% endblock %}

  2. news_detail.html

    {% extends 'base/base.html' %}
{% load staticfiles %}{% block title %}<title>新闻详情</title>
{% endblock %}{% block link %}<link rel="stylesheet" href="{% static 'css/news/news-detail.css' %}">
{% endblock %}{% block main %}
{% endblock %}{% block script %}
{% endblock %}

  3. search.html（待写）

3. docs（待写）
4. course（待写）

Django blog项目《四》：模板抽取相关推荐

  1. Django blog项目《二十五》：项目优化《1》使用celery异步任务和定时任务

    celery异步异步任务处理 一.celery简介 celery 官方文档英文版:http://docs.celeryproject.org/en/latest/index.html 组件 任务Tas ...

  2. Django入门项目

    刘江的博客 个人博客和教程网站:www.liujiangblog.com欢迎访问! </div><!--end: blogTitle 博客的标题和副标题 --> <div ...

  3. python后台架构Django教程——项目配置setting

    全栈工程师开发手册 (作者:栾鹏) 本文衔接至python后台架构Django开发全解. 有其他问题请先阅读:http://blog.csdn.net/luanpeng825485697/articl ...

  4. python websocket django vue_Python Django Vue 项目创建过程详解

    1.创建项目 打开pycharm 终端,输入如下,创建项目 # 进入pycharm 项目目录下 cd pyWeb django-admin startproject pyweb_dome # pywe ...

  5. Django启航（四）Django配置数据库

    文章目录 Django启航(四)Django配置数据库与测试 1. 基础配置 1.1 打开之前的项目 1.2 安装pymysql 1.3 配置settings文件 1.4 引入pymysql 2. 测 ...

  6. Django Python:完整的BUNDLE + Django真实项目2021

    Django和python Bundle:从学习python的所有基础知识到高级python再到UI设计TKINTER,然后是Django 你会学到: 学习编程的基础知识 学习Python编程语言 学 ...

  7. Django（10）-模板层的变量和标签

    Django(1)-简介 Django(2)-创建项目及默认项目目录结构介绍 Django(3)-配置文件详解 Django(4)-URL和视图 Django(5)-路由配置实例 Django(6)- ...

  8. html消防产品模版,消防设备项目建议书模板

    消防设备项目建议书模板 消防安全,责任重于泰山.下面是小编给大家整理收集的关于消防设备项目建议书模板,希望对大家有帮助. 第一章 总论 一.消防设备项目背景项目名称 二.承办单位概况(新建项目指筹建单 ...

  9. 机器学习比赛、项目之模板

    玩转模板 引言 1.分析问题 2.数据分析 2.1 理解数据 2.2 EDA-数据探索性分析 3.数据清洗 4.特征工程 引言 \quad \quad机器学习和深度学习一旦入坑,学习知识最快的方式就是 ...

最新文章

  1. 阿里云ONS而微软Azure Service Bus体系结构和功能比较
  2. Shell 变量及函数讲解 [2]
  3. 强连通图------（1）通过两次DFS或BFS判断是不是强连通图
  4. Windows版JMeter下载安装
  5. 2020 智能零售领域最具商业合作价值企业盘点
  6. 什么是TOC （http://hi.baidu.com/qq740566/blog/index/18）
  7. ES mapping
  8. 贴片电阻封装规格及阻值标注方法
  9. Segmentation Fault错误原因总结
  10. Hive数据导出为csv、tsv文件的几种方法
  11. 利用python爬取网易云歌手top50歌曲歌词
  12. python实现地理位置类数据爬取与geohash应用初探
  13. SMB2协议特性之oplock与lease(下）
  14. 通知公众平台php,微信公众平台开发模板消息
  15. Centos yum安装软件报软件包下载失败
  16. 适合计算机社团活动的游戏,趣味游戏社团活动工作总结
  17. 使用DQL命令查询数据(二)
  18. 基于STM32F4的CANopen快速SDO通信（超级详细）
  19. 吉林大学超星MOOC学习通高级语言程序设计 C++ 实验02 分支与循环程序设计（2021级）（4）
  20. SQLserver Distinct去重复的数据

热门文章

  1. 真香！看了才知道Linux 原来是这么管理内存的
  2. 怎样把扫描件转换成pdf工具
  3. 3M 中国选择LMS实验解决方案帮助汽车制造商降低车内噪声
  4. hihocoder#1602 : 本质不同的回文子串的数量（manacher+Hash）
  5. 阿韦的2018年总结：我终于要出书了 | 掘金年度征文
  6. 通证经济学习与探索阶段性总结（一）
  7. 什么是 API（应用程序接口）？
  8. 异步电机开环变频变压调速
  9. Nokia X跑分成绩曝光，接近小米1S
  10. Java图片识别技术原理