其他分享
首页 > 其他分享> > Django模板开发&重写&使用bootstrap

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

作者:互联网

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 %}

标签:bootstrap,Django,+---,模板,registration,block
来源: https://blog.csdn.net/weixin_43815091/article/details/123083383