在本文中，我将介绍在Django应用程序开发中设计Django模板的方法。目的是保持Django应用程序的UI部分井井有条，并避免重复编码。Django在模板引擎中提供了各种机制来帮助我们实现这一目标。在本教程中，我将说明如何使用Django内置模板标记块，扩展和包含来使模板易于维护。
准备工作：
1、Python 3.6
2、Django 2.2
3、AdminLTE 3.0.5
我们目标是将模板文件有效组织起来，避免重复的代码引用，我们分四个步骤来实现。
步骤1/4：base.html
将模板分为多个部分，我们知道除了菜单和内容外，其他所有内容都是可重复的。我们将制作一个基本模板来容纳那些常见的部分，如图：
在项目文件夹中创建一个文件夹模板。在其中创建一个base.html。将所有常见的片段添加到其中。只需复制并粘贴以下内容，仅是load.html和index.html共享的一部分代码。
{% load static %}
html>
"en">
"utf-8">
"viewport" content="width=device-width, initial-scale=1">
"x-ua-compatible" content="ie=edge">
AdminLTE 3 | Starter
"stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
"stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
"https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
"hold-transition sidebar-mini">
"wrapper">
{% block content_wrapper %}{% endblock %}
请注意，块content_wrapper用于呈现每个页面的自定义内容。
步骤2/4：删除冗余的通用代码
由于我们在上一步中创建了base.html，因此不再需要将通用代码保留在Landing.html和home.html中。我们应该得到如下结果。
"content-wrapper">
"content-header">
"container-fluid">
"row mb-2">
"col-sm-6">
"m-0 text-dark">Polls Index Page
"col-sm-6">
"breadcrumb float-sm-right">
- "breadcrumb-item">"#">Home
- "breadcrumb-item active">Polls
"content">
"container-fluid">
"row">
"col-lg-6">
"card">
"card-body">
"card-title">Card title
"card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
Card link Another link "card card-primary card-outline">
"card-header">
"card-title">General Elements
"col-lg-6">
"card">
"card-header">
"m-0">Featured
"card card-primary card-outline">
"card-header">
"m-0">Featured
landing.html页面代码：
"content-wrapper">
"content-header">
"container-fluid">
"row mb-2">
"col-sm-6">
"m-0 text-dark">Home Landing Page
"content">
"container-fluid">
"row">
"col-lg-6">
"card">
"card-body">
"card-title">Card title
"card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
Card link Another link "col-md-6">
"card card-warning">
"card-header">
"card-title">General Elements
步骤3/4：继承base.html
为了将base.html用作每个页面的基础模板，我们需要通过在模板的开头使用{％extended‘base.html’％}来声明base.html为“父”模板。最重要的是，不要忘记content_wrapper块。将全部内容包装到该块中。我们应该得到如下结果。
landing.html:
{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
"content-wrapper">
. . .
{% endblock %}
在index.html:
{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
"content-wrapper">
. . .
{% endblock %}
步骤4/4：将常见的内容单独存放
现在我们可能会意识到，两个模板中都存在相同的巨型形式。几乎一半的代码是它。由于此表单已在两个模板中重复使用，因此我们将其维护在一个可以包含任何模板的地方。
在模板文件夹中创建一个文件夹advanced_forms。在advanced_forms文件夹中，创建如下的general_elements_form.html，代码如下：
删除Landing.html和index.html中的多余表单代码。使用{％ include ‘advanced_forms/general_elements_form.html’ ％}包含表单。设置好之后，这就是最终结果。
index.html:
{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
"content-wrapper">
"content-header">
"container-fluid">
"row mb-2">
"col-sm-6">
"m-0 text-dark">Polls Index Page
"col-sm-6">
"breadcrumb float-sm-right">
- "breadcrumb-item">"#">Home
- "breadcrumb-item active">Polls
"content">
"container-fluid">
"row">
"col-lg-6">
"card">
"card-body">
"card-title">Card title
"card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
Card link Another link "card card-primary card-outline">
"card-header">
"card-title">General Elements
"card-body">
{% include 'advanced_forms/general_elements_form.html' %}
"col-lg-6">
"card">
"card-header">
"m-0">Featured
"card card-primary card-outline">
"card-header">
"m-0">Featured
{% endblock %}
loading.html:
{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
"content-wrapper">
"content-header">
"container-fluid">
"row mb-2">
"col-sm-6">
"m-0 text-dark">Home Landing Page
"content">
"container-fluid">
"row">
"col-lg-6">
"card">
"card-body">
"card-title">Card title
"card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
Card link Another link "col-md-6">
"card card-warning">
"card-header">
"card-title">General Elements
"card-body">
{% include 'advanced_forms/general_elements_form.html' %}
{% endblock %}
现在，让我们再次重新启动项目。屏幕上没有任何变化。但是从整体结构上，项目变得更易于维护。努力将是值得的（笑脸）
这是我们完成增强后的文件架构的目录结构。我用黄色突出显示了模板。
写在最后，模板是Web应用程序中的核心部分之一。不要写重复代码，我认为该原则适用于前端和后端开发，这样我们才可以制作出可伸缩的应用程序。
文章转载：Python运维技术
（版权归原作者所有，侵删）
点击下方“阅读原文”查看更多
