五、Home主页与个人站点主页

home首页代码：

# views.py视图函数部分代码
def home(request):

    # 将数据库中的所有文章展示到主页

    article_list = models.Article.objects.all()

    return render(request, 'home.html', locals())
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BBS论坛</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-default">

    <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="#">BBS论坛</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>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                {% if request.user.is_authenticated %}

                    <li><img src="/media/{{ request.user.avatar }}" alt="" width="45px" class="img-circle"></li>

                    <li><a href="/{{ request.user.username }}" id="id_username">{{ 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/">修改密码</a></li>

                            <li><a href="/set_avatar/">修改头像</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="/login/">登录</a></li>

                    <li><a href="/register/">注册</a></li>

                {% endif %}

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-2">

            <div class="panel panel-success">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-warning">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-danger">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

        <div class="col-md-8">

            {% for article in article_list %}

                <ul class="media-list">

                    <li class="media">

                        <h4 class="media-heading"><a

                                href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a>

                        </h4>

                        <div class="media-left">

                            <a href="#">

                                <img class="media-object img-circle" src="/media/{{ article.blog.userinfo.avatar }}"

                                     width="60" alt="...">

                            </a>

                        </div>

                        <div class="media-body">

                            {{ article.desc }}

                        </div>

                        <div style="margin-top: 10px; color: darkgrey" class="pull-right">

                            {# zhangsan 发布于 2019-06-22 21:43 评论(0)点赞(159)#}

                            <span><a href="">{{ article.blog.userinfo.username }}&nbsp;&nbsp;</a></span>

                            <span>发布于&nbsp;{{ article.create_time|date:'Y-m-d' }}&nbsp;&nbsp;</span>

                            <span><span class="glyphicon glyphicon-comment"></span>评论({{ article.comment_num }})&nbsp;&nbsp;</span>

                            <span><span class="glyphicon glyphicon-thumbs-up"></span>点赞({{ article.up_num }})&nbsp;&nbsp;</span>

                        </div>

                    </li>

                </ul>

                <hr>

            {% endfor %}

        </div>

        <div class="col-md-2">

            <div class="panel panel-success">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-warning">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

            <div class="panel panel-danger">

                <div class="panel-heading">

                    <h3 class="panel-title">Panel title</h3>

                </div>

                <div class="panel-body">

                    Panel content

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

home.html

个人站点代码：

def site(request, username, *args, **kwargs):  # kwargs   'condition':'' , 'param':''

    user_obj = models.UserInfo.objects.filter(username=username).first()

    blog = user_obj.blog

    article_list = models.Article.objects.filter(blog=blog)

    if not user_obj:

        return render(request, 'error.html')

    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__pk=param)

        else:

            # param = '2018-06'

            year, month = param.split('-')

            article_list = article_list.filter(create_time__year=year, create_time__month=month)

    # # 统计当前用户对应的每一个分类及分类下的文章数

    # category_list = models.Category.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk')

    # print(category_list)

    # # 统计当前用户对应的每一个标签及标签下的文章数

    # tag_list = models.Tag.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk')

    # print(tag_list)

    # # 按日期归档

    # date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(

    #     c=Count('pk')).values_list('month', 'c')

    # print(date_list)

    return render(request, 'site.html', locals())

views.py视图函数部分代码

from django import template

from app01 import models

from django.db.models import Count

from django.db.models.functions import TruncMonth

register = template.Library()

@register.inclusion_tag('left_menu.html', name='left_menu')

def left_menu(username):

    user_obj = models.UserInfo.objects.filter(username=username).first()

    blog = user_obj.blog

    # 统计当前用户对应的每一个分类及分类下的文章数

    category_list = models.Category.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c',

                                                                                                       'pk')

    # print(category_list)

    # 统计当前用户对应的每一个标签及标签下的文章数

    tag_list = models.Tag.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk')

    # print(tag_list)

    # 按日期归档

    date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(

        'month').annotate(

        c=Count('pk')).values_list('month', 'c')

    # print(date_list)

    return {'user_obj': user_obj, 'blog': blog, 'category_list': category_list, 'tag_list': tag_list,

            'date_list': date_list}

mytag.py 后端模板逻辑

前端：

base.html 模板

left_menu.html  侧边栏部分内容

site.html 个人站点主页

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BBS论坛</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="/static/css/{{ blog.theme }}.css">

    {% block css %}

    {% endblock %}

</head>

<body>

<!--导航栏开始-->

<nav class="navbar navbar-default">

    <div class="container-fluid">

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <div>

                <span class="h2">{{ blog.site_title }}de个人博客</span>

                <a href="/home/" class="btn  btn-success pull-right">返回首页</a></div>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<!--导航栏结束-->

<div class="container-fluid">

    <div class="row">

         <div class="col-md-2">

            {% load mytag %}

             {% left_menu username %}

        </div>

        <div class="col-md-10">

        {% block content %}

        {% endblock %}

        </div>

    </div>

</div>

{% block js %}

{% endblock %}

</body>

</html>

base.html

<div class="panel panel-success">

  <div class="panel-heading">

    <h3 class="panel-title">文章分类</h3>

  </div>

  <div class="panel-body">

    {% for category in category_list %}

        <p><a href="/{{ user_obj.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="/{{ user_obj.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 date in date_list %}

        <p><a href="/{{ user_obj.username }}/archive/{{ date.0|date:'Y-m' }}">{{ date.0|date:'Y年m月' }}({{ date.1 }})</a></p>

    {% endfor %}

  </div>

</div>

left_menu.html

{% extends 'base.html' %}

{% block content %}

{% for article in article_list %}

    <ul class="media-list">

        <li class="media">

            <h4 class="media-heading"><a href="/{{ user_obj.username }}/article/{{ article.pk }}">{{ article.title }}</a></h4>

            <div class="media-left">

                <a href="#">

                    <img class="media-object img-circle" src="/media/{{ article.blog.userinfo.avatar }}"

                         width="60" alt="...">

                </a>

            </div>

            <div class="media-body">

                {{ article.desc }}

            </div>

            <div style="margin-top: 10px; color: darkgrey" class="pull-right">

                {# posted @ 2019-06-22 21:43 XXX 评论(0)点赞(159)#}

                <span>posted&nbsp;@&nbsp;{{ article.create_time|date:'Y-m-d' }}&nbsp;</span>

                <span>{{ article.blog.userinfo.username }}&nbsp; </span>

                <span class="glyphicon glyphicon-comment">评论({{ article.comment_num }}&nbsp;</span>

                <span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_num }})&nbsp; </span>

                <span><a href="">编辑</a></span>

            </div>

        </li>

    </ul>

    <hr>

{% endfor %}

{% endblock %}

site.html

BBS论坛 home主页与个人站点主页的更多相关文章

  1. Httpd服务入门知识-Httpd服务常见配置案例之定义站点主页面及错误页面配置

    Httpd服务入门知识-Httpd服务常见配置案例之定义站点主页面及错误页面配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.定义站点主页面 [root@node101.yi ...

  2. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  3. BBS论坛 后台管理

    七.后台管理 后台管理页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  5. Python之路,Day17 - 分分钟做个BBS论坛

    Python之路,Day17 - 分分钟做个BBS论坛   本节内容: 项目:开发一个简单的BBS论坛 需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同 ...

  6. Python开发一个简单的BBS论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  7. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  8. Django小项目简单BBS论坛

    开发一个简单的BBS论坛 项目需求: 1 整体参考"抽屉新热榜" + "虎嗅网" 2 实现不同论坛版块 3 帖子列表展示 4 帖子评论数.点赞数展示 5 在线用 ...

  9. bbs论坛浏览器兼容性问题

    一直都是在chrome上进行调试,今天终于把bbs论坛这个项目搭建完了,进入IE.Firefox看了看 吓哭了!!! 火狐 Edge chrome 特别是加了<!DOCTYPE html> ...

随机推荐

  1. js实现页面跳转的几种方法小结

    地址:https://www.jb51.net/article/84335.htm 地址:https://blog.csdn.net/tsoteo/article/details/77849403

  2. Java中的集合和线程安全

    通过Java指南我们知道Java集合框架(Collection Framework)如何为并发服务,我们应该如何在单线程和多线程中使用集合(Collection). 话题有点高端,我们不是很好理解.所 ...

  3. android中的Serveice组件

    创建 配置 Service: 1.定义一个继承了Service类的子类 2.在 AndroidManifest.xml清单文件中对开发的Service进行配置 Service和Activity很相似, ...

  4. Git分布式版本控制系统（上）

    Git分布式版本控制系统(上) 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方便 ...

  5. 牛客练习赛48 C,D,E

    C 小w的糖果 题意:3种操作,第一种是使pos右边的数全部+1,第二种是pos右边的数依次+k(k从1开始递增),第三种是pos右边的数依次+k^2(k从1开始递增). 解法:第一种我们很容易想到差 ...

  6. Codeforces 343D 线段树

    题意:给你一颗以点1为根的数,有两种操作,一种是把x及其子树的所有点都灌满水,一种是把x及其所有祖先都放空水,一种是询问,问某个点里有没有水? 思路:看网上大多数是树剖,但实际上5e5的数据树剖还是有 ...

  7. 前端学习(七）less（笔记）

    less---处理器:koala_2.0.4_portable 属于css预处理语言,可以让你的css语言更有逻辑性! 编译css的! 准备工作:    1.项目:        js         ...

  8. loj2472[九省联考2018]IIIDX

    题意:要求构造一个d的排列使得满足d[i/k]<=d[u]且字典序最大. 标程(bzoj上并不能过): #include<bits/stdc++.h> #define mid ((l ...

  9. taro-安装及使用-npm

    taro-安装及使用 https://nervjs.github.io/taro/docs/GETTING-STARTED.html 安装 Taro 项目基于 node,请确保已具备较新的 node ...

  10. ApiCloud如何一键真机测试

    首先假设你已经有了APICloud账号,并创建了App项目. 需要注意的是,手机和电脑需要连接在同一wifi环境下. 第一步 下载自定义Loader 进入“开发控制台” 点击我们的项目 选择模块,再选 ...