zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Python内置函数(55)——round
    Python内置函数(54)——reversed
    Python内置函数(53)——repr
    Python内置函数(52)——range
    Python内置函数(51)——property
    Python内置函数(50)——print
    Python内置函数(49)——pow
    Python内置函数(48)——ord
    Python内置函数(47)——open
    Python内置函数(46)——oct
  • 原文地址:https://www.cnblogs.com/cjj-zyj/p/10185425.html
Copyright © 2011-2022 走看看