ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-02-23 10:05:39  阅读:225  来源: 互联网

标签:bootstrap Django +--- 模板 registration block


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有