Django博客开发教程:实现模板之前的分析与准备

合集 - Django博客开发教程(21)

1.1、Django博客开发教程:开发前的准备2023-08-072.2、Django博客开发教程:项目需求分析2023-08-073.Django博客开发教程:数据库设计分析2023-08-074.Django博客开发教程:创建项目2023-08-075.Django博客开发教程:基础配置2023-08-086.Django博客开发教程:欢迎页面2023-08-087.Django博客开发教程:创建数据库模型2023-08-088.Django博客开发教程:用Admin管理后台管理数据2023-08-089.Django博客开发教程:使用富文本编辑器添加数据2023-08-0910.Django博客开发教程:使用ckeditor富文本编辑器添加数据2023-08-1411.Django博客开发教程:URL与视图函数2023-08-0812.Django博客开发教程:体验django模板,2023-08-0813.Django博客开发教程:体验数据查询2023-08-0814.Django博客开发教程:一些常用的模板使用方法2023-08-08

15.Django博客开发教程:实现模板之前的分析与准备2023-08-09

16.Django博客开发教程:实现网站首页2023-08-0917.Django博客开发教程:实现文章列表2023-08-1618.Django博客开发教程:实现文章内容页2023-08-1619.Django博客开发教程:实现标签页面2023-08-1620.Django博客开发教程:实现搜索页面2023-08-1621.Django博客开发教程:单页面实现与代码优化2023-08-16

收起

在之前的体验django模板、体验数据查询以及一些常用的模板使用方法文章里，向大家介绍了如何将数据库的数据展现到网页上，和一些简单的模板使用方法。之后我们就开始实现各种页面的展现。

在此之前，我们先从前端设计师手里拿到模板，然后分析模板页面结构和代码，并通过需求思索如何实现。模板下载地址：

templates.zip

拿静态模板页面之后，结合我们之前的项目需求分析知道，我们需要实现六个页面的展现。网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面（联系我们）。其中，文章分类列表页、搜索列表页、标签列表页这三个页面展示结构都一样我们只需要一个模板页面即可。所以说我们真正需要实现的只有4个页面，这四个页面分别对应前端给我们模板里的首页(index.html)、列表页（list.html）、内容页(show.html)、单页(page.html)。了解我们需要做的工作之后，我们开始做好准备工作。

1、我们把静态模板static目录里的所有文件夹和文件复制到项目目录下的static目录里，然后把index.html、list.html、show.html、page.html四个页面复制到项目下templates目录里（之前做测试时templates目录里的index.html删除掉）。

2、这四个页面，通过观察我们发现，头部和尾部是相同的，只有中间主体部分不相同，所以我们把这些相同的页面代码提取出来，新建一个文件base.html，把代码放到base.html里，头部代码和尾部代码中间部分用下面代码替代：

1 2	{% block content %} {% endblock %}

index.html、list.html、show.html、page.html四个页面，我们把头部和尾部相同的代码删除掉，然后把剩下的代码放到下面代码标志对中间：

1 2 3

{% block content %}  #把头部和尾部相同的代码删除之后把剩余放到这里面来 {% endblock %}

最后每个页面的第一行加上代码

1	{% extends "base.html" %}

意思是继承 base.html页面的代码。

3、其中list.html和show.html这两个页面的右侧部分和index.html右侧除“热门文章排行"部分之外，都一样，所以我们也把这部分单独提取出来，放到right.html页面里，原来的位置我们用下面的代码替代：

1	{% include 'right.html' %}

这个代码的意思是把right.html包含进来。

4、修改base.html页面，首先我们先在base.html页面第一行加上如下代码：

1 2	{% load staticfiles %} {% load static %}  #django3 及以上用这个标签

告诉模板引擎，我们要加载引入静态资源。

然后把头部的CSS样式文件修改成下面的样子：

1 2 3 4 5 6 7

templates/base.html   <link rel='stylesheet' id='bootstrap-css' href='{% static "css/bootstrap.min.css" %}' type='text/css' media='all'/> <link rel='stylesheet' id='fontawesome-css' href='{% static "css/font-awesome.min.css" %}' type='text/css' media='all'/> <link rel='stylesheet' id='stylesheet-css' href='{% static "css/style.css" %}' type='text/css' media='all'/> <link rel='stylesheet' id='raxus-css' href='{% static "css/raxus.css" %}' type='text/css' media='all'/> <link rel='stylesheet' id='open-social-style-css' href='{% static "css/os.css" %}' type='text/css' media='all'/>

网站LOGO图片：

1 2 3

templates/base.html   <img src="{% static "picture/black-logo.png" %}" alt="拓普Python学院,Python!"></a>

尾部的JS文件：

1 2 3 4 5 6 7 8 9 10 11

templates/base.html   <script src="{% static "js/bundle.js" %}"></script> <script type="text/javascript" src="{% static "js/view-history.js" %}"></script> <script type='text/javascript' src="{% static "js/push.js" %}"></script> <script type='text/javascript' src='{% static "js/jquery.min.js" %}'></script> <script type='text/javascript' src='{% static "js/bootstrap.min.js" %}'></script> <script type='text/javascript' src='{% static "js/raxus-slider.min.js" %}'></script> <script type='text/javascript' src='{% static "js/loader.js" %}'></script> <script type='text/javascript' src='{% static "js/bj-lazy-load.min.js" %}'></script> <script type='text/javascript' src='{% static "js/os.js" %}'></script>

修改完成之后，我们由原来的4个页面变成6个页面。

我把修改之后的文件上传上来，不太清楚的朋友可以下载下来对比一下。

templates.zip

因为我们要实现6个页面的展现，网站首页、文章分类列表页、搜索列表页、标签列表页、文章内容展示页、单页面（联系我们）。所以我们需要在urls.py里，给每个页面都设置一个URL，并给每个URL添加一个别名：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

myblog/urls.py   from blog import views #导入blogAPP下的views   urlpatterns = [     path('admin/', admin.site.urls),#管理后台     path('', views.index, name='index'),#网站首页     path('list-<int:lid>.html', views.list, name='list'),#列表页     path('show-<int:sid>.html', views.show, name='show'),#内容页     path('tag/<tag>', views.tag, name='tags'),#标签列表页     path('s/', views.search, name='search'),#搜索列表页     path('about/', views.about, name='about'),#联系我们单页     path('ueditor/', include('DjangoUeditor.urls')),     re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), ]

里面其中列表页和内容页分、标签页面别传入一个整形参数lid和sid和一个tag参数。

然后在blog/views.py文件里，写六个视图函数，与myblog/urls.py文件里的六个url一一对应，视图函数里的先用pass替代（之前体验的视图函数index删除掉）:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

blog/views.py   #首页 def index(request):     pass   #列表页 def list(request,lid):     pass   #内容页 def show(request,sid):     pass   #标签页 def tag(request, tag):     pass   # 搜索页 def search(request):     pass # 关于我们 def about(request):     pass

留意，列表页和内容页、标签页面的视图函数里我们也都多接收了一个参数，与urls.py里的url里的参数对应上。

此时，我们的准备工作已经完毕，下面我们将进行各个页面的实现。