整体设计理念

  1. 设计系统首页（文章列表的渲染）
  2. admin:
  3.     Django内部的一个组件：后台数据库管理组件（Web页面）
  4.     python manage.py createsuperuser  针对用户认证组件对应的用户表

第一个设计—根路径为首页[区分登录与未登录的首页内容]

修改URL路径[15]

  1. from django.contrib import admin
  2. from django.urls import path, include, re_path
  3. from django.conf import settings
  4. from django.conf.urls.static import static
  5. from blog import views
  6. urlpatterns = [
  7.     path('admin/', admin.site.urls),
  8.     path('summernote/', include('django_summernote.urls')),
  9.     # http://127.0.0.1:8001/login/
  10.     path('login/', views.login),
  11.     path('get_validCode_img/', views.get_validCode_img),
  12.     # http://127.0.0.1:8001/index/
  13.     path('index/', views.index),
  14.     # http://127.0.0.1:8001/
  15.     re_path('^$', views.index),
  16.     # http://127.0.0.1:8001/registry/
  17.     path('registry/', views.registry),
  19. ]

首页渲染 - 图1

实现效果

首页渲染 - 图2

第二个设计—导入和使用Bootstrap的导航栏

基础资源下载地址以及网页详情

Bootstrap

首页渲染 - 图3

导航条资源路径

导航条资源路径

首页渲染 - 图4

