python之django母板页面的使用

2024-12-08 01:31:23

其实就是利用{% block xxx %} {% endblock %}的方式定义一个块，相当于占位。存放在某个html中，比如base.html

然后在需要实现这些块的文件中，使用继承{% extends "base.html" %}的方式引入母板文件，然后在{% block xxx %}......{% endblock %}块定义中实现具体的内容。

base.html示例：注意块的定义。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="http://v3.bootcss.com/favicon.ico" rel="external nofollow" >
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
  <title>所有的书都在这里</title>
  {% block page_css %}
  {% endblock %}
  {% block page_js %}
  {% endblock %}

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="external nofollow" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="http://v3.bootcss.com/examples/dashboard/dashboard.css" rel="external nofollow" rel="stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
   <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
   <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

{% include "nav.html" %}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="{% block book_class %}{% endblock %}"><a href="/book_list/" rel="external nofollow" >所有的书 <span class="sr-only">(current)</span></a>
        </li>
        <li class="{% block publisher_class %}{% endblock %}"><a href="/publisher_list/" rel="external nofollow" >出版社</a></li>
        <li class="{% block author_class %}{% endblock %}"><a href="/author_list/" rel="external nofollow" >作者</a></li>

      </ul>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      {% block main_body %}
        {#这里是每个页面不同的部分#}
      {% endblock %}
    </div>
  </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://v3.bootcss.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://v3.bootcss.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

某个继承页：

{# 继承母板 #}
{% extends 'base.html' %}

{% block book_class %}
  active
{% endblock %}
{% block page_css %}
  {% load static %}
  <link rel="stylesheet" href="{% get_static_prefix %}book_list_only.css" rel="external nofollow" >
{% endblock %}

{#把自己页面的内容，填入母板里面相应的位置#}
{% block main_body %}
  <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">我是自定义内容，用来替换母板中指定的位置</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-8"> </div>
            <div class="col-md-4"><a href="/add_book/" rel="external nofollow" rel="external nofollow" class="btn btn-primary"><i class="fa fa-plus-square"></i> 添加新书</a>
              <a href="/add_publisher/" rel="external nofollow" rel="external nofollow" class="btn btn-success"><i class="fa fa-plus-square"></i> 添加出版社</a></div>
          </div>

          <table class="table table-dark table-hover">
            <thead>
            <tr>
              <th>#</th>
              <th>id</th>
              <th>名称</th>
              <th>出版社</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for b in books %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ b.id }}</td>
                <td>{{ b.title }}</td>
                <td>{{ b.publisher.name }}</td>
                <td>
                  <a href="/del_book/?id={{ b.id }}" rel="external nofollow" class="btn btn-danger"><i class="fa fa-trash fa-fw"></i>删除</a>
                  <a href="/edit_book/?id={{ b.id }}" rel="external nofollow" class="btn btn-info"><i class="fa fa-pencil fa-fw"></i>编辑</a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
{% endblock %}

另一个继承页：

{% extends "base.html" %}
{% block main_body %}
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">所有的出版社</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-8"> </div>
            <div class="col-md-4"><a href="/add_book/" rel="external nofollow" rel="external nofollow" class="btn btn-primary"><i class="fa fa-plus-circle fa-fw"></i>添加新书</a>
              <a href="/add_publisher/" rel="external nofollow" rel="external nofollow" class="btn btn-success"><i class="fa fa-plus-circle fa-fw"></i>添加出版社</a></div>
          </div>

          <table class="table table-dark table-hover">
            <thead>
            <tr>
              <th>#</th>
              <th>id</th>
              <th>名称</th>
              <th>地址</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for p in publisher %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.addr }}</td>
                <td>
                  <a href="/del_publisher/?id={{ p.id }}" rel="external nofollow" class="btn btn-danger"><i class="fa fa-remove fa-fw"></i>删除</a>
                  <a href="/edit_publisher/?id={{ p.id }}" rel="external nofollow" class="btn btn-info"><i class="fa fa-edit fa-fw"></i>编辑</a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
 {% endblock %}
{% block publisher_class %}
  active
{% endblock %}

