Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计

在 Django 中，我们可以使用模板继承来避免代码的重复。模板继承是指我们可以在一个模板中定义一些公共的 HTML 代码，然后在其他模板中继承这个基础模板，并根据需要添加或覆盖一些内容。

通常情况下，我们会定义一个名为 base.html 的基础模板，其中包含网站的公共结构和样式，例如页眉、页脚、导航栏等。然后，在其他模板中，我们可以使用 extends 指令来继承这个基础模板，并在 block 块中添加或覆盖一些内容。

例如，下面是一个简单的 base.html 模板：

{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>{% block title %}{% endblock %}</title>

    <!-- 引入 Bootstrap 的 CSS 文件 -->

    <link rel="stylesheet" href="{% static 'bootstrap-4.6.2/dist/css/bootstrap.min.css' %}">

    {% block extra_head %}{% endblock %}

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <div class="container">

        <a class="navbar-brand" href="#">EDC</a>

        {#        Enterprise Data Center#}

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"

                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">用户管理<span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled">Disabled</a>

                </li>

            </ul>

            <ul class="navbar-nav ml-auto">

                <li class="nav-item">

                    <a class="nav-link" href="{% url 'home' %}">首页</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">文章</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="{% url 'about' %}">关于我们</a>

                </li>

                <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"

                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        个人中心

                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        <a class="dropdown-item" href="#">个人信息</a>

                        <a class="dropdown-item" href="#">修改密码</a>

                        <div class="dropdown-divider"></div>

                        <a class="dropdown-item text-danger" href="{% url 'logout' %}">注销</a>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</nav>

<div class="container">

    {% block content %}{% endblock %}

</div>

<!-- 引入 jQuery 的 JavaScript 文件 -->

<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>

<!-- 引入 Bootstrap 的 JavaScript 文件 -->

<script src="{% static 'bootstrap-4.6.2/dist/js/bootstrap.min.js' %}"></script>

{% block extra_script %}{% endblock %}

</body>

</html>

在上面的模板中，我们定义了一个 title 块和一个 content 块。在 title 块中，我们使用了一个默认值 My Site，但是在其他模板中，我们可以通过覆盖 title 块来修改这个值。在 content 块中，我们使用了一个空块，但是在其他模板中，我们可以在这个块中添加内容。

例如，下面是一个简单的 home.html 和about.html模板，它继承了 base.html 模板，并在 content 块中添加了一些内容：

{% extends 'base.html' %}

{% block content %}

<h2>Welcome to My Site</h2>

<p>This is the home page.</p>

{% endblock %}

{% extends 'base.html' %}

{% block content %}

<h2>Welcome to My Site</h2>

<p>This is the about page.</p>

{% endblock %}

在上面的模板中，我们使用了 extends 指令来继承了 base.html 模板。在 content 块中，我们添加了一些 HTML 代码来显示欢迎信息和介绍信息。

使用模板继承可以让我们更轻松地维护网站的代码，减少代码的重复，并使网站的结构更加清晰易懂。

路由设置：

from django.urls import path

from . import views

urlpatterns = [

    path('', views.index, name='index'),

    path('home/', views.home, name='home'),

    path('about/', views.about, name='about'),

    path('user_list/', views.user_list, name='user_list'),

    # ... 其他 URL 模式 ...

]

视图：

from django.contrib.auth.models import User

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

def index(request):

    return HttpResponse("Hello, world. You're at the index.")

def home(request):

    return render(request, 'home.html')

    # return HttpResponse("This is the home page.")

def about(request):

    return render(request, 'about.html')

    # return HttpResponse("This is the about page.")

def user_list(request):

    users = User.objects.all()

    context = {'title': 'user list', 'users': users}

    return render(request, 'myapp/user_list.html', context)

Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计的更多相关文章

Python全栈开发之路【第四篇】：Python基础之函数
本节内容函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...
Python全栈开发之路【第五篇】：Python基础之函数进阶(装饰器、生成器&迭代器)
本节内容一.名称空间又名name space,就是存放名字的地方.举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方. 名称空间共3种,分别如下 ...
Python全栈开发之路【第六篇】：Python基础之常用模块
本节内容模块分类: 好处: 标准库: help("modules") 查看所有python自带模块列表第三方开源模块: 自定义模块: 模块调用: import module f ...
Python全栈开发之路【第三篇】：Python基础之字符编码和文件操作
本节内容一.三元运算三元运算又称三目运算,是对简单的条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成 ...
python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容计算机发展介绍计算机硬件组成计算机基本原理计算机计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
web前端全栈学习之路
web前端全栈学习之路 --- 陆续更新中一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...
你的Node应用，对接分布式链路跟踪系统了吗？(一）原创：金炳 Node全栈进阶 4天前戳蓝字「Node全栈进阶」关注我们哦
你的Node应用,对接分布式链路跟踪系统了吗?(一) 原创: 金炳 Node全栈进阶 4天前戳蓝字「Node全栈进阶」关注我们哦
C#.Net全栈工程师之路-学习路径
C#.Net全栈工程师之路-学习路径按架构分: C/S架构: B/S架构: Mobile移动开发: 按技术点分: C#编程基础以及OOP面向对象编程: 数据库基础以及高级应用(MYSQL+MSSQL ...
战争热诚的python全栈开发之路
从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...
Python全栈开发之路【第一篇】：Python 介绍
本节内容一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...

随机推荐

Apache和Nginx有什么区别，如何选择？
Apache和Nginx都是大名鼎鼎的Web服务器软件. 网上已经有非常多关于apache和nginx区别的文章了,笔者就不从专业技术的角度进行解说,而按照目前比较流行的架构方式进行阐述. 1.安全性 ...
什么是RPA?RPA能干什么？
一.什么是RPA什么是RPA? RPA的全称为机器人流程自动化(Robotic Process Automation),即:"机器人流程自动化",是一种智能化的企业流程管理系统.R ...
Javaweb学习笔记第七弹
Maven依赖范围对于Maven的安装配置等环境准备问题,可详细参考我的前几篇博客, 网址1:https://www.cnblogs.com/liuzijin/p/16654344.html 网址2 ...
DAMA数据管理知识体系指南-V1
注:只摘抄了部分个人认为需要记录的笔记,如果想完整了解请看原文中文版序数据管理是把业务和信息技术融合起来所必须的一整套技术.方法及相应的管理和治理过程. 它的特殊定位决定了它涉及的知识体系面广且度 ...
Springboot 结合 Netty 实战聊天系统
音视频技术为什么需要微服务微服务,英文名:microservice,百度百科上将其定义为:SOA 架构的一种变体.微服务(或微服务架构)是一种将应用程序构造为一组低耦合的服务. 微服务有着一些鲜明的 ...
C++温故补缺(十九):atomic类
atomic 参考:c++11 多线程(3)atomic 总结 - 简书.c++11 atomic Npgw的博客.C++11 并发指南系列 - Haippy - 博客园. atomic_flag a ...
SpringBoot——静态资源及原理
一.使用 SpringBoot 的步骤 [1]创建 SpringBoot应用,选中自己需要的模块.[2]SpringBoot 已经默认将这些场景配置好,只需要在配置文件中指定少量配置就可以运行起来.[ ...
Cisco模拟器配置DNS服务器遇到的问题
1.使用工具: Cisco-Packet-Tracer(7.0或8.0版本及以上) 2.问题: 原因:安装思科模拟器后进行中文汉化: 过程:配置DNS服务时无法进行域名操作: 解决: 更改为原来的语言 ...
VUE3.x之Proxy 我们为什么要使用Proxy
Object.defineProperty 劫持数据只是对对象的属性进行劫持无法监听新增属性和删除属性需要使用 vue.set, vue.delete 深层对象的劫持需要一次性递归劫持数组时需 ...
STM32F407 学习（0）各种外设功能（上）
本文对正点原子STM32F4探索者的基本功能及外设作最基本的介绍,随笔者本人的学习进程(基本按照正点原子)而不定时更新,起到总结的作用. 一.HAL库编写程序的运行逻辑 HAL库函数(如stm ...

Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计

Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计的更多相关文章

随机推荐

热门专题