Django模板开发&重写&使用bootstrap

本文使用Django自带模板系统

base.html

Django的模板系统离不开base.html这个模板文件，它相当于一个大框架，通过各种block块进行拼接，这部分与vue的模板相似。

你可以在base.html中定义所有页面都不变的部分，比如： {% block header %}定义页面导航栏等头部部分、{% block footer %}定义页面底部版权内容、最重要的是{% block content %}定义页面可变的内容部分

语法

变量

变量都是双大括号{{ name }}

标签

Django模板的语法不仅限于定义内容块，还可以进行循环、判断

Django模板的标签都是块标签，也就意味着他们需要成对出现 以end结束

block

{% block header %}
    <div class="header">
        This is header block!
    </div>
{% endblock %}

# content块不需要填写内容，会根据view返回的模板自动填充进去
{% block content %}

{% endblock %}

for

{% for i in array%}
    {{ i }}
{% endfor %}

if

{% if a %}

{% endif %}

{% if b == 'str' %}
    <span>当b='str'时显示我</span>
{% else if b == 'str1' %}
    <span>当b='str1'时显示我</span>
{% else %}
    <span>当b!='str'&b!='str1'时显示我</span>
{% endif %}

使用bootstrap

1. 安装bootstrap4

pip install django-bootstrap4

2. 导入bootstrap

在Settings.py文件中安装导入

3. 使用bootstrap

在需要使用bootstrap的模板文件中写明

{% load bootstrap4 %}
{# load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{# Display django.contrib.messages as                     Bootstrap alerts #}
{% bootstrap_messages %}

接下来就可以愉快的和平时一样写bootstrap的样式了

bootstrap表单

<form method="post" action="">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="{% trans '登录' %}" class="btn btn-primary"/>
    <input type="hidden" name="next" value="{{ next }}"/>
</form>

重写第三方插件模板

官方文档
一般采用第一种方式，即在工程目录下新建template文件夹

Django在渲染时找template文件夹，会先找工程目录DIRS，再找APPDIRS

案例：重写registration应用登录模板

registration应用目录如下

+---backends
|   +---admin_approval
+---locale
......
|   \---zh_TW
|       \---LC_MESSAGES
+---management
|   +---commands
|   |   \---__pycache__
|   \---__pycache__
+---migrations
|   \---__pycache__
+---templates
|   \---registration
+---tests
|   \---__pycache__
\---__pycache__

根据上面文件夹目录可得出结论，registration应用自带的模板在template/registration
我们可以在自己的template文件夹下建立registration，这时，我们写的同名模板就会替换自带模板

注意： 复写模板时，模板的父模板也需要一起复写

这种情况下需要同时建立registration_base.html文件，内容如果没有变化可以从自带模板中复制 然后你会发现，这个文件中就一行{% extends "base.html" %}
login.html

{% extends "registration/registration_base.html" %}
{% load bootstrap4 %}
{# load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
{% load i18n %}

{% block title %}{% trans "Log in" %}{% endblock %}

{% block content %}
    <div id="index">
        <div id="login_frame">
            <div class="login_title">
                <img src="">
                <br>
                <h1></h1>
                <h3></h3>
            </div>
            <form method="post" action="">
                {% csrf_token %}
                {% bootstrap_form form %}
                <input type="submit" value="{% trans '登录' %}" class="btn btn-primary"/>
                <input type="hidden" name="next" value="{{ next }}"/>
            </form>
            <p>{% trans "忘记密码？" %} <a href="{% url 'auth_password_reset' %}">{% trans "重置" %}</a>.</p>
            <p>{% trans "还没有账号？" %} <a href="{% url 'registration_register' %}">{% trans "注册" %}</a>.</p>
        </div>
    </div>
{% endblock %}