index.html

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  8.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  9.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  10. </head>
  11. <body>
  12. {#打印登录者的信息#}
  13. <h3>欢迎您{{ request.user.username }}</h3>
  14. <nav class="navbar navbar-default">
  15.   <div class="container-fluid">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  19.         <span class="sr-only">Toggle navigation</span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.         <span class="icon-bar"></span>
  23.       </button>
  24.       <a class="navbar-brand" href="#">Brand</a>
  25.     </div>
  27.     <!-- Collect the nav links, forms, and other content for toggling -->
  28.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  29.       <ul class="nav navbar-nav">
  30.         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  31.         <li><a href="#">Link</a></li>
  32.         <li class="dropdown">
  33.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  34.           <ul class="dropdown-menu">
  35.             <li><a href="#">Action</a></li>
  36.             <li><a href="#">Another action</a></li>
  37.             <li><a href="#">Something else here</a></li>
  38.             <li role="separator" class="divider"></li>
  39.             <li><a href="#">Separated link</a></li>
  40.             <li role="separator" class="divider"></li>
  41.             <li><a href="#">One more separated link</a></li>
  42.           </ul>
  43.         </li>
  44.       </ul>
  45.       <form class="navbar-form navbar-left">
  46.         <div class="form-group">
  47.           <input type="text" class="form-control" placeholder="Search">
  48.         </div>
  49.         <button type="submit" class="btn btn-default">Submit</button>
  50.       </form>
  51.       <ul class="nav navbar-nav navbar-right">
  52.         <li><a href="#">Link</a></li>
  53.         <li class="dropdown">
  54.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  55.           <ul class="dropdown-menu">
  56.             <li><a href="#">Action</a></li>
  57.             <li><a href="#">Another action</a></li>
  58.             <li><a href="#">Something else here</a></li>
  59.             <li role="separator" class="divider"></li>
  60.             <li><a href="#">Separated link</a></li>
  61.           </ul>
  62.         </li>
  63.       </ul>
  64.     </div><!-- /.navbar-collapse -->
  65.   </div><!-- /.container-fluid -->
  66. </nav>
  67. </body>
  68. </html>

实现效果

首页渲染 - 图5

代码微调

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  8.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  9.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  10. </head>
  11. <body>
  12. {#打印登录者的信息#}
  13. <h3>欢迎您{{ request.user.username }}</h3>
  14. <nav class="navbar navbar-default">
  15.   <div class="container-fluid">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  19.         <span class="sr-only">Toggle navigation</span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.         <span class="icon-bar"></span>
  23.       </button>
  24.       <a class="navbar-brand" href="#">个人博客系统</a>
  25.     </div>
  27.     <!-- Collect the nav links, forms, and other content for toggling -->
  28.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  29.       <ul class="nav navbar-nav">
  30.         <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  31.         <li><a href="#">新闻</a></li>
  32.       </ul>
  33.       <ul class="nav navbar-nav navbar-right">
  34.         <li><a href="#">新闻</a></li>
  35.         <li><a href="#">博文</a></li>
  36.         <li class="dropdown">
  37.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  38.           <ul class="dropdown-menu">
  39.             <li><a href="#">修改密码</a></li>
  40.             <li><a href="#">修改头像</a></li>
  41.             <li><a href="#">注销</a></li>
  42.             <li role="separator" class="divider"></li>
  43.             <li><a href="#">Separated link</a></li>
  44.           </ul>
  45.         </li>
  46.       </ul>
  47.     </div><!-- /.navbar-collapse -->
  48.   </div><!-- /.container-fluid -->
  49. </nav>
  50. </body>
  51. </html>

实现效果

首页渲染 - 图6

前端报错[Uncaught Error: Bootstrap’s JavaScript requires jQuery]

解决策略—更换js和bootstrap的顺序

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10. </head>
  11. <body>
  12. {#打印登录者的信息#}
  13. <h3>欢迎您{{ request.user.username }}</h3>
  14. <nav class="navbar navbar-default">
  15.   <div class="container-fluid">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  19.         <span class="sr-only">Toggle navigation</span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.         <span class="icon-bar"></span>
  23.       </button>
  24.       <a class="navbar-brand" href="#">个人博客系统</a>
  25.     </div>
  27.     <!-- Collect the nav links, forms, and other content for toggling -->
  28.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  29.       <ul class="nav navbar-nav">
  30.         <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  31.         <li><a href="#">新闻</a></li>
  32.       </ul>
  33.       <ul class="nav navbar-nav navbar-right">
  34.         <li><a href="#">新闻</a></li>
  35.         <li><a href="#">博文</a></li>
  36.         <li class="dropdown">
  37.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  38.           <ul class="dropdown-menu">
  39.             <li><a href="#">修改密码</a></li>
  40.             <li><a href="#">修改头像</a></li>
  41.             <li><a href="#">注销</a></li>
  42.             <li role="separator" class="divider"></li>
  43.             <li><a href="#">Separated link</a></li>
  44.           </ul>
  45.         </li>
  46.       </ul>
  47.     </div><!-- /.navbar-collapse -->
  48.   </div><!-- /.container-fluid -->
  49. </nav>
  50. </body>
  51. </html>

参考教程

解决前端报错

最终效果—下拉菜单正常

首页渲染 - 图7

第三个设计—-增加对用户登录状态的判断

index.html页面源码

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10. </head>
  11. <body>
  12. {#打印登录者的信息#}
  13. <h3>欢迎您{{ request.user.username }}</h3>
  14. <nav class="navbar navbar-default">
  15.   <div class="container-fluid">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  19.         <span class="sr-only">Toggle navigation</span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.         <span class="icon-bar"></span>
  23.       </button>
  24.       <a class="navbar-brand" href="#">个人博客系统</a>
  25.     </div>
  27.     <!-- Collect the nav links, forms, and other content for toggling -->
  28.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  29.       <ul class="nav navbar-nav">
  30.         <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  31.         <li><a href="#">新闻</a></li>
  32.       </ul>
  33.       <ul class="nav navbar-nav navbar-right">
  35.           {% if request.user.is_authenticated %}
  36.             <li><a href="#">{{ request.user.username }}</a></li>
  37.             <li class="dropdown">
  38.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  39.           <ul class="dropdown-menu">
  40.             <li><a href="#">修改密码</a></li>
  41.             <li><a href="#">修改头像</a></li>
  42.             <li><a href="/logout/">注销</a></li>
  43.             <li role="separator" class="divider"></li>
  44.             <li><a href="#">Separated link</a></li>
  45.           </ul>
  46.         </li>
  47.           {% else %}
  48.               <li><a href="/login/">登录</a></li>
  49.               <li><a href="/registry/">注册</a></li>
  50.           {% endif %}
  52.         <li><a href="#">新闻</a></li>
  53.       </ul>
  54.     </div><!-- /.navbar-collapse -->
  55.   </div><!-- /.container-fluid -->
  56. </nav>
  57. </body>
  58. </html>

相对代码关系

首页渲染 - 图8

删除会话记录重新登录

首页渲染 - 图9

最终实现效果

首页渲染 - 图10

第四个设计—注销后跳转登录页面

index.html页面源码[42]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10. </head>
  11. <body>
  12. {#打印登录者的信息#}
  13. <h3>欢迎您{{ request.user.username }}</h3>
  14. <nav class="navbar navbar-default">
  15.   <div class="container-fluid">
  16.     <!-- Brand and toggle get grouped for better mobile display -->
  17.     <div class="navbar-header">
  18.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  19.         <span class="sr-only">Toggle navigation</span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.         <span class="icon-bar"></span>
  23.       </button>
  24.       <a class="navbar-brand" href="#">个人博客系统</a>
  25.     </div>
  27.     <!-- Collect the nav links, forms, and other content for toggling -->
  28.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  29.       <ul class="nav navbar-nav">
  30.         <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  31.         <li><a href="#">新闻</a></li>
  32.       </ul>
  33.       <ul class="nav navbar-nav navbar-right">
  35.           {% if request.user.is_authenticated %}
  36.             <li><a href="#">{{ request.user.username }}</a></li>
  37.             <li class="dropdown">
  38.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  39.           <ul class="dropdown-menu">
  40.             <li><a href="#">修改密码</a></li>
  41.             <li><a href="#">修改头像</a></li>
  42.             <li><a href="/logout/">注销</a></li>
  43.             <li role="separator" class="divider"></li>
  44.             <li><a href="#">Separated link</a></li>
  45.           </ul>
  46.         </li>
  47.           {% else %}
  48.               <li><a href="/login/">登录</a></li>
  49.               <li><a href="/registry/">注册</a></li>
  50.           {% endif %}
  52.       </ul>
  53.     </div><!-- /.navbar-collapse -->
  54.   </div><!-- /.container-fluid -->
  55. </nav>
  56. </body>
  57. </html>

关联操作

  1. 1. views.py
  2.     from django.contrib import auth
  3.     def logout(request):
  4.         auth.logout(request)  # 等同于request.session.flush
  5.         # return redirect("templates/blog/login.html")
  6.         return redirect("/login/")
  7. 2. urls.py[19]
  8. from django.contrib import admin
  9. from django.urls import path, include, re_path
  10. from django.conf import settings
  11. from django.conf.urls.static import static
  12. from blog import views
  13. urlpatterns = [
  14.     path('admin/', admin.site.urls),
  15.     path('summernote/', include('django_summernote.urls')),
  16.     # http://127.0.0.1:8001/login/
  17.     path('login/', views.login),
  18.     # http://127.0.0.1:8001/logout/
  19.     path('logout/', views.logout),
  20.     path('get_validCode_img/', views.get_validCode_img),
  21.     # http://127.0.0.1:8001/index/
  22.     path('index/', views.index),
  23.     # http://127.0.0.1:8001/
  24.     re_path('^$', views.index),
  25.     # http://127.0.0.1:8001/registry/
  26.     path('registry/', views.registry),
  28. ]

踩坑

  1. redirect的参数应该是网页片段，而不是H5文件

第五个设计—增加首页用户旁边的小图标

index.html页面代码[44 & 10-16]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10.     <style>
  11.         #user_icon {
  12.             font-size: 18px;
  13.             margin-right: 10px;
  14.             vertical-align: -3px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. {#打印登录者的信息#}
  20. <h3>欢迎您{{ request.user.username }}</h3>
  21. <nav class="navbar navbar-default">
  22.     <div class="container-fluid">
  23.         <!-- Brand and toggle get grouped for better mobile display -->
  24.         <div class="navbar-header">
  25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  26.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  27.                 <span class="sr-only">Toggle navigation</span>
  28.                 <span class="icon-bar"></span>
  29.                 <span class="icon-bar"></span>
  30.                 <span class="icon-bar"></span>
  31.             </button>
  32.             <a class="navbar-brand" href="#">个人博客系统</a>
  33.         </div>
  35.         <!-- Collect the nav links, forms, and other content for toggling -->
  36.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  37.             <ul class="nav navbar-nav">
  38.                 <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  39.                 <li><a href="#">新闻</a></li>
  40.             </ul>
  41.             <ul class="nav navbar-nav navbar-right">
  43.                 {% if request.user.is_authenticated %}
  44.                     <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a>
  45.                     </li>
  46.                     <li class="dropdown">
  47.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  48.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  49.                         <ul class="dropdown-menu">
  50.                             <li><a href="#">修改密码</a></li>
  51.                             <li><a href="#">修改头像</a></li>
  52.                             <li><a href="/logout/">注销</a></li>
  53.                             <li role="separator" class="divider"></li>
  54.                             <li><a href="#">Separated link</a></li>
  55.                         </ul>
  56.                     </li>
  57.                 {% else %}
  58.                     <li><a href="/login/">登录</a></li>
  59.                     <li><a href="/registry/">注册</a></li>
  60.                 {% endif %}
  62.             </ul>
  63.         </div><!-- /.navbar-collapse -->
  64.     </div><!-- /.container-fluid -->
  65. </nav>
  66. </body>
  67. </html>

实现效果

首页渲染 - 图11

第六个设计—主体页面布局

新增代码的填充区域

首页渲染 - 图12

第一次修改的预期页面

首页渲染 - 图13

对应代码

首页渲染 - 图14

第二次代码修改—增加左侧面板

首页渲染 - 图15

后端代码

首页渲染 - 图16

第三次代码添加—增加右侧面板

首页渲染 - 图17

后端代码

首页渲染 - 图18

第七个设计—使用admin注册数据表[为导入文章数据做准备]

admin.py代码

  1. from django.contrib import admin
  2. from django_summernote.admin import SummernoteModelAdmin
  3. from django.contrib.auth.admin import UserAdmin
  4. from .models import UserInfo, Blog, Category, Tag, Article2Tag, Article, ArticleUpDown, Comment
  7. class BlogModelAdmin(SummernoteModelAdmin):
  8.     summernote_fields = ('title')
  11. admin.site.register(UserInfo)
  12. admin.site.register(Blog)
  13. admin.site.register(Category)
  14. admin.site.register(Tag)
  15. admin.site.register(Article2Tag)
  16. admin.site.register(Article)
  17. admin.site.register(ArticleUpDown)
  18. admin.site.register(Comment)
  19. # Register your models here.

效果展示

首页渲染 - 图19

首页渲染 - 图20

问题记录

数据库用户表查看

首页渲染 - 图21

首页渲染 - 图22

前端报错

首页渲染 - 图23

尝试解决—更改表结构

更改前

首页渲染 - 图24

更改后

首页渲染 - 图25

迁移失败，删除所有表结构重新迁移再添加字段

第八个设计—添加数据

后台添加blog对象

首页渲染 - 图26

首页渲染 - 图27

在UserInfo修改用户信息[绑定用户与个人站点]

首页渲染 - 图28

在Article中添加文章[绑定文章，作者，用户站点]

首页渲染 - 图29

第九个设计—文章列表的渲染

views.py中的操作

  1. def index(request):
  2.     """
  3.     需要导入整个models模块，然后导出所有的文章
  4.     文章数据从models提取出来，然后由views视图将数据渲染的时候传递给首页index,首页index再进行相关的渲染
  5.     """
  6.     article_list = models.Article.objects.all()
  7.     return render(request, "blog/index.html", {"article_list":article_list})

index.html中的代码

显示文章列表

  1.         <div class="col-md-6">
  2.             <div class="article_list">
  3.                 {% for article in article_list%}
  4.                     <div class="article_item">
  5.                     <h5><a href="">{{ article.title }}</a></h5>
  6.                     </div>
  7.                 {% endfor %}
  8.             </div>
  9.         </div>

定位

首页渲染 - 图30

实现效果

首页渲染 - 图31

显示作者及头像

在admin中为用户选取头像

首页渲染 - 图32

从数据库中userinfo中获取头像以及用户名

首页渲染 - 图33

提取并且展示摘要

首页渲染 - 图34

关键代码

首页渲染 - 图35

设置头像左移，详情右移

关键代码

首页渲染 - 图36

显示效果

首页渲染 - 图37

设置分界线

关键代码—循环结束后设置

首页渲染 - 图38

显示效果

首页渲染 - 图39

第十个设计—详情补充

添加blog作者

关键代码

首页渲染 - 图40

实现效果

首页渲染 - 图41

显示创建时间并且指定显示格式

后端代码

首页渲染 - 图42

实现效果

首页渲染 - 图43

添加评论图标

关键代码[106]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10.     <style>
  11.         #user_icon {
  12.             font-size: 18px;
  13.             margin-right: 10px;
  14.             vertical-align: -3px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. {#打印登录者的信息#}
  20. <h3>欢迎您{{ request.user.username }}</h3>
  21. <nav class="navbar navbar-default">
  22.     <div class="container-fluid">
  23.         <!-- Brand and toggle get grouped for better mobile display -->
  24.         <div class="navbar-header">
  25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  26.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  27.                 <span class="sr-only">Toggle navigation</span>
  28.                 <span class="icon-bar"></span>
  29.                 <span class="icon-bar"></span>
  30.                 <span class="icon-bar"></span>
  31.             </button>
  32.             <a class="navbar-brand" href="#">个人博客系统</a>
  33.         </div>
  35.         <!-- Collect the nav links, forms, and other content for toggling -->
  36.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  37.             <ul class="nav navbar-nav">
  38.                 <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  39.                 <li><a href="#">新闻</a></li>
  40.             </ul>
  41.             <ul class="nav navbar-nav navbar-right">
  43.                 {% if request.user.is_authenticated %}
  44.                     <li><a href="#"><span id="user_icon"
  45.                                           class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a>
  46.                     </li>
  47.                     <li class="dropdown">
  48.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  49.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  50.                         <ul class="dropdown-menu">
  51.                             <li><a href="#">修改密码</a></li>
  52.                             <li><a href="#">修改头像</a></li>
  53.                             <li><a href="/logout/">注销</a></li>
  54.                             <li role="separator" class="divider"></li>
  55.                             <li><a href="#">Separated link</a></li>
  56.                         </ul>
  57.                     </li>
  58.                 {% else %}
  59.                     <li><a href="/login/">登录</a></li>
  60.                     <li><a href="/registry/">注册</a></li>
  61.                 {% endif %}
  63.             </ul>
  64.         </div><!-- /.navbar-collapse -->
  65.     </div><!-- /.container-fluid -->
  66. </nav>
  67. <div class="container-fluid">
  68.     <div class="row">
  69.         <div class="col-md-3">
  70.             <div class="panel panel-warning">
  71.                 <div class="panel-heading">Panel heading without title</div>
  72.                 <div class="panel-body">
  73.                     Panel content
  74.                 </div>
  75.             </div>
  76.             <div class="panel panel-info">
  77.                 <div class="panel-heading">Panel heading without title</div>
  78.                 <div class="panel-body">
  79.                     Panel content
  80.                 </div>
  81.             </div>
  82.             <div class="panel panel-danger">
  83.                 <div class="panel-heading">Panel heading without title</div>
  84.                 <div class="panel-body">
  85.                     Panel content
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         <div class="col-md-6">
  90.             <div class="article_list">
  91.                 {% for article in article_list%}
  92.                     <div class="article_item">
  93.                     <h5><a href="">{{ article.title }}</a></h5>
  94.                     <div class="article-desc">
  95.                         <span class="media-left">
  96.                             <a href=""><img width="60" height="60" src="/media/{{ article.user.avatar }}" alt=""></a>
  97.                         </span>
  98.                         <span class="media-right">
  99.                             {{ article.desc }}
  100.                         </span>
  101.                     </div>
  102.                     </div>
  103.                     <div>
  104.                     <span><a href="">{{ article.user.username }}</a></span> &nbsp;&nbsp;&nbsp;
  105.                     <span>发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;&nbsp;
  106.                     <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>&nbsp;&nbsp;&nbsp;
  107.                     </div>
  108.                     <hr>
  109.                 {% endfor %}
  110.             </div>
  111.         </div>
  112.         <div class="col-md-3">
  113.             <div class="panel panel-primary">
  114.                 <div class="panel-heading">Panel heading without title</div>
  115.                 <div class="panel-body">
  116.                     Panel content
  117.                 </div>
  118.             </div>
  119.             <div class="panel panel-default">
  120.                 <div class="panel-heading">Panel heading without title</div>
  121.                 <div class="panel-body">
  122.                     Panel content
  123.                 </div>
  124.             </div>
  125.         </div>
  126.     </div>
  127. </div>
  128. </body>
  129. </html>

关键区域

首页渲染 - 图44

显示效果

首页渲染 - 图45

添加点赞图标以及数量

关键代码区

首页渲染 - 图46

关键代码[107]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10.     <style>
  11.         #user_icon {
  12.             font-size: 18px;
  13.             margin-right: 10px;
  14.             vertical-align: -3px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. {#打印登录者的信息#}
  20. <h3>欢迎您{{ request.user.username }}</h3>
  21. <nav class="navbar navbar-default">
  22.     <div class="container-fluid">
  23.         <!-- Brand and toggle get grouped for better mobile display -->
  24.         <div class="navbar-header">
  25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  26.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  27.                 <span class="sr-only">Toggle navigation</span>
  28.                 <span class="icon-bar"></span>
  29.                 <span class="icon-bar"></span>
  30.                 <span class="icon-bar"></span>
  31.             </button>
  32.             <a class="navbar-brand" href="#">个人博客系统</a>
  33.         </div>
  35.         <!-- Collect the nav links, forms, and other content for toggling -->
  36.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  37.             <ul class="nav navbar-nav">
  38.                 <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  39.                 <li><a href="#">新闻</a></li>
  40.             </ul>
  41.             <ul class="nav navbar-nav navbar-right">
  43.                 {% if request.user.is_authenticated %}
  44.                     <li><a href="#"><span id="user_icon"
  45.                                           class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a>
  46.                     </li>
  47.                     <li class="dropdown">
  48.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  49.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  50.                         <ul class="dropdown-menu">
  51.                             <li><a href="#">修改密码</a></li>
  52.                             <li><a href="#">修改头像</a></li>
  53.                             <li><a href="/logout/">注销</a></li>
  54.                             <li role="separator" class="divider"></li>
  55.                             <li><a href="#">Separated link</a></li>
  56.                         </ul>
  57.                     </li>
  58.                 {% else %}
  59.                     <li><a href="/login/">登录</a></li>
  60.                     <li><a href="/registry/">注册</a></li>
  61.                 {% endif %}
  63.             </ul>
  64.         </div><!-- /.navbar-collapse -->
  65.     </div><!-- /.container-fluid -->
  66. </nav>
  67. <div class="container-fluid">
  68.     <div class="row">
  69.         <div class="col-md-3">
  70.             <div class="panel panel-warning">
  71.                 <div class="panel-heading">Panel heading without title</div>
  72.                 <div class="panel-body">
  73.                     Panel content
  74.                 </div>
  75.             </div>
  76.             <div class="panel panel-info">
  77.                 <div class="panel-heading">Panel heading without title</div>
  78.                 <div class="panel-body">
  79.                     Panel content
  80.                 </div>
  81.             </div>
  82.             <div class="panel panel-danger">
  83.                 <div class="panel-heading">Panel heading without title</div>
  84.                 <div class="panel-body">
  85.                     Panel content
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         <div class="col-md-6">
  90.             <div class="article_list">
  91.                 {% for article in article_list%}
  92.                     <div class="article_item">
  93.                     <h5><a href="">{{ article.title }}</a></h5>
  94.                     <div class="article-desc">
  95.                         <span class="media-left">
  96.                             <a href=""><img width="60" height="60" src="/media/{{ article.user.avatar }}" alt=""></a>
  97.                         </span>
  98.                         <span class="media-right">
  99.                             {{ article.desc }}
  100.                         </span>
  101.                     </div>
  102.                     </div>
  103.                     <div>
  104.                     <span><a href="">{{ article.user.username }}</a></span> &nbsp;&nbsp;&nbsp;
  105.                     <span>发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;&nbsp;
  106.                     <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>&nbsp;&nbsp;&nbsp;
  107.                     <span class="glyphicon glyphicon-thumbs-up">评论({{ article.up_count }})</span>&nbsp;&nbsp;&nbsp;
  108.                     </div>
  109.                     <hr>
  110.                 {% endfor %}
  111.             </div>
  112.         </div>
  113.         <div class="col-md-3">
  114.             <div class="panel panel-primary">
  115.                 <div class="panel-heading">Panel heading without title</div>
  116.                 <div class="panel-body">
  117.                     Panel content
  118.                 </div>
  119.             </div>
  120.             <div class="panel panel-default">
  121.                 <div class="panel-heading">Panel heading without title</div>
  122.                 <div class="panel-body">
  123.                     Panel content
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </div>
  129. </body>
  130. </html>

实现效果

首页渲染 - 图47

修改详情文字与信息展示条文字的对比度

代码区

首页渲染 - 图48

关键代码[103]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10.     <style>
  11.         #user_icon {
  12.             font-size: 18px;
  13.             margin-right: 10px;
  14.             vertical-align: -3px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. {#打印登录者的信息#}
  20. <h3>欢迎您{{ request.user.username }}</h3>
  21. <nav class="navbar navbar-default">
  22.     <div class="container-fluid">
  23.         <!-- Brand and toggle get grouped for better mobile display -->
  24.         <div class="navbar-header">
  25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  26.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  27.                 <span class="sr-only">Toggle navigation</span>
  28.                 <span class="icon-bar"></span>
  29.                 <span class="icon-bar"></span>
  30.                 <span class="icon-bar"></span>
  31.             </button>
  32.             <a class="navbar-brand" href="#">个人博客系统</a>
  33.         </div>
  35.         <!-- Collect the nav links, forms, and other content for toggling -->
  36.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  37.             <ul class="nav navbar-nav">
  38.                 <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  39.                 <li><a href="#">新闻</a></li>
  40.             </ul>
  41.             <ul class="nav navbar-nav navbar-right">
  43.                 {% if request.user.is_authenticated %}
  44.                     <li><a href="#"><span id="user_icon"
  45.                                           class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a>
  46.                     </li>
  47.                     <li class="dropdown">
  48.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  49.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  50.                         <ul class="dropdown-menu">
  51.                             <li><a href="#">修改密码</a></li>
  52.                             <li><a href="#">修改头像</a></li>
  53.                             <li><a href="/logout/">注销</a></li>
  54.                             <li role="separator" class="divider"></li>
  55.                             <li><a href="#">Separated link</a></li>
  56.                         </ul>
  57.                     </li>
  58.                 {% else %}
  59.                     <li><a href="/login/">登录</a></li>
  60.                     <li><a href="/registry/">注册</a></li>
  61.                 {% endif %}
  63.             </ul>
  64.         </div><!-- /.navbar-collapse -->
  65.     </div><!-- /.container-fluid -->
  66. </nav>
  67. <div class="container-fluid">
  68.     <div class="row">
  69.         <div class="col-md-3">
  70.             <div class="panel panel-warning">
  71.                 <div class="panel-heading">Panel heading without title</div>
  72.                 <div class="panel-body">
  73.                     Panel content
  74.                 </div>
  75.             </div>
  76.             <div class="panel panel-info">
  77.                 <div class="panel-heading">Panel heading without title</div>
  78.                 <div class="panel-body">
  79.                     Panel content
  80.                 </div>
  81.             </div>
  82.             <div class="panel panel-danger">
  83.                 <div class="panel-heading">Panel heading without title</div>
  84.                 <div class="panel-body">
  85.                     Panel content
  86.                 </div>
  87.             </div>
  88.         </div>
  89.         <div class="col-md-6">
  90.             <div class="article_list">
  91.                 {% for article in article_list%}
  92.                     <div class="article_item">
  93.                     <h5><a href="">{{ article.title }}</a></h5>
  94.                     <div class="article-desc">
  95.                         <span class="media-left">
  96.                             <a href=""><img width="60" height="60" src="/media/{{ article.user.avatar }}" alt=""></a>
  97.                         </span>
  98.                         <span class="media-right">
  99.                             {{ article.desc }}
  100.                         </span>
  101.                     </div>
  102.                     </div>
  103.                     <div class="small">
  104.                     <span><a href="">{{ article.user.username }}</a></span> &nbsp;&nbsp;&nbsp;
  105.                     <span>发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;&nbsp;
  106.                     <span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span>&nbsp;&nbsp;&nbsp;
  107.                     <span class="glyphicon glyphicon-thumbs-up">评论({{ article.up_count }})</span>&nbsp;&nbsp;&nbsp;
  108.                     </div>
  109.                     <hr>
  110.                 {% endfor %}
  111.             </div>
  112.         </div>
  113.         <div class="col-md-3">
  114.             <div class="panel panel-primary">
  115.                 <div class="panel-heading">Panel heading without title</div>
  116.                 <div class="panel-body">
  117.                     Panel content
  118.                 </div>
  119.             </div>
  120.             <div class="panel panel-default">
  121.                 <div class="panel-heading">Panel heading without title</div>
  122.                 <div class="panel-body">
  123.                     Panel content
  124.                 </div>
  125.             </div>
  126.         </div>
  127.     </div>
  128. </div>
  129. </body>
  130. </html>

展示效果

首页渲染 - 图49

调节详情条的高度

关键代码区域[需要将内容放置在span标签外，然后才能分别设置图标和整个详情条]

首页渲染 - 图50

首页渲染 - 图51

关键代码[16-21 / 112&113]

  1. <!DOCTYPE html>
  2. {% load static %}
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <script src="{% static '/static/js/jquery-3.6.0.min.js' %}"></script>
  8.     <link rel="stylesheet" href="{% static '/static/blog/bs/css/bootstrap.css' %}">
  9.     <script src="{% static '/static/js/bootstrap.min.js' %}"></script>
  10.     <style>
  11.         #user_icon {
  12.             font-size: 18px;
  13.             margin-right: 10px;
  14.             vertical-align: -3px;
  15.         }
  16.         .pub_info{
  17.             margin-top: 10px;
  18.         }
  19.         .pub_info .glyphicon-comment{
  20.             vertical-align: -1px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. {#打印登录者的信息#}
  26. <h3>欢迎您{{ request.user.username }}</h3>
  27. <nav class="navbar navbar-default">
  28.     <div class="container-fluid">
  29.         <!-- Brand and toggle get grouped for better mobile display -->
  30.         <div class="navbar-header">
  31.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  32.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  33.                 <span class="sr-only">Toggle navigation</span>
  34.                 <span class="icon-bar"></span>
  35.                 <span class="icon-bar"></span>
  36.                 <span class="icon-bar"></span>
  37.             </button>
  38.             <a class="navbar-brand" href="#">个人博客系统</a>
  39.         </div>
  41.         <!-- Collect the nav links, forms, and other content for toggling -->
  42.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  43.             <ul class="nav navbar-nav">
  44.                 <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  45.                 <li><a href="#">新闻</a></li>
  46.             </ul>
  47.             <ul class="nav navbar-nav navbar-right">
  49.                 {% if request.user.is_authenticated %}
  50.                     <li><a href="#"><span id="user_icon"
  51.                                           class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a>
  52.                     </li>
  53.                     <li class="dropdown">
  54.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  55.                            aria-expanded="false">Dropdown <span class="caret"></span></a>
  56.                         <ul class="dropdown-menu">
  57.                             <li><a href="#">修改密码</a></li>
  58.                             <li><a href="#">修改头像</a></li>
  59.                             <li><a href="/logout/">注销</a></li>
  60.                             <li role="separator" class="divider"></li>
  61.                             <li><a href="#">Separated link</a></li>
  62.                         </ul>
  63.                     </li>
  64.                 {% else %}
  65.                     <li><a href="/login/">登录</a></li>
  66.                     <li><a href="/registry/">注册</a></li>
  67.                 {% endif %}
  69.             </ul>
  70.         </div><!-- /.navbar-collapse -->
  71.     </div><!-- /.container-fluid -->
  72. </nav>
  73. <div class="container-fluid">
  74.     <div class="row">
  75.         <div class="col-md-3">
  76.             <div class="panel panel-warning">
  77.                 <div class="panel-heading">Panel heading without title</div>
  78.                 <div class="panel-body">
  79.                     Panel content
  80.                 </div>
  81.             </div>
  82.             <div class="panel panel-info">
  83.                 <div class="panel-heading">Panel heading without title</div>
  84.                 <div class="panel-body">
  85.                     Panel content
  86.                 </div>
  87.             </div>
  88.             <div class="panel panel-danger">
  89.                 <div class="panel-heading">Panel heading without title</div>
  90.                 <div class="panel-body">
  91.                     Panel content
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="col-md-6">
  96.             <div class="article_list">
  97.                 {% for article in article_list%}
  98.                     <div class="article_item">
  99.                     <h5><a href="">{{ article.title }}</a></h5>
  100.                     <div class="article-desc">
  101.                         <span class="media-left">
  102.                             <a href=""><img width="60" height="60" src="/media/{{ article.user.avatar }}" alt=""></a>
  103.                         </span>
  104.                         <span class="media-right">
  105.                             {{ article.desc }}
  106.                         </span>
  107.                     </div>
  108.                     </div>
  109.                     <div class="small pub_info">
  110.                     <span><a href="">{{ article.user.username }}</a></span> &nbsp;&nbsp;&nbsp;
  111.                     <span>发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;&nbsp;
  112.                     <span class="glyphicon glyphicon-comment"></span>评论({{ article.comment_count }})&nbsp;&nbsp;&nbsp;
  113.                     <span class="glyphicon glyphicon-thumbs-up"></span>评论({{ article.up_count }})&nbsp;&nbsp;&nbsp;
  114.                     </div>
  115.                     <hr>
  116.                 {% endfor %}
  117.             </div>
  118.         </div>
  119.         <div class="col-md-3">
  120.             <div class="panel panel-primary">
  121.                 <div class="panel-heading">Panel heading without title</div>
  122.                 <div class="panel-body">
  123.                     Panel content
  124.                 </div>
  125.             </div>
  126.             <div class="panel panel-default">
  127.                 <div class="panel-heading">Panel heading without title</div>
  128.                 <div class="panel-body">
  129.                     Panel content
  130.                 </div>
  131.             </div>
  132.         </div>
  133.     </div>
  134. </div>
  135. </body>
  136. </html>

显示效果

首页渲染 - 图52