在之前的體驗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博客开发教程:实现模板之前的分析与准备的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。