Django中母版、组件、inclusion_tag的使用

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量104 收藏
点赞数
文章标签： javascript python 前端 ViewUI
原文链接：https://yq.aliyun.com/articles/656947
版权

母版页用于处理html页面相同部分内容，避免出现冗余代码

一、母版的使用：

  • 使用母版情况1：母板中定义页面专用的CSS块和JS块，方便子页面替换。
  • 使用母版情况2：多个页面有很多共同的代码段时可以将相同的代码段提取出来。
  • 使用方法：
    通过在母板中使用 {% block xxx %}来定义"块"。
    在子页面中继承母版 {% extends "xxx.html" %}
    通过母板中的命名块{% block page-main%}....{% endblock %}来对应替换母板中相应的位置。

代码示例：
母版--->base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人数据管理中心</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">个人数据管理中心</a>
        </div>
        <div>
        </div>
    </div>
</nav>
{% block page-main%}
{% endblock %}


{% block page-js %}
{% endblock %}
</body>
</html>

子内容-继承母版-->views.html

{% extends "base.html" %}
{% block page-main %}
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 style="display: inline-block">数据详情</h4>
                        <a href="{{ add_url }}">
                            <button class="btn btn-lg btn-info pull-right">添加数据</button>
                        </a>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover table-striped table-bordered">
                            <thead>
                            <tr>
                                {% for head in heads_list %}
                                    <td><h4>{{ head }}</h4></td>
                                {% endfor %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for obj in obj_list %}
                                <tr>
                                    {% for field in obj %}
                                        <td>
                                            {{ field }}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {{ page_html|safe }}
                <!------模态框开始-------->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">确认删除</h4>
                            </div>
                            <div class="modal-body">您确定要删除所选的数据吗？？？</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <a id="del-success" href="">
                                    <button type="button" class="btn btn-primary">删除</button>
                                </a>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <!------模态框结束-------->

            </div>
        </div>
    </div>
{% endblock %}
{% block page-js %}
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.js"></script>
    <script>
        $(function () {
            $(".delete-link").click(function () {
                var url = $(this).attr('href');
                $("#del-success").attr("href", url)
            })
        });
    </script>
{% endblock %}

子内容-继承母版-->addviews.html

{% extends "base.html" %}
{% block page-main %}
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4>添加数据</h4>
                    </div>
                    <div class="panel-body">
                        <form action="" method="post" novalidate>
                            {% csrf_token %}
                            {% for field in form_obj %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error pull-right" style="color: red">{{ field.errors.0 }}</span>
                                </div>
                            {% endfor %}
                            <input type="submit" class="btn btn-success">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

二、组件的使用：

可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。

{% include 'navbar.html' %}

组件和母版的区别：

  • 组件相当于是单拿出来独立的一部分，哪里需要插哪里，即插即用！！！
  • 母版相当于是一个整体的框架，将有差异的各个部分单留出空间来，以方便自定制内容的填充。

三、静态文件配置

简单地说就是：我们自己导入的一些包就叫做静态文件
配置的步骤：

  • 1、在全局中先创建一个static的包，
  • 2、在static里面导入我们的bootstrap，还是jquery等等...
  • 3、然后在settings.py中加上一些配置
STATIC_URL = '/static/'   #这个相当于给配置起的别名,如果这里的名字修改了就按照这里的名字去导入
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static")  #通过和项目根路径拼接得到static的路径
]
  • 4.1、普通导入css,js,jquery
<link rel = "stysheet",href= "/static/index.css/"> 
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  • 4.2 动态导入（这种导入更加灵活）
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
  • 还可以用在一下地方：
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