完整的练习项目代码:day63_base_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Python Django 添加首页尾页上一页下一页代码实例

添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(request): # 从 URL 中取参数 page_num = request.GET.get("page") print(page_num, type(page_num)) page_num = int(page_num) # 定义两个变量保存数据从哪儿取到哪儿 data_start = (pa
Using Django with GAE Python 后台抓取多个网站的页面全文

一直想做个能帮我过滤出优质文章和博客的平台给它取了个名叫Moven.. 把实现它的过程分成了三个阶段: 1. Downloader: 对于指定的url的下载并把获得的内容传递给Analyser--这是最简单的开始 2. Analyser: 对于接受到的内容,用Regular Expression 或是 XPath 或是 BeautifulSoup/lxml 进行过滤和简化--这部分也不是太难 3. Smart Crawler: 去抓取优质文章的链接--这部分是最难的: Crawler的话可
使用Python的Django框架结合jQuery实现AJAX购物车页面

Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css js/ jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称(这里是samples)划分文件夹,如果文件较多,还可以再划分子文件夹. Django通常使用模板来展现html,而且我们通常使用继承的模板,所以需要将共用的元素,比如全局的css,对jquery.js的引入等,写到b
python中django框架通过正则搜索页面上email地址的方法

本文实例讲述了python中django框架通过正则搜索页面上email地址的方法.分享给大家供大家参考.具体实现方法如下: import re from django.shortcuts import render from pattern.web import URL, DOM, abs, find_urls def index(request): """ find email addresses in requested url or contact page &quo
在Python的Django框架中编写错误提示页面

你应该在生产环境中把TEMPLATE_DEBUGFalse 如果这个设为`` True`` ,为了在那个好看的错误页面上显示足够的东西,Django的模版系统就会为每一个模版保存一些额外的信息. 实现一个404模板如果`` DEBUG`` 设置为`` True`` ,Django会显示那个自带的404错误页面. 但如果`` DEBUG`` 被设置成`` False`` ,那它的行为就不一样了: 他会显示一个在你的模版根目录中名字叫`` 404.html`` 的模版所以,当你准备部署你的应用时
python+django加载静态网页模板解析

接着前面Django入门使用示例今天我们来看看Django是如何加载静态html的? 我们首先来看一看什么是静态HTML,什么是动态的HTML?二者有什么区别? 静态HTML指的是使用单纯的HTML或者结合CSS制作的包括图片.文字等的只供用户浏览但不包含任何脚本.不含有任何交互功能的网页! 动态的HTML指的是网页不仅提供给用户浏览,网页本身还有交互功能,存在着在脚本如JAVASCRIPT,并利用某种服务器端语言如PHP等实现如用户注册,用户登录,上传文件,下载文件等功能接下来,了解下加载
使用python Django做网页

1 .创建一个django项目使用django-admin.py startproject MyDjangoSite 参考这里 2.建立视图from django.http import HttpResponsedef hello(request): return HttpResponse("我的第一个简单的python django项目.")3.修改urls.py 我们为urlpatterns加上一行: (r'^hello/$', hello), 这行被称作URLpattern
python之django母板页面的使用

其实就是利用{% block xxx %} {% endblock %}的方式定义一个块,相当于占位.存放在某个html中,比如base.html 然后在需要实现这些块的文件中,使用继承{% extends "base.html" %}的方式引入母板文件,然后在{% block xxx %}......{% endblock %}块定义中实现具体的内容. base.html示例:注意块的定义. <!DOCTYPE html> <html lang="zh
python的django写页面上传文件及遇到的问题小结

首先上结构 mynode -> app5 -> urls.py & views.py | -> templates -> 5 -> upload.html | -> mynode -> urls.py | -> media 按照顺序,先上app5/urls.py from django.urls import path from app5 import views as v5 app_name = 'app5' urlpatterns = [ pat
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)

有没有一种方法可以为Django项目中的每个应用程序创建多个自定义错误模板,我的意思是,在我的项目中,我有3个应用程序,每个应用程序将显示3种不同的custom 404错误. 现在,我在后台应用程序和前台显示相同的404错误页面. 最佳答案创建一个自定义error view并将其分配给根urls.py中的handler404变量: from django.views.defaults import page_not_found def my_error_404(request, excepti
Python的Django框架使用入门指引

前言传统 Web 开发方式常常需要编写繁琐乏味的重复性代码,不仅页面表现与逻辑实现的代码混杂在一起,而且代码编写效率不高.对于开发者来说,选择一个功能强大并且操作简洁的开发框架来辅助完成繁杂的编码工作,将会对开发效率的提升起到很大帮助.幸运的是,这样的开发框架并不少见,需要做的仅是从中选出恰恰为开发者量身打造的那款Web框架. 自从基于 MVC 分层结构的 Web 设计理念普及以来,选择适合的开发框架无疑是项目成功的关键性因素.无论是 Struts.Spring 或是其他 Web 框架的出现
在Windows8上的搭建Python和Django环境

先从搭建环境开始.作为一个Python初学者来说,一个趁手的编译器是很重要的,本想用VS来开发Python,但是感觉实际开发中没有几家公司会用VS来开发Python,没办法就换成了MyEclipse. 一.首先下载和安装Myeclipse就略过了. 二.安装Python. 一般的开发环境是在linux,网上很多教程和视频也都是在linux下配置和开发的.我的开发环境是64位win8系统,先从官网下载64位的Python安装程序. 可以从这里选择要下载的版本 https://www.python.
Windows下Python的Django框架环境部署及应用编写入门

环境搭建 1.下载所需的软件包: (1)python安装包 (2)django安装包以下2个包其实是安装python包管理工具,在后面安装django文档包模块时会用到,下载网站是pypi (1)setuptools.exe (2)pip 2.安装所需的软件包: python安装包是exe,setuptools也是exe,所以直接双击安装即可,先安装 django.pip是python模块包:安装时先解压,而后进入目录后使用命令:python setup.py install 安装即可 3.
使用FastCGI部署Python的Django应用的教程

作为一个mod_python模块的替代,你可以考虑使用mod_wsgi模块,此模块开发的时间比mod_python的开发时间离现在更近一些,在Django社区已有一些使用. 一个完整的概述超出了本书的范围,你可以从官方的Django文档查看到更多的信息. 使用FastCGI部署Django应用尽管将使用Apache和mod_python搭建Django环境是最具鲁棒性的,但在很多虚拟主机平台上,往往只能使用FastCGI 此外,在很多情况下,FastCGI能够提供比mod_python更为优越
在Heroku云平台上部署Python的Django框架的教程

Heroku是一个很棒的平台,它有很多的控件,并且搭建环境相对来说也比较容易.本指南中,我将一步一步指导你在Heroku平台上部署一个简单地Django应用搭建开发环境 Heroku工具链假设你已经在Heroku平台上注册了一个帐户,并且在里面创建了一款应用,为了一会儿通过CLI与Heroku交互,你需要安装Heroku工具链.在这篇指南中,我们用"Sample-Project"作为应用的名字. Git仓库在部署你的应用到Heroku之前,你需要先将你的代码签入git仓库中.He
Python使用django框架实现多人在线匿名聊天的小程序

最近看到好多设计类网站,都提供了多人在线匿名聊天的小功能,感觉很有意思,于是基于python的django框架自己写了一个,支持手动实时更名,最下方提供了完整的源码. 在线聊天地址(无需登录,开一个窗口,代表一个用户): http://zhaozhaoli.vicp.io/chatroom/happy/ 移动端聊天效果图: 网页版聊天效果图: 实现思路: 发送的消息通过ajax先写入数据库,通过ajax的循环请求,将写入数据库的消息显示到前端界面. 前端核心代码: <script> $(fun
Python通过Django实现用户注册和邮箱验证功能代码

本文主要向大家分享了Python编程中通过Django模块实现用户注册以及邮箱验证功能的简单介绍及代码实现,具体如下. 用户注册: 类似于用户登陆,同样在users.views.py中添加RegisterView(View)类,其中对表单的get和post作出处理. 如果是get方法,重新返回register页面让用户进行填写. def get(self, request): register_form = RegisterForm() return render(request, "regis

python之django母板页面的使用

相关推荐

随机推荐