zoukankan      html  css  js  c++  java
  • 个人博客页面设计+自定义filters

    base.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>{{ blog.title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% load static %}
        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'fontAwesome/css/font-awesome.min.css' %}">
        <link rel="stylesheet" href="{% static 'sweetalert/sweetalert.css' %}">
        <link rel="stylesheet" href="/static/publice.css">
        <link rel="stylesheet" href="/static/theme/{{ blog.theme }}">
    </head>
    <body>
    
    <div class="header">
        <p>{{ blog.title }}</p>
    </div>
    
    <div class="container" style=" 90%">
        <div class="row">
            <div class="col-md-3">
                {#        下面这两行会帮我们自动的生成下面注释的部分#}
                {#            自定义过滤器#}
                {% load my_tags %}
    
                {% get_left_menu username %}
            </div>
            <div class="col-md-8">
                {% block page_main %}
    
                {% endblock %}
            </div>
    
        </div>
    </div>
    <script src="{% static 'jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'setupajax.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'sweetalert/sweetalert.min.js' %}"></script>
    <script src="{% static 'gt.js' %}"></script>
    </body>
    </html>

    article_detail.html

    {% extends 'base.html' %}
    
    {% block page_main %}
        <div class="article-detail">
            <h1>{{ article.title }}</h1>
            <p>{{ article.articledetail.content|safe }}</p>
        </div>
    {#    点赞和踩灭#}
        <div id="div_digg">
            <div class="diggit">
                <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
            </div>
            <div class="buryit">
                <span class="burynum" id="bury_count">{{ article.down_count }}</span>
            </div>
            <div class="clear"></div>
    
        </div>
    {% endblock %}

    首先介绍一下{% load my_tags %} {% get_left_menu username %}

    在开发中,如果遇到视图与数据相结合作为模板的时候,可以使用inclusion_tag(xxx),它接受一个参数,这个参数是你需要渲染的html代码。步骤大概如下:

    1. 在项目中创建一个名为templatetags的包(名字必须是这个)

    2. 在templatetags的包中创建存放自定义标签的py文件

    my_tags.py

    from django import template
    from app01 import models
    from django.db.models import Count
    
    register = template.Library()
    
    #就是一个自定义过滤器
    #将下面函数的返回值返回到   left_menu.html  页面
    @register.inclusion_tag("left_menu.html")
    def get_left_menu(username):
        user = models.UserInfo.objects.filter(username=username).first()
        blog = user.blog
        #查文章分类及对应的文章数
        category_list = models.Category.objects.filter(blog=blog).annotate(c=Count("article")).values("title", "c")
        # 查文章标签及对应的文章数
        tag_list = models.Tag.objects.filter(blog=blog).annotate(c=Count("article")).values("title", "c")
    
        # 按日期归档  目前我的好像不能执行,找不到 date_format
        archive_list = models.Article.objects.filter(user=user).extra(
            select={"archive_ym": "date_format(create_time,'%%Y-%%m')"}
        ).values("archive_ym").annotate(c=Count("nid")).values("archive_ym", "c")
    return { 'category_list':category_list, 'tag_list':tag_list, 'archive_list':archive_list, }

    left_menu.html

    <div class="panel-heading">文章分类</div>
    <div class="panel panel-primary">
        <div class="panel-body">
            {% for category in category_list %}
    {#            分类名称和分类中的文章数#}
    {#            <p>{{ category.title }}({{ category.article_set.all.count }})</p>#}
                <p>{{ category.title }}({{ category.c }})</p>
            {% endfor %}
    
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">文章标签</div>
        <div class="panel-body">
            {% for tag in tag_list %}
                <p>{{ tag.title }}({{ tag.c }})</p>
            {% endfor %}
        </div>
    </div>
    {#        <div class="panel panel-primary">#}
    {#            <div class="panel-heading">日期归档</div>#}
    {#            <div class="panel-body">#}
    {#                {% for archive in archive_list %}#}
    {#                    <p>{{ archive.archive_ym }}({{ archive.c }})</p>#}
    {#                {% endfor %}#}
    {#            </div>#}
    {#        </div>#}

    app01的urls.py

    from django.urls import path,re_path
    from app01 import views
    
    urlpatterns = [
        re_path('(w+)/article/(d+)/$',views.article_detail),     #文章详情
        
        #这一行不能放在上面,要不然,他可以匹配所以,其余的就匹配不到了
        re_path('(w+)',views.home),     #home(request,username)
    ]

    它的顺序是:

      1. 在自定义的标签中,首先会执行代码,将数据传递给inclusion_tag(xxx)参数中的html,即get_left_menu.html
      2. get_left_menu.html根据传来的数据完成自身的渲染
      3. base.html中调用inclusion_tag标签的部分完成渲染,即添加get_left_menu.html内容
      4. 个人站点页面继承模板页面,最终呈现
  • 相关阅读:
    ADT中通过Android SDK Manager去安装x86的image时无法下载
    javadoc 生成文档注释
    char类型的字节数
    win7下JDK环境变量设置方法
    artTemplate模板引擎
    输入与输出
    后台弹出JS类
    数据库主键的设计和思考
    Windows下批处理执行MySQL脚本文件
    You know元音字母吗?
  • 原文地址:https://www.cnblogs.com/liujie12/p/12848694.html
Copyright © 2011-2022 走看看