个人站点页面搭建和侧边栏展示功能

展示个人站点页面

前端代码:和首页文章展示基本一样:

<div class="col-md-8">
            {% for article in article_list %}
                <ul class="media-list">
                    <li class="media">
                        <a href=""><h4 class="media-heading">{{ article.title }}</h4></a>
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}/" alt="..." width="60">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                        <br>
                        <div class="pull-right">
                            <span><a href="">{{ article.blog.userinfo.username }}</a></span>&nbsp;
                            <span>发布于:{{ article.create_time|date:'Y-m-d' }}</span>&nbsp;
                            <span class="glyphicon glyphicon-thumbs-up">点赞数:({{ article.up_num }})</span>&nbsp;
                            <span class="glyphicon glyphicon-comment">评论数:({{ article.comment_num }})</span>&nbsp;
                        </div>
                    </li>
                </ul>
                <br>
            {% endfor %}
        </div>

后端代码:在url中需要手动输入不同的用户名,所以需要视图函数需要输入参数username

def site(request,username):
    # 1.先查出手动输入的username对应的用户对象
    user_obj = models.UserInfo.objects.filter(username=username).first()
    # 2.如果输入的用户名不存在,则报错跳转404页面
    if not user_obj:
        return render(request,'error.html')
    # 3.查询出个人用户对应的个人站点
    blog = user_obj.blog
    # 4.根据个人站点查出对应的文章
    article_list = models.Article.objects.filter(blog=blog)
    return render(request,'site.html',locals())

侧边栏展示功能

补充小知识点:个人站点样式搭建

对于不同个人站点需要不同样式时,我们可以在media文件夹下新建一个css文件夹,里面可以存放用户上传的不同css文件,再在个人站点html页面下面添加对应站点的css文件!!
<link rel="stylesheet" href="/media/css/{{ user_obj.username }}.css">

侧边栏展示了三大版块,分别是:文章分类、文章标签、日期归档!

文章分类和文章标签的书写和渲染,只要将其在后端对应查询出来,如何传入前端页面,交给模板页面渲染即可!
后端:

    # 5.侧边栏数据传入
    # (1)查询出当前用户所有的分类及分类下的文章数
    category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name','count_num')
    # print(category_list)  格式为:<QuerySet [('zhang的分类1', 2), ('zhang的分类2', 1), ('zhang的分类3', 2)]>
    # (2)查询出当前用户的所有标签和标签下的文章数
    tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name','count_num')
    # print(tag_list) 格式为:<QuerySet [('zhang的标签1', 3), ('zhang的标签2', 2), ('zhang的标签3', 2)]>

前端:

            <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="">{{ category.0 }}({{ category.1 }})</a></p>
                    {% endfor %}
                </div>
            </div>

关于日期归档版块的渲染:

我们在创建文章的时候,create_time字段是包含年月日时分秒的,而我们进行日期归档的时候往往是按照年月进行归档的!

所有,这时候就需要用到django官方提供的一个TruncMonth模块

它的功能是能够帮您在生成一个临时的查询表,新增了一个年月的字段,如何按这个字段进行分组查询

from django.db.models.functions import TruncMonth

后端:
    # (3)按照年月统计出当前用户所有的文章
    data_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(count_num=Count('pk')).values('month','count_num')
    # print(data_list)
# 这句查询语句的意思是先查出当前用户,然后利用TruncMonth对create_time进行过滤新增一个month年月字段,然后.values按照month字段分组,统计出当前文章的个数,最后取值!

前端:
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">日期归档</h3>
                </div>
                <div class="panel-body">
                    {% for data in data_list %}
                        <p><a href="">{{ data.month|date:'Y年m月' }}({{ data.count_num }})</a></p>
                    {% endfor %}
                </div>
            </div>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:个人站点页面搭建和侧边栏展示功能 - Python技术站

(0)
上一篇 2023年4月2日
下一篇 2023年4月2日

相关文章

  • django中有关ajax的部分

    Django_ajax 1 简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求; 异步交互:客户…

    Python开发 2023年4月2日
    00
  • 修改密码弹出框搭建

    前端代码搭建 主要利用的是bootstrap3中js插件里的模态框版块 <li><a href=”” data-toggle=”modal” data-target=”.bs-example-modal-lg”>修改密码</a></li> <div class=”modal fade bs-example…

    Python开发 2023年4月2日
    00
  • 轮播图前端

    轮播图组件 <template> <div id=”banner”> <el-carousel height=”400px”> <!– 将banner_list循环–> <el-carousel-item v-for=”item in banner_list” :key=”item”> <…

    2023年4月2日
    00
  • git的介绍和使用

    git介绍 什么是git git是一种版本控制器 – 控制的对象是开发的项目代码 什么是版本控制器 完成 协同开发 项目,帮助程序员整合代码 i)帮助开发者合并开发的代码 ii)如果出现冲突代码的合并,会提示后提交合并代码的开发者,让其解决冲突 软件:SVN 、 GIT(都是同一个人的个人项目) github、gitee(两个采用git版本控制器管理代码的公…

    2023年4月2日
    00
  • 计算机介绍和五大组成

    1. 什么是计算机 计算机俗称‘电脑’,通电的人脑。其实,计算机所有的组成部分,都是模仿人的某一个功能或者器官。 2. 为什么要有计算机 为了执行人类通过编程语言编写的文件程序,从而把人类解放出来。 3.计算机的组成部分 计算机有五大组成部分:控制器、运算器、存储器、输入设备、输出设备。 3.1 控制器 它是计算机的指挥系统,负责控制计算机其他的组件如何进行…

    2023年4月2日
    00
  • 一切皆对象和深浅拷贝

    1.元类 元类的来源是:python中一切皆对象。 1.1 什么是元类 元类就是用来实例化产生类的类 关系:元类—实例化—类(自定义的类)—实例化—-对象(obj) 1.2如何查看内置的元类 1.type是内置的元类2.我们用class关键字定义出来的所有类以及内置的类都是由内置的元类type实例化产生的 例如:在python中int、dic…

    2023年4月2日
    00
  • 后台response和异常处理封装

    我们自己封装的一些东西,往往放在一个utils文件夹内,以后也方便管理和导入 后台response封装 # 自己封装的Response对象 from rest_framework.response import Response class APIResponse(Response): def __init__(self,code=1,msg=’成功’,re…

    2023年4月2日
    00
  • 面向对象介绍

    1.什么是面向对象和面向过程编程思想 面向过程: 1.核心是‘过程’二字2.过程的含义是将程序流程化3.过程是流水线,用来分步骤解决问题的 程序=数据+功能 面向对象: 1.核心是‘对象’二字2.对象的含义是将程序进行整合3.对象是‘容器’,用来盛放数据和功能(变量和函数) 总结:以做西红柿鸡蛋面为例: 面向过程:我需要买西红柿–》买鸡蛋、面–》把西红柿…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部