Django项目: 2.模板抽取

程序员文章站 2022-10-04 12:30:58

为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行 : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% block xxx %}需要改变的代码{% endblock %}) 静态页面抽取模板一、分析静态页面 1 ......

为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行 : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% block xxx %}需要改变的代码{% endblock %})

静态页面抽取模板

一、分析静态页面

1.静态vs动态

　　 Django项目: 2.模板抽取

2.本次项目页面分析

本项目由5个模块组成分别是：news、course、doc、user、admin，按照django的风格，在前面创建的模板文件夹templates下，分别创建以app名命名的文件夹news，course，doc，user，admin，用于存放每个应用的模板文件。在前面创建的静态文件夹statc下，也分别创建js，css，images，font等文件夹用来存放静态文件。 Django项目: 2.模板抽取

3.分析模板页面

观察提供静态模板页面，找出模板的公共部分，然后抽取作为基础模板。 Django项目: 2.模板抽取

经过观察，发现提供的模板布局为，顶部导航，中间内容，右边侧栏，和底部页脚。其中除了中间内容的布局有所差异，其他三个部分的布局都没有改变，我们可以将这三个部分抽出来作为base模板。

二、模板抽取

首先提供的模板静态文件先复制进static文件下相应的文件夹

1.base模板抽取

根据上面的分析提取顶部导航，底部页脚，和侧栏，在base目录下创建base.html代码如下：

{% load static %}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
    <!-- title 模板 -->
  <title>{% block title %}{% endblock title %}</title>
    <!-- title 模板 end -->
  <link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
  <link rel="stylesheet" href="{% static 'css/base/common.css' %}">
  <link rel="stylesheet" href="{% static 'css/base/side.css' %}">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
    <!-- 页面css 模板 -->
    {% block link %}
    {% endblock link %}
    <!-- 页面css 模板 end -->
</head>
<body>
<!-- header start -->
<header id="header">
  <div class="mw1200 header-contain clearfix">
    <!-- logo start -->
    <h1 class="logo">
      <a href="javascript:void(0);" class="logo-title">python</a>
    </h1>
    <!-- logo end -->
    <!-- nav start -->
    <nav class="nav">
      <ul class="menu">
        <li class="active"><a href="base.html">首页</a></li>
        <li><a href="../course/course.html">在线课堂</a></li>
        <li><a href="../doc/docdownload.html">下载文档</a></li>
        <li><a href="search.html">搜索</a></li>
      </ul>
    </nav>
    <!-- nav end -->
    <!-- login start -->
      <div class="login-box">
          <div>
              <i class="pywhich py-user"></i>
              <span>
                  <a href="../users/login.html" class="login">登录</a> / <a href="../users/register.html"
                                                                          class="reg">注册</a>
              </span>
          </div>
          <div class="author hide">
              <i class="pywhich py-user"></i>
              <span>qwertyui</span>
              <ul class="author-menu">
                  <li><a href="javascript:void(0);">后台管理</a></li>
                  <li><a href="javascript:void(0);">退出登录</a></li>
              </ul>
          </div>
      </div>
    <!-- login end -->
  </div>
</header>
<!-- header end -->

<!-- main start 模板 -->
{% block main_start %}
<main id="main">
  <div class="w1200 clearfix">
    <!-- main-contain 模板  -->
      {% block main_contain %}

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

    <!-- side start 模板 -->
        {% block side %}
      <aside class="side">
          <div class="side-activities">
              <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
              <div class="activities-img">
                  <a href="javascript:void(0);" target="_blank">
                      <img src="{% static 'images/english.jpg' %}" alt="title">
                  </a>
                  <p class="activities-tips">对话国外小姐姐</p>
              </div>
              <ul class="activities-list">
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-start">报名中</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2432"> django 项目班</a></span>
                      </a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank">
                          <span class="active-status active-end">已结束</span>
                          <span class="active-title"><a
                                  href="https://www.shiguangkey.com/course/2321">python入门基础班</a></span>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="side-attention clearfix">
              <h3 class="attention-title">关注我</h3>
              <ul class="side-attention-address">
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="pywhich py-github"></i>xinlan</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="pywhich py-zhihu"
                                                                       style="color:rgb(0, 108, 226);"></i>xinlan</a>
                  </li>
                  <li>
                      <a href="javascript:void(0);" target="_blank"><i class="pywhich py-weibo"
                                                                       style="color:rgb(245,92,110);"></i>xinlan</a>
                  </li>
              </ul>
              <div class="side-attention-qr">
                  <p>扫码关注</p>
              </div>
          </div>
            <!-- 热门推荐 模板  -->
          {% block hot_recommend %}
          <div class="side-hot-recommend">
              <h3 class="hot-recommend">热门推荐</h3>
              <ul class="hot-news-list">

                  <li>
                      <a href="javascript:void(0)" class="hot-news-contain clearfix">
                          <div class="hot-news-thumbnail">
                              <img src="{% static 'images/python_web.jpg' %}"
                                   alt="">
                          </div>
                          <div class="hot-news-content">
                              <p class="hot-news-title">django调试工具django-debug-toolbar安装使用教程</p>
                              <div class="hot-news-other clearfix">
                                  <span class="news-type">python框架</span>
                                  <!-- 自带的 -->
                                  <time class="news-pub-time">11月11日</time>
                                  <span class="news-author">python</span>
                              </div>
                          </div>
                      </a>
                  </li>

              </ul>
          </div>
          {% endblock hot_recommend %}
            <!-- 热门推荐 模板 end -->

      </aside>
        {% endblock side %}
    <!-- side end -->
  </div>
