博客首页 标题/头像展示/评论/点赞数代码详情

作者头像展示功能：

第一步：新建media文件

setting.py 文件添加：

# Django用户上传的都叫media文件
 1 TEMPLATES = [
 2     {
 3         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 4         'DIRS': [os.path.join(BASE_DIR, 'templates')]
 5         ,
 6         'APP_DIRS': True,
 7         'OPTIONS': {
 8             'context_processors': [
 9                 'django.template.context_processors.media',
10                 'django.template.context_processors.debug',
11                 'django.template.context_processors.request',
12                 'django.contrib.auth.context_processors.auth',
13                 'django.contrib.messages.context_processors.messages',
14             ],
15         },
16     },
17 ]


 



MEDIA_URL = "/media/"
# media配置，用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")




urls.py文件：




from boke import settings
from django.conf.urls.static import static


urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)




index.html页面：




  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>index</title>
  6     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  7     <link rel="stylesheet" href="/static/mystyle.css">
  8 </head>
  9 <body>
 10 
 11 <nav class="navbar navbar-inverse">
 12     <div class="container-fluid">
 13         <!-- Brand and toggle get grouped for better mobile display -->
 14         <div class="navbar-header">
 15             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 16                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 17                 <span class="sr-only">Toggle navigation</span>
 18                 <span class="icon-bar"></span>
 19                 <span class="icon-bar"></span>
 20                 <span class="icon-bar"></span>
 21             </button>
 22             <a class="navbar-brand" href="#">The Blog</a>
 23         </div>
 24 
 25         <!-- Collect the nav links, forms, and other content for toggling -->
 26         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 27             <ul class="nav navbar-nav">
 28                 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 29                 <li><a href="#">Link</a></li>
 30             </ul>
 31             <ul class="nav navbar-nav navbar-right">
 32                 {% if request.user.username %}
 33                     <li><a href="#">{{ request.user.username }}</a></li>
 34                     <li class="dropdown">
 35                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 36                            aria-expanded="false">个人中心<span class="caret"></span></a>
 37                         <ul class="dropdown-menu">
 38                             <li><a href="#">Action</a></li>
 39                             <li><a href="#">Another action</a></li>
 40                             <li><a href="#">Something else here</a></li>
 41                             <li role="separator" class="divider"></li>
 42                             <li><a href="/logout/">注销</a></li>
 43                         </ul>
 44                     </li>
 45                 {% else %}
 46                     <li><a href="/login/">登录</a></li>
 47                     <li><a href="/reg/">注册</a></li>
 48                 {% endif %}
 49             </ul>
 50         </div><!-- /.navbar-collapse -->
 51     </div><!-- /.container-fluid -->
 52 </nav>
 53 
 54 <!-- 主页面 开始-->
 55 <div class="container">
 56     <div class="row">
 57         <div class="col-md-2">
 58             <div class="panel panel-primary">
 59                 <div class="panel-heading">左侧广告位一</div>
 60                 <div class="panel-body">
 61                     Panel content
 62                 </div>
 63             </div>
 64             <div class="panel panel-info">
 65                 <div class="panel-heading">左侧广告位二</div>
 66                 <div class="panel-body">
 67                     Panel content
 68                 </div>
 69             </div>
 70         </div>
 71         <div class="col-md-8">
 72             <!-- 文章列表 开始 -->
 73             <div class="article-list">
 74                 {% for article in article_list %}   <!--从文章表获取数据信息-->
 75                     <div class="article">
 76                         <h3><a href="">{{ article.title }}</a></h3>   <!--可点击的文章的标题-->
 77                         <div class="media">
 78                             <div class="media-left">
 79                                 <a href="#">
 80                                     <img class="media-object author-img" src="{{ MEDIA_URL }}{{ article.user.avatar }}" alt="...">
 81                                 </a>  <!--bootstarp 中的媒体对象 {{ article.user.avatar }}文章表找到作者信息 展示作者的头像 -->
 82                             </div>
 83                             <div class="media-body">
 84                                 <p>{{ article.desc }}</p>  <!--文章的描述信息-->
 85                             </div>
 86                         </div>
 87                         <div class="article-footer">
 88                             <span><a href="">{{ article.user.username }}</a></span>发布于  <!--作者姓名-->
 89                             <span>{{ article.create_time|date:'Y-m-d H:i:s' }}</span>   <!--发布时间-->
 90 <!-- 评论点赞数需要跨表查询  所以在article表中添加了 评论点赞字段：comment_count-->
 91                             <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span><!--article.comment_set.all.count article当前文章.comment_set 表名+set 查询该文章下的所有评论-->
 92                             <span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_count }})</span><!--class 是点赞的图标-->
 93                         </div>
 94                     </div>
 95                 {% endfor %}
 96 
 97             </div>
 98             <!-- 文章列表 结束-->
 99 
100         </div>
101         <div class="col-md-2">
102             <div class="panel panel-primary">
103                 <div class="panel-heading">右侧广告位一</div>
104                 <div class="panel-body">
105                     Panel content
106                 </div>
107             </div>
108             <div class="panel panel-info">
109                 <div class="panel-heading">右侧广告位二</div>
110                 <div class="panel-body">
111                     Panel content
112                 </div>
113             </div>
114         </div>
115     </div>
116 </div>
117 <!-- 主页面 结束-->
118 
119 <script src="/static/jquery-3.3.1.js"></script>
120 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
121 </body>




mystyle.css： 




/* 博客主页面 自定义样式*/
.author-img {     /*头像的大小*/
    width: 80px;
    height: 80px;
}
/*span标签的内容 向右间隔15px*/
.article-footer span {  /*作者，发布时间，评论和点赞之间的间隔*/
    margin-right: 15px;
}
/*和上面的距离间隔10px*/
.article-footer {   /**/
    margin-top: 10px;
}








            

            
posted @ 
2022-09-28 16:21 
张丶先森 
阅读(77) 
评论(0) 
 
收藏 
举报