Django blog项目《四》：模板抽取

最新推荐文章于 2021-04-02 05:20:14 发布

山河长不高吖

最新推荐文章于 2021-04-02 05:20:14 发布

阅读量297

点赞数 1

分类专栏： Django 框架

本文链接：https://blog.csdn.net/hl120841/article/details/104516007

版权

Django 框架专栏收录该内容

27 篇文章 4 订阅

订阅专栏

文章目录

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

一、模板抽取分析

模板抽取分析：

以base.html作为所有html的基本模板
将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块
对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挖坑

title

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

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挖坑

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

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"><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="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"><a
                                          href="javascript:void(0)">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="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"><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="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"><a
                                          href="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"><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>
<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"><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="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 %}

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

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"><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="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"><a
                                                                  href="javascript:void(0)">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="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"><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="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"><a
                                                                  href="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"><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>
                        <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"><a
                                                                  href="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"><a
                                                                  href="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

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

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

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

2. news

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

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

search.html（待写）

3. docs（待写）

4. course（待写）

山河长不高吖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Django blog项目《四》：模板抽取

文章目录一、模板抽取分析二、模板抽取1. base.html挖坑1. head挖坑2. body挖坑2. app应用templates填坑1. users2. news3. docs（待写）4. course（待写）配置好了项目基本配置后，下一步就是进行模板抽取了。由于基本的html和css文件都是写好的，因此只需要进行后端的逻辑代码和JS逻辑代码编写就行，其他html和css进行必要的补充。...
复制链接

扫一扫

专栏目录