BBS 项目（四）

目录

• BBS 项目（四）
  • 首页布局
  • 个人头像显示
  • 个人站点路由设计
  • 个人站点页面设计
    • base.html
    • site.html
  • 左侧过滤功能
  • 404.html 

首页布局

"en">

    "UTF-8">
    
    
    
    "stylesheet" href="/static/element/bootstrap.min.css">
    "stylesheet" href="/static/element/bootstrap.min.css.map">
    "stylesheet" href="/static/element/font-awesome-4.7.0/css/font-awesome.css">
    


class="container-fluid">
    {# 头部 #}
    
class="head">
        
    


    {# 主体 #}
    
class="body row">
        {#  左侧   #}
        
class="col-md-2">
            
class="panel panel-success">
                
class="panel-heading">
                    
class="panel-title">Panel title
                
                
class="panel-body">
                    Panel content
                
            
            
class="panel panel-info">
                
class="panel-heading">
                    
class="panel-title">Panel title
                
                
class="panel-body">
                    Panel content
                
            
            
class="panel panel-warning">
                
class="panel-heading">
                    
class="panel-title">Panel title
                
                
class="panel-body">
                    Panel content
                
            
        

        {#   中间   #}
        
class="col-md-7">
            
class="lunbotu">
                
"carousel-example-generic" class="carousel slide" data-ride="carousel">
                    
                    
class="carousel-indicators">
                        
"#carousel-example-generic" data-slide-to="0" class="active">
                        
"#carousel-example-generic" data-slide-to="1">
                        
"#carousel-example-generic" data-slide-to="2">
                    

                    
                    
class="carousel-inner" role="listbox">
                        {% for banner in banner_list %}
                            {% if forloop.first %}
                                
class="item active">
                                    "{{ banner.url }}" alt="首页图">
                                    {#  
class="carousel-caption">#}
                                    {#    {{ banner.name }}#}
                                    {#  
#}
                                

                            {% else %}
                                
class="item ">
                                    "{{ banner.url }}" alt="首页图">
                                

                            {% endif %}

                        {% endfor %}


                    


                    {#    轮播图按钮    #}
                    class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

                        "true">class="fa fa-angle-double-left fa-3x" style="margin-top: 180px">
                        class="sr-only">Previous
                    
                    class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        "true">class="fa fa-angle-double-right fa-3x" style="margin-top: 180px">
                        class="sr-only">Next
                    
                
            

            {#  文章   #}
            
class="article" style="margin-top: 30px">
                {% for article in article_list %}
                    

                        
class="media-heading">"" id="underline">{{ article.title }}
                        
class="media">
                            
class="media-left media-middle">
                                "#">
                                    class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="用户主页头像" height="50px" width="50px">
{#                                    class="media-object" src="/static/img/96327268.jpg" alt="用户主页头像" height="50px" width="50px">#}
                                
                            
                            
class="media-body">
                                {{ article.desc }}
                            
                            
"margin-top: 10px">

                                class="article_footer">"" class="table-hover" >{{ article.blog.userinfo.username }}
                                class="article_footer">{{ article.create_time|date:'Y-m-d H:i:s' }}
{#                                class="glyphicon glyphicon-thumbs-up article_footer"> {{ article.up_num }}#}
                                class="article_footer">"">class="fa fa-thumbs-up fa-lg"> {{ article.up_num }}
                                class="article_footer">"">class="fa fa-thumbs-down fa-lg"> {{ article.down_num }}
                                class='article_footer'>"">class="fa  fa-comment fa-lg"> {{ article.commit_num }}
                            
                        
                        

                    

                {% endfor %}


            

        

        {#   右侧  #}
        
class="col-md-3">
            
class="list-group">
                
class="list-group-item">Cras justo odio
                
class="list-group-item">Dapibus ac facilisis in
                
class="list-group-item">Morbi leo risus
                
class="list-group-item">Porta ac consectetur ac
                
class="list-group-item">Vestibulum at eros
            
        
    



    {# 页脚 #}
    

        





    
    
class="footer text-center" style="background-color: rgb(243,243,243)">
        
    

个人头像显示

1 开启media
    -配置文件
    MEDIA_ROOT=os.path.join(BASE_DIR,'media')
    -路由
     re_path('^media/(?P.*?)$', serve,kwargs={'document_root':settings.MEDIA_ROOT}),
    -前端：
    class="media-object" src="media/{{ article.blog.userinfo.avatar }}" alt="..." height="60px" width="60px">
    

个人站点路由设计

1 路由一定要放在最后
    re_path('^(?P\w+)$', views.personal_site),

个人站点页面设计

base.html

{% extends 'base.html' %}

{% block title %}
    {{ user.username }}-博客园
{% endblock %}

{% block site_name %}
    {{ user.blog.site_name }}
{% endblock %}

{% block left %}
    
class="col-md-2">
        
class="panel panel-success">
            
class="panel-heading">
                
class="panel-title">我的标签
            
            
class="panel-body">
                {% for tag in tag_list %}
                    
"">{{ tag.1 }}({{ tag.0 }})

                {% endfor %}


            
        
        
class="panel panel-info">
            
class="panel-heading">
                
class="panel-title">我的分类
            
            
class="panel-body">
                {% for category in category_list %}
                    
"">{{ category.name }}({{ category.count }})

                {% endfor %}
            
        
        
class="panel panel-info">
            
class="panel-heading">
                
class="panel-title">随笔档案
            
            
class="panel-body">
                {% for month in month_list %}

                    
"">{{ month.0|date:'Y年m月' }}({{ month.1 }})

                {% endfor %}

            
        
    

{% endblock %}

{% block main %}
    
class="col-md-10">
        
class="article" style="margin-top: 20px">
            {% for article in article_list %}
                

                    
class="media-heading">"">{{ article.title }}
                    
class="media">
                        
class="media-body">
                            {{ article.desc }}

                        
                        
"margin-top: 10px" class="pull-right">
                            class="article_footer">posted @
                            class="article_footer">{{ article.create_time|date:'Y-m-d H:i:s' }}
                            {#                                 {{ article.up_num }}#}
                            class="article_footer"><i
                                    class="fa fa-comment-o fa-lg"> {{ article.up_num }}
                            class="article_footer"><i
                                    class="fa fa-home fa-lg"> {{ article.down_num }}
                            class='article_footer'><i
                                    class="fa fa-frown-o fa-lg"> {{ article.commit_num }}
                        
                    
                    

                

            {% endfor %}


        

    

{% endblock %}

左侧过滤功能

# 查询当前站点下某年某月的文章数（分组依据，日期：年月），不需要连表
from django.db.models.functions import TruncMonth, TruncDay, TruncYear, TruncHour
'''
Sales.objects
.annotate(month=TruncMonth('timestamp'))  # Truncate to month and add to select list
.values('month')  # Group By month
.annotate(c=Count('id'))  # Select the count of the grouping
.values('month', 'c')  # (might be redundant, haven't tested) select month and count
'''
        month_list = models.Article.objects.filter(blog=user.blog).annotate(month = TruncMonth('create_time')).values('month').annotate(count = Count('id')).values_list('month','count')

id   name         create_time        month
1    xx          2020-09-18:xxx      2020-09
2    xx44        2020-09-18:xxx      2020-09
    
3    xx44        2020-08-18:xxx      2020-08
'''
按月份阶段分组
'''

# 个人站点
def personal_site(request, username):
    user = models.UserInfo.objects.filter(username=username).first()
    if user:
        article_list = user.blog.article_set.all()
        # category_list = user.blog.category_set.all()
        # tag_list = user.blog.tag_set.all()
        # 查询每个分类下的文章数和分类名称
        # category_list = models.Category.objects.values('id').annotate(count=Count('article')).values('count', 'name')
        # 查询当前这个站点下的分类及分类下的文章数
        category_list = models.Category.objects.filter(blog=user.blog).annotate(count=Count('article')).values('count',
                                                                                                               'name')
        # 查询当前站点下所有的标签及标签下的文章数
        tag_list = models.Tag.objects.filter(blog=user.blog).annotate(count=Count('article')).values_list('count',
                                                                                                          'name')

        # 查询当前站点下按月分组的文章数和年月
        from django.db.models.functions import TruncMonth  # 按月截断
        month_list = models.Article.objects.filter(blog=user.blog).annotate(month = TruncMonth('create_time')).values('month').annotate(count = Count('id')).values_list('month','count')
        return render(request, 'site.html', locals())
    else:
        return render(request, '404.html')

404.html

"en">

    "UTF-8">
    
    
    "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    


class="container-fluid">

    
class="row">
        
class="col-md-8 col-md-offset-1 text-center" style="margin-top: 50px;margin-left: 100px">
            "/static/img/404.webp" alt="404图片">

        
        
class="col-md-10 col-md-offset-1 text-center" style='margin-top: 20px'>
                class="btn btn-info btn-block">"/index/">返回首页