django系列九：頁面布局

03-07

前言

當我們花了時間寫了一個模版後(尤其是寫了一堆html標籤累的要死)，卻無法重複利用他，這可是會讓人心情瞬間跌倒谷底的。好在模板的設計本身就是一個可再利用的資源，通過使用同一個template，可以讓相似度高的頁面(視圖)共用同一個模板。同樣Django中可以通過模板繼承使得一個視圖中能夠引用其它的模版。主要是應用在網站的布局上。

布局結構

爬取微信公眾號文章

首先讓我們來看一個結構，上圖中首先會看到左側是功能欄，右側是內容欄。其實這樣的布局很多網站都大同小異。無非就是左側動態載入功能，然後通過不同的鏈接跳轉到不同的視圖Views中，然後視圖的模版內容展現在右側的內容欄中。所以整體來說我們分三部分來進行搭建

一、創建母版模版

母版其實很好理解，就是全局公共部分，像這裡的左側的功能菜單、以及全局的JS、CSS、Jquery等。還是直觀的看代碼吧，新建文件home.html

路徑：analysis/web/templates/home.html

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>微信公眾號數據清洗池</title>  <link href="/static/web/vendors/css/font-awesome.min.css" rel="stylesheet"> <link href="/static/web/vendors/css/simple-line-icons.min.css" rel="stylesheet">  <link href="/static/web/css/style.css" rel="stylesheet">  <link href="/static/web/vendors/css/daterangepicker.min.css" rel="stylesheet"> <link href="/static/web/vendors/css/gauge.min.css" rel="stylesheet"> <link href="/static/web/vendors/css/toastr.min.css" rel="stylesheet"> </head> <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"> <header class="app-header navbar"> <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button"> <span></span> </button> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button"> <span></span> </button></header> <ul class="nav navbar-nav d-md-down-none mr-auto"> </ul> </header> <div class="app-body"> <div class="sidebar"> <div class="sidebar-header"> <div> </div> <div class="text-muted"> </div> </div> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> 公眾號</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="/web/spider/index/chainbcom"><i class="icon-star"></i>區塊鏈鉛筆公眾號</a> </li> </ul> </li> <a class="nav-link" href="/web/spider/list"><i class="icon-speedometer"></i> 爬取結果</a> </li> </ul> </nav> <button class="sidebar-minimizer brand-minimizer" type="button"></button> </div>  <main class="main"> <div class="container-fluid"> {% block content %} {% endblock content %} </div>  </main> </div>  <script src="/static/web/vendors/js/jquery.min.js"></script> <script src="/static/web/vendors/js/popper.min.js"></script> <script src="/static/web/vendors/js/bootstrap.min.js"></script> <script src="/static/web/vendors/js/pace.min.js"></script>  <script src="/static/web/js/app.js"></script>  <script src="/static/web/vendors/js/toastr.min.js"></script> <script src="/static/web/vendors/js/gauge.min.js"></script> <script src="/static/web/vendors/js/moment.min.js"></script> <script src="/static/web/vendors/js/daterangepicker.min.js"></script> </body>

這樣就建立一個母版模版，任何一個視圖的模版都可以引用該母模版。小夥伴們可能已經看到了block content這句話。對，是的，你觀察的很仔細。這是Django中的模板區塊。視圖模版通過引用該模版，視圖的內容就會展示在這裡。

內容視圖

現在我們來創建一個內容視圖，點擊左側「」--》「」功能點，展示內容為右側的視圖，再上述代碼中搭建看到了

/web/spider/index/chainbcom這地址，完整的地址應該是，

http://192.168.1.2:32001/web/spider/index/chainbcom

在/web/route/文件夾下創建spider.py文件，及文件路徑為：

analysis/web/route/spider.py

創建視圖spider_wechar 如下

from django.shortcuts import render from django.http import JsonResponsedef spider_wechar(request,wechart): content={ wechart:wechart } return render(request,spider/index.html,content)

添加模版，模版路徑為：

1、添加spider文件夾

2、創建index.html模版

即完整路徑為：analysis/web/templates/spider/index.html

代碼如下：

{% extends home.html %} {% block content %}<div class="card"> <div class="card-body"> <input id=wechart_number hidden value={{wechart}} /> <button id=btn_start type="button" class="btn btn-secondary" data-toggle="modal" > 開始爬取 </button> </div></div><div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-body"> <p>爬取中.......</p> <div class="sk-three-bounce"> <div class="sk-child sk-bounce1"></div> <div class="sk-child sk-bounce2"></div> <div class="sk-child sk-bounce3"></div> </div> </div> </div> </div></div>{% endblock content %}

首先通過extends引入 homt.html模版

在模版中引用{ % block name %} 其中name對應的就是再母版視圖中的名稱，此時為content

這樣呢通過點擊「公眾號」---》「區塊鏈鉛筆」最終結果就會展示如下：