zoukankan      html  css  js  c++  java
  • 主界面各种功能

    在主界面展示了所有文章,然后每篇文章的标题都可以点击,下面的作者也可以点击。都会跳到对应的界面来展示。但是大差不差的,导航栏和侧边栏都是一样的,所以用模板继承。

    但是又有新的问题,我们左侧的侧边栏,需要进行分类,按标签分类,按类型分类,按时间分类,这三种,都是要用代码来实现的,如果用模板继承,就会没办法传参数,总不能每一次都重新写一次查询之类的代码吧。所以就要用自定义inclusion_tag。

    前端代码(模板):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        {% load static %}
        <script src="{% static 'bootstrap/js/jquery.js' %}"></script>
        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
        <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
        <link rel="stylesheet" href="/media/css/{{ blog.site_theme }}">
        {% block css %}
    
        {% endblock %}
    </head>
    <body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">{{ blog.site_title }}</a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">文章 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">随笔</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">更多 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">更多操作 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/set_password/" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
                                <li><a href="/set_img/">修改头像</a></li>
                                <li><a href="/backend/">后台管理</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/register/">注册</a></li>
                        <li><a href="/login/">登录</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                {# 这里导入了mytag.py文件,并且给里面的index传了username这个参数 #}
                {% load mytag %}
                {% index username %}
            </div>
            <div class="col-md-9">
            {% block content %}
    
            {% endblock %}
            </div>
        </div>
    </div>
    
        {% block js %}
    
        {% endblock %}
    </body>
    </html>
    

    侧边栏:

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">文章分类</h3>
                    </div>
                    <div class="panel-body">
                        {% for category in category_list %}
                            <p><a href="/{{ username }}/category/{{ category.2 }}/">{{ category.0 }}({{ category.1 }})</a></p>
                        {% endfor %}
                    </div>
                </div>
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">文章标签</h3>
                    </div>
                    <div class="panel-body">
                        {% for tag in tag_list %}
                            <p><a href="/{{ username }}/tag/{{ tag.2 }}">{{ tag.0 }}({{ tag.1 }})</a></p>
                        {% endfor %}
                    </div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">日期归档</h3>
                    </div>
                    <div class="panel-body">
                        {% for xxx in date_list %}
                            <p><a href="/{{ username }}/archive/{{ xxx.0|date:'Y-m' }}/">{{ xxx.0|date:'Y年-m月' }}({{ xxx.1 }})</a></p>
                        {% endfor %}
                    </div>
                </div>
    

    后端代码:

    def site(request,username,**kwargs):
        user_obj = models.UserInfo.objects.filter(username=username).first()
        if not user_obj:
            # 返回一个404页面
            return render(request,'errors.html')
        blog = user_obj.blog
        # 查询当前用户所有的文章数
        article_list = models.Article.objects.filter(blog=blog)  # queryset
        """侧边栏筛选功能 其实就是对上面的article_list再做一层筛选而已"""
        if kwargs:
            condition = kwargs.get('condition')
            param = kwargs.get('param')
            if condition == 'category':
                article_list = article_list.filter(category_id=param)
            elif condition == 'tag':
                article_list = article_list.filter(tags__id=param)
            else:
                year, month = param.split('-')
                article_list = article_list.filter(create_time__year=year,create_time__month=month)
        # # 1.查询当前用户所有的分类及分类下的文章数
        # category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name','count_num','pk')
        #
        # # 2.查询当前用户所有的标签及标签下的文章数
        # tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name','count_num','pk')
        #
        # # 3.按照年月统计文章数
        # date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(count_num=Count('pk')).order_by('-month').values_list('month','count_num')
        
        #以上被注释掉的代码,全都写在了index函数里面。
        return render(request,'site.html',locals())
    

    mytag.py

    from django.template import Library
    from app01 import models
    from django.db.models.functions import TruncMonth
    from django.db.models import Count
    
    register = Library()
    
    #用这个语句来确定要传入参数的html文件,当然在这里是侧边栏
    @register.inclusion_tag('left_menu.html')
    def index(username):
        user_obj = models.UserInfo.objects.filter(username=username).first()
        blog = user_obj.blog
        # 1.查询当前用户所有的分类及分类下的文章数
        category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list(
            'name', 'count_num', 'pk')
    
        # 2.查询当前用户所有的标签及标签下的文章数
        tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name',
                                                                                                             'count_num',
                                                                                                             'pk')
    
        # 3.按照年月统计文章数
        date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(
            'month').annotate(count_num=Count('pk')).order_by('-month').values_list('month', 'count_num')
        return locals()
        # return {'username':username,'blog':blog}
    

    路由层

        # 个人站点
        url(r'^(?P<username>w+)/$',views.site),
    
        # 侧边栏筛选功能
        # url(r'^(?P<username>w+)/category/(d+)/',views.site),
        # url(r'^(?P<username>w+)/tag/(d+)/',views.site),
        # url(r'^(?P<username>w+)/archive/(w+)/',views.site),
        # 上面的三条url可以合成一条
        url(r'^(?P<username>w+)/(?P<condition>category|tag|archive)/(?P<param>.*)/', views.site),
    
  • 相关阅读:
    VMware 创建的虚拟机,Xshell无法进行连接
    Centos7 文件修改详情
    Centos7 selinux关闭
    centos7 RPM命令使用
    centos 操作系统优化
    centos 内存使用情况+负载使用情况
    Centos 修改环境变量
    centos7 系统级别(持续更新)
    centos7 常规修改信息(比较杂的)持续更新
    centos7 修改网卡信息
  • 原文地址:https://www.cnblogs.com/chanyuli/p/11845514.html
Copyright © 2011-2022 走看看