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

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

一、母版的使用:

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

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




    
    个人数据管理中心
    



{% block page-main%}
{% endblock %}


{% block page-js %}
{% endblock %}


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

{% extends "base.html" %}
{% block page-main %}
    

数据详情

{% for head in heads_list %} {% endfor %} {% for obj in obj_list %} {% for field in obj %} {% endfor %} {% endfor %}

{{ head }}

{{ field }}
{{ page_html|safe }}
{% endblock %} {% block page-js %} {% endblock %}

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

{% extends "base.html" %}
{% block page-main %}
    

添加数据

{% csrf_token %} {% for field in form_obj %}
{{ field }} {{ field.errors.0 }}
{% endfor %}
{% 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
 

  • 4.2 动态导入(这种导入更加灵活)
{% load static %}

  • 还可以用在一下地方:
{% load static %}
Hi!
{% load static %}

  • 某个文件多处被用到可以存为一个变量:
{% load static %}
{% static "images/hi.jpg" as myphoto %}

  • get_static_prefix的使用
{% load static %}
Hi!

或者

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

Hi!
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示例:

文章分类
标签
日期归档

base.html文件示例:




    
    个人中心
    
    


//通过使用{% load py文件名 %} {% 对应html文件名 py文件中的视图函数 //所需参数 %}的固定形式引用自定义的inclusion_tag。 {% load l_menu %} {% left_menu username %}
{% block page-main %} {% endblock page-main %}
{% block page-js %} {% endblock page-js %}

你可能感兴趣的:(Django中母版、组件、inclusion_tag的使用)