一个简单的小项目博客园（5）文章详情页，点赞点踩功能以及评论功能

最新推荐文章于 2022-09-30 12:07:26 发布

番茄炒蛋君

最新推荐文章于 2022-09-30 12:07:26 发布

阅读量1.1k

点赞数 4

分类专栏： bbs项目 django 文章标签： django bbs

本文链接：https://blog.csdn.net/qq_36327717/article/details/101213544

版权

文章详情页
点赞点踩功能
文章评论功能

文章详情页，点赞点踩功能

路由配置

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import serve
from bbs_exercise import settings

urlpatterns = [
    url(r'^register/', views.register),
    url(r'^login/', views.login),
    url(r'^home/', views.home),
    url(r'^admin/', admin.site.urls),

    # 图片验证码
    url(r'^get_code/', views.get_code),

    # 点赞点踩逻辑
    url(r'^updown/', views.updown),

    # media配置
    url(r'^media/(?P<path>.*)', serve, {
     'document_root': settings.MEDIA_ROOT}),

    # 个人博客路由
    url(r'^(?P<username>\w+)/(?P<condition>category|tag|archive)/(?P<param>.*)/', views.site),  # 侧边栏筛选传递关键字参数至views.py
    url(r'^(?P<username>\w+)/$', views.site),

    # 文章详情页
    url(r'^(?P<username>\w+)/article/(?P<article_id>\d+)/', views.article_detail),

]

回到目录

文章详情页逻辑

views.py

from django.db.models import Count
from django.db.models.functions import TruncMonth

def article_detail(request, username, article_id):
	# 获取文章对象
    article_obj = models.Article.objects.filter(pk=article_id).first()
	# 获取文章对应的博客
    blog = article_obj.blog.userinfo_set.first().blog
    # 获取分类信息
    category_list = models.Category.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c',
                                                                                                   'pk')
	# 获取标签信息
    tag_list = models.Tag.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk')
	# 获取日期信息
    date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(
        'month').annotate(c=Count('id')).values_list('month', 'c')
        
    return render(request, 'article_detail.html', locals())

文章详情页html

首先将点赞点踩的gif图片，另存为/static/img/下，提供两个博客园的图片url
https://static.cnblogs.com/images/upup.gif
https://static.cnblogs.com/images/downdown.gif

article_detail.html（主体和博客主页一样，只需渲染文章内容即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{
    { article_obj.title }}</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>
    <style>
        .buryit {
      
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url(/static/img/downdown.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        #div_digg {
      
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
      
            float: left;
            width: 46px;
            height: 52px;
            background: url(/static/img/upup.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .diggword {
      
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }

        .clear {
      
            clear: both;
        }
    </style>
</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="#