{% load static %}
<script src="{% static "mytest.js" %}"></script>
  • 某个文件多处被用到可以存为一个变量:
{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>
  • get_static_prefix的使用
{% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

或者

{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

四、inclusion_tag

类似于上面的组件，只不过他需要从后端得到数据才能完成渲染成功。多用于返回html代码片段
代码示例：

  • 第一步：在app下创建一个名为templatetags（必须是这个名字）文件夹。
  • 第二步：在这个文件夹下创建一个py文件，名字没要求。
  • 第三步：在py文件中先导入，在注册，代码是固定死的。 
from django import template
register = template.Library()
  • 第四步：写视图函数得到页面所需要的数据，将数据return回来，
  • 第五步：给这个视图函数加上@register.inclusion_tag(filename='left_menu.html'),以指定html文件将数据传入。
  • 在需要用到自定义inclusion_tag的html文件中引入，引入固定规则为：
    通过使用{% load py文件名 %} {% 对应html文件名 py文件中的视图函数所需参数 %}的固定形式引用自定义的inclusion_tag。

l_menu.py文件示例：

from django import template
from blog import models
from datetime import datetime

register = template.Library()


@register.inclusion_tag(filename='left_menu.html')
def left_menu(username):
    # 通过用户信息找到当前用户的对象
    user_obj = models.UserInfo.objects.filter(username=username).first()
    # ORM操作查询当前用户对应的所有书籍
    article_list = models.Article.objects.filter(user=user_obj).order_by("create_time").reverse()
    # ORM操作查询当前用户对应的所有分类
    categorys = models.Category.objects.filter(blog=user_obj.blog)
    # ORM操作查询当前用户对应的blog的tags
    tags = models.Tag.objects.filter(blog=user_obj.blog)

    # 时间归档方式一
    #通过对所有对象的create_time字段的处理，通过列表的去重和计数得到对应的前端数据
    date_list = [datetime.strftime(obj.create_time, '%Y-%m') for obj in article_list]
    list2 = list(set(date_list))
    list2.sort(key=date_list.index)
    ret_date_list = [(i, date_list.count(i)) for i in list2]

    #时间归档方式二
    # 对当前blog的所有文章按照年月 分组 查询
    # 1. models.Article.objects.filter(user=user_obj)                   --> 查询出当前作者写的所有文章
    # 2. .extra(select={"y_m": "DATE_FORMAT(create_time, '%%Y-%%m')"}   --> 将所有文章的创建时间格式化成年-月的格式，方便后续分组
    # 3. .values("y_m").annotate(c=Count("id"))                         --> 用上一步时间格式化得到的y_m字段做分组，统计出每个分组对应的文章数
    # 4. .values("y_m", "c")                                            --> 把页面需要的日期归档和文章数字段取出来
    # archive_list = models.Article.objects.filter(user=user_obj).extra(
    #     select={"y_m": "DATE_FORMAT(create_time, '%%Y-%%m')"}
    # ).values("y_m").annotate(c=Count("id")).values("y_m", "c")

    return {
        'username': username,
        'categorys': categorys,
        'tags': tags,
        'ret_date_list': ret_date_list,
    }

left_menu.html示例：

<div class="panel panel-info">
    <div class="panel-heading">
        文章分类
    </div>
    <div class="panel-body">
        <ul class="list-group">
            {% for category in categorys %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/category/{{ category.title }}">
                        {{ category.title }}({{ category.article_set.all.count }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        标签
    </div>
    <div class="panel-body">

        <ul class="list-group">
            {% for tag in tags %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/tag/{{ tag.title }}">
                        {{ tag }}({{ tag.article_set.all.count }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        日期归档
    </div>
    <div class="panel-body">
        <ul class="list-group">
            {% for date in ret_date_list %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/archive/{{ date.0 }}">
                        {{ date.0 }}({{ date.1 }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

base.html文件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/mycss.css">
</head>
<body>
<div class="container-fluit">
    <div class="row">
        <!--左侧栏开始-->
        <div class="col-md-2">

      //通过使用{% load  py文件名 %}  {% 对应html文件名  py文件中的视图函数
      //所需参数 %}的固定形式引用自定义的inclusion_tag。
            {% load l_menu %}
            {% left_menu username %}
        </div>
        <!--左侧栏结束-->
        {% block page-main %}
        {% endblock page-main %}
    </div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/bootstrap-3.3.7/js/bootstrap.js"></script>
{% block page-js %}
{% endblock page-js %}
</body>
</html>
weixin_33727510
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django-include标签-inclusion_tag自定义标签-母版
zdc45625的博客
03-04 447
文章目录一、include标签二、inclusion_tag自定义标签三、母版 一、include标签 前提：项目中，往往会出现多个页面拥有一个或几个相同的页面板块，或是一个页面多个页面板块是相同的 解决：我们可以采用模板语言复用，include标签来帮我们解决，就避免了大量的复制粘贴html页面板块代码 公共页面的板块 &lt;!-- templates/public.html --&gt; ...
Django框架之模板层(inclusion_tag、模板的导入与继承、过滤器、模板标签、模板语法详解)
Shawn派大星
03-19 307
一.两种模板方法 变量相关 : {{ }} 逻辑相关 : {% %} 二.注释 注释是代码之母 : {# #} 三.模板语法之传值 1.Python中基本数据类型传值 def test_func(request): s = "Hello 派大星!" i = 1314520 f = 1.75 l = [1,2,3,4,5] d = {"name":"shawn","age":23} t = (2,3,4,5,5) se = {3,4,5,
8.inclusion_tag的使用
Yanghongru的博客
08-07 625
前天学习inclusion_tag的使用,但是自己写代码的时候总是出错,直到今天才第一次运行成功,特地来写一下inclusion_tag的使用,以后出错可以看看。 1.创建文件 在Django的app下创建一个叫templatetags的python(名字一定要是templatetags) 然后创建一个py文件,来写我们自定义的inclusion_tag 2.写配置 from django i...
django中的simpletag和inclusion-tag
lml的博客
05-27 480
1.simpletag的使用 自定义的过滤器最多只能接收两个参数，因此更强大的功能可以使用simpletag实现 首先创建tempplatetags包，在该文件下创建mysimpletag 然后在html中使用 load 进行引用 2.inclusion_tag的使用 需要根据传入的参数动态调整html的内容时使用。 首先创建tempplatetags包，在该文件下创建my...
Django模版语言inclusion_tag的用法。
Monicx的博客
07-05 3930
inclusion_tag。它多用于一个HTML片段的。例如我写的一个BBS项目中。 一个博主的主页面的左侧栏和查看博主某篇文章的页面的左栅栏的一样的。为了不用重复写同样的代码。且提高页面的扩展性。我的bbs的左侧栏就用了inclusion_tag来实现。 首先要在项目的： 在项目blog这个app下面创建一个templatetags文夹。这个文件夹的名字必顺是templatet...
python include_tag_python 之 Django框架(模板系统、过滤器、simple_tag、inclusion_tag、Tags、母版、组件)...
weixin_39725756的博客
12-18 96
12.35 Django模板系统{{ }}和 {% %},变量相关的用{{}}，逻辑相关的用{%%}app02/views:#模板语言测试函数deftemplate_test(request):name= "张三"dic= {"name": "张三", "age": 16, "items": "sb"}list1= [11, 22, 33, 44, 55]​classPerson(object):...
Django MTV simple_tag filter inclusion_tag
weixin_34367845的博客
01-22 102
Django框架 模型(Model)、视图(View)和控制器(Controller)，具有耦合性低、重用性高、生命周期成本低等优点。 MVC 框架 -- Model -View -Controller MTV 框架 --Model（模型）-Template（模板）-View（视图） 　　Model(模型)：负责业务对象与数据库的对象(ORM) Template(模...
Django07:模板语法/标签/inclusion_tag/模版的继承
winterye12的博客
03-23 123
模板语法传值 列表：l=['a','b','c'] 集合：se{‘a’,'yy','ss'} 元组：t=(111,222,333) render(request.'index,html',locals()) 语法规律 {{}}:变量相关 {%%}:逻辑相关 {{func}}
python-django_自定义标签和过滤器_模板的导入与继承_静态文件使用方式_inclusion_tag的用法
qq_31455841的博客
10-12 241
django 1. 自定义标签和过滤器 1. 自定义过滤器 -第一步： 在settings中的INSTALLED_APPS配置当前app，不然django无法找到自定义的simple_tag -第二步： 在app中创建templatetags包(包名只能是templatetags，不能改) -第三步： 在包内，新建py文件（如：my_tags.py） -第四步： # 写代码（过滤器） from django import template registe
详解Python的Django框架中inclusion_tag的使用
09-21
4. **使用标签**：在模板中使用注册的`inclusion_tag`。 ```html {% books_for_author author %} ``` #### 四、`takes_context`选项 有时候，`inclusion_tag`可能需要访问父模板的上下文。为了满足这种需求，...
api.rar_Token 使用redis_django_exclaimedthp_redis_roselgr
09-24
`api.rar_Token 使用redis_django_exclaimedthp_redis_roselgr`这个标题暗示了我们在讨论一个使用Redis作为存储机制，来处理Django框架中的Token验证的场景。这里的`exclaimedthp`和`roselgr`可能是项目或特定组件的...
django python taggit_python_django_
10-03
然后在模型中使用自定义的`TaggedItemBase`子类： ```python tags = GenericTaggableManager(through=CustomTaggedItem, verbose_name='tags') ``` 最后，为了在模板中显示标签，可以使用`taggit`提供的模板标签：...
Django数据模型中on_delete使用详解
01-21
一、django3.0官方文档介绍： Many-to-one relationships多对一关系 To define a many-to-one relationship, use django.db.models.ForeignKey. You use it just like any other Field type: by including it as ...
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 333
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 307
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 359
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 226
社交媒体分享链接时的预览图片和内容
django架构中在__init__.py使用mysql.connector驱动
05-12
在 Django 架构中，一般使用 Django 自带的 ORM（Object-Relational Mapping）来操作数据库。ORM 是一种将关系数据库中的数据映射到对象的技术，将程序中的对象转换为数据库中的记录，从而实现对数据库的操作。 不过，如果你想直接使用 MySQL Connector/Python 驱动来连接 MySQL 数据库，可以在 Django 项目中的 `__init__.py` 文件中进行相关配置。具体配置如下： 1. 安装 MySQL Connector/Python 驱动，可以使用 pip 命令进行安装： ``` pip install mysql-connector-python ``` 2. 在 Django 项目的 `__init__.py` 文件中添加以下代码： ```python import mysql.connector from django.db.backends.mysql.base import DatabaseWrapper # 定义 MySQL Connector/Python 驱动的数据库连接参数 cnx = mysql.connector.connect(user='your_username', password='your_password', host='your_host', database='your_database') # 重写 Django 的 MySQL 数据库连接方法 class MySQLDatabaseWrapper(DatabaseWrapper): def get_new_connection(self, conn_params): return cnx # 注册 MySQLDatabaseWrapper DatabaseWrapper.register_backend('mysql.connector', 'django.db.backends.mysql.base', 'MySQLDatabaseWrapper') ``` 需要将上述代码中的 `your_username`、`your_password`、`your_host` 和 `your_database` 替换为实际的数据库连接参数。 3. 在 Django 项目的 `settings.py` 文件中，将 `DATABASES` 配置中的 `ENGINE` 改为 `django.db.backends.mysql.connector`，如下所示： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql.connector', 'NAME': 'your_database', 'USER': 'your_username', 'PASSWORD': 'your_password', 'HOST': 'your_host', 'PORT': 'your_port', } } ``` 需要将上述代码中的 `your_username`、`your_password`、`your_host`、`your_database` 和 `your_port` 替换为实际的数据库连接参数。 这样，就可以在 Django 项目中使用 MySQL Connector/Python 驱动来连接 MySQL 数据库了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值