</main>
{% endblock main_start %}
<!-- main 内容模板 end -->

<!-- footer start -->
<footer id="footer">
    <div class="footer-box">
        <div class="footer-content">
            <p class="top-content">
                    <span class="link">
                        <a href="javascript:void(0)">关于python</a> |
                        <a href="javascript:void(0)">我就是我</a> |
                        <a href="javascript:void(0)">人生苦短</a> |
                        <a href="javascript:void(0)">我用python</a>
                    </span>
                <span class="about-me">关于我: <i class="pywhich py-wechat"></i> xinlan</span>
            </p>
            <p class="bottom-content">
                <span>地址： xxxx</span>
                <span>联系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小时在线)</span>
            </p>
        </div>
        <p class="copyright-desc">
            copyright &copy; 2008 - 2018 xxx有限公司. all rights reserved
        </p>
    </div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="{% static 'js/base/common.js' %}"></script>
<!-- 自定义js模板 -->
{% block script %}
{% endblock script %}
<!-- 自定义js模板 end -->
</body>
</html>

注意静态文件的引用。

2.news模块index页面

news/index.html代码：

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

{% block title %}首页{% endblock title %}

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

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


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


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


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


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


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


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


            </ul>
            <a href="javascript:void(0);" class="btn prev">
                <i class="pywhich py-arrow-left"></i></a>
            <a href="javascript:void(0);" class="btn next">
                <i class="pywhich py-arrow-right"></i></a>
            <ul class="tab">
                <!-- 按钮数量必须和图片一致 -->


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


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

      <!-- content start -->
      <div class="content">
        <!-- recommend-news start -->
          <ul class="recommend-news">
              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="{% static 'images/python_gui.jpg' %}" alt="title">
                      </div>
                      <p class="info">python gui 教程 25行代码写一个小闹钟</p>
                  </a>
              </li>

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

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

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

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

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

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

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

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

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

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

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

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

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

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="实现linux和windows文件传输"
                               title="实现linux和windows文件传输">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a>
                          </h4>
                          <p class="news-details">
                              其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：zmodem协议具体是linux命令是：rz...</p>
                          <div class="news-other">
                              <span class="news-type">linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt=".htaccess配置详解"
                               title=".htaccess配置详解">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a>
                          </h4>
                          <p class="news-details">　　.htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了
                              无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢　　- .htaccess 文件(或者&quot;分布式...</p>
                          <div class="news-other">
                              <span class="news-type">linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="{% static 'images/linux.jpg' %}" alt="使用nohup命令让linux程序后台运行"
                               title="使用nohup命令让linux程序后台运行">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a>
                          </h4>
                          <p class="news-details">使用nohup让程序永远后台运行unix/linux下一般比如想让某个程序在后台运行，很多都是使用 &amp;
                              在程序结尾来让程序自动运行。比如我们要运行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</p>
                          <div class="news-other">
                              <span class="news-type">linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

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

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

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

news/views.py代码(视图代码)

from django.shortcuts import render


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

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

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

urlpatterns = [
    path('', views.index, name='index'),    # 将这条路由命名为index
]

这会还得在主项目下配置分路由代码(根urls.py代码)

from django.urls import path, include

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

上一篇：如何给HTML页面的文本设置字符和单词间距

下一篇： vue-父子组件和ref

Django项目: 2.模板抽取

静态页面抽取模板

一、分析静态页面

1.静态vs动态

2.本次项目页面分析

3.分析模板页面

二、模板抽取

1.base模板抽取

2.news模块index页面

详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)