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

在之前的体验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里，头部代码和尾部代码中间部分用下面代码替代：

{% block content %}
{% endblock %}

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

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

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

{% extends "base.html" %}

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

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

{% include 'right.html' %}

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

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

{% load staticfiles %}# django3.x这样写：
{% load static %}

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

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

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图片：

templates/base.html

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

尾部的JS文件：

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添加一个别名：

myblog/urls.py

from blog import views
#导入blogAPP下的viewsurlpatterns = [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。

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

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对应上。

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

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

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

Django 3.2.5博客开发教程:基础配置
创建项目之后,我们需要对项目进行最基础的配置.这些配置是我们做项目的时候必须要配置的,所以我们先提前配置好. 我们打开myblog目录下的settings.py文件. 一.设置域名访问权限 myblo ...
Django 3.2.5博客开发教程:HelloWorld欢迎页面
基础配置做好了之后,我们就可以先迁移数据到数据库,然后启动我们的项目,感受Django的魅力. 在Pycharm左下角底部的Terminal,会弹出Terminal终端窗口,Pycharm自动会帮我们 ...
Django 3.2.5博客开发教程:用Admin管理后台管理数据
上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Dat ...
Django 3.2.5博客开发教程:URL与视图函数
在讲URL与视图函数之前我们先给大家简单介绍一下用户访问网站的流程.我们访问一个网站的时候,一般先打开浏览器,然后在浏览器的地址栏里输入一个网址,也就是URL,然后回车,我们就可以在浏览器里看到这个网 ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...
Django 3.2.5博客开发教程:体验django模板
上面我们有说过,用户发送请求的时候,视图会返回一个响应,响应可以是一个重定向,一个404错误,一个XML文档,一张图片或者是一个HTML内容的网页.前面几个返回的信息比较有限,我们重点更多是放在HTM ...
Django 3.2.5博客开发教程:体验数据查询
进行数据查询之前,我们需要先进入我们的管理后台,在里面添加一些数据.然后我们用Pycharm打开我们的数据库.具体操作方法:用Pycharm可视化操作数据库我们的数据结构长这般模样: 双击blog_ ...
Django 3.2.5博客开发教程:一些常用的模板使用方法
一.django static文件的引入方式 1.在django project中创建 static文件夹 2.settings.py中配置要在 STATIC_URL = '/static/' 下边 ...
Django 3.2.5博客开发教程:实现网站首页
实现首页模板前,我们先把共公的页面模板base.html调用好.首先我们先看导航部分,除开首页和关于博主之外,其它的其实是我们的文章分类名.如图: 我们只需要在首页视图函数里,查询出所有的文章分类名称 ...

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

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

最新文章

热门文章