在虛擬環(huán)境中輸入 pip list 即可查看" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > Django搭建個人博客： Bootstrap 4 改寫模板

Django搭建個人博客： Bootstrap 4 改寫模板

時間：2023-06-09 19:48:02 | 來源：網(wǎng)站運營

時間：2023-06-09 19:48:02 來源：網(wǎng)站運營

Django搭建個人博客： Bootstrap 4 改寫模板：注意：學本章之前請檢查 Django 版本，確保安裝的是 Django 2 而不是 Django 3，否則后面所有的章節(jié)都會遇到 staticfiles 無法載入的錯誤。

在虛擬環(huán)境中輸入 pip list 即可查看。
上一章我們的網(wǎng)站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。

配置Bootstrap 4

Bootstrap是用于網(wǎng)站開發(fā)的開源前端框架（“前端”指的是展現(xiàn)給最終用戶的界面），它提供字體排印、窗體、按鈕、導航及其他各種組件，旨在使動態(tài)網(wǎng)頁和Web應用的開發(fā)更加容易。

Bootstrap有幾個版本都比較流行，我們選擇最新版本的Bootstrap 4：下載地址，并解壓。

然后在項目根目錄下新建目錄static/bootstrap/，用于存放Bootstrap靜態(tài)文件。靜態(tài)文件通常指那些不會改變的文件。Bootstrap中的css、js文件，就是靜態(tài)文件。

把剛才解壓出來的css和js兩個文件夾復制進去。

因為bootstrap.js依賴 jquery.js 和 popper.js 才能正常運行，因此這兩個文件我們也需要一并下載保存。附上官網(wǎng)下載鏈接（進入下載頁面，復制粘貼代碼到新文件即可）：

2020.07.22 更新：
由于 popper.js 版本兼容問題，教程改用 cdn 遠程引入的形式，所以這里就不需要將 popper.js 下載到本地了。后面會講到如何 cdn 引入。
現(xiàn)在我們的static/目錄結構像這樣：

my_blog│├─article└─my_blog│ ...└─static └─bootstrap │ ├─css # 文件夾 │ └─js # 文件夾 └─jquery │ └─jquery-3.3.1.js # 文件 └─popper └─popper-1.14.4.js # 文件 - 2020.07.22: 不用下載因為在Django中需要指定靜態(tài)文件的存放位置，才能夠在模板中正確引用它們。因此在settings.py的末尾加上：

my_blog/settings.py...STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"),)再確認一下settings.py中有沒有STATIC_URL = '/static/'字段，如果沒有把它也加在后面。

編寫模板

在根目錄下的templates/中，新建三個文件：

這三個文件在每個頁面中通常都是不變的，獨立出來可以避免重復寫同樣的代碼，提高維護性。

現(xiàn)在templates/的結構像下面這個樣子：

templates│├─base.html├─header.html├─footer.html└─article └─list.html # 上一章創(chuàng)建的加上之前的list.html，接下來就要重新寫這4個文件了。

因為前端知識非常博大精深，并且也不是Django學習的重點，本教程不會展開篇幅去講。如果之前沒接觸過前端知識也沒關系，這里可以先復制粘貼，不影響后面Django的學習。

你可以試著改寫其中的某段代碼，看看會對頁面產生什么樣的影響；遇到不懂的就在Bootstrap官方文檔找答案。慢慢就會明白它的運行機制，畢竟Bootstrap真的是非常簡單易用的工具。

Bootstrap是非常優(yōu)秀的前端框架，上手簡單，所以很流行。你可以在官方網(wǎng)站上進行系統(tǒng)的學習。通篇看Bootstrap文檔比較枯燥，因此建議你可以像查字典一樣，需要用哪個模塊，就到官網(wǎng)上找相關的代碼，修改一下拷貝到你的項目中。
這里會一次性寫大量代碼，不要著急慢慢看，理解了就很簡單了。

首先寫base.html：

templates/base.html<!-- 載入靜態(tài)文件 使用 Django 3 的讀者改為 {% load static %}-->{% load staticfiles %}<!DOCTYPE html><!-- 網(wǎng)站主語言 --><html lang="zh-cn"><head> <!-- 網(wǎng)站采用的字符編碼 --> <meta charset="utf-8"> <!-- 預留網(wǎng)站標題的位置 --> <title>{% block title %}{% endblock %}</title> <!-- 引入bootstrap的css文件 --> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"></head><body> <!-- 引入導航欄 --> {% include 'header.html' %} <!-- 預留具體頁面的位置 --> {% block content %}{% endblock content %} <!-- 引入注腳 --> {% include 'footer.html' %} <!-- bootstrap.js 依賴 jquery.js 和popper.js，因此在這里引入 --> <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script> <!-- popper.js 采用 cdn 遠程引入，意思是你不需要把它下載到本地。 在實際的開發(fā)中推薦靜態(tài)文件盡量都使用 cdn 的形式。 教程采用本地引入是為了讓讀者了解靜態(tài)文件本地部署的流程。 --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script> <!-- 引入bootstrap的js文件 --> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script></body></html>然后是header.html：

templates/header.html<!-- 定義導航欄 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <!-- 導航欄商標 --> <a class="navbar-brand" href="#">我的博客</a> <!-- 導航入口 --> <div> <ul class="navbar-nav"> <!-- 條目 --> <li class="nav-item"> <a class="nav-link" href="#">文章</a> </li> </ul> </div> </div></nav>標簽內的class屬性是Bootstrap樣式的定義方法。試著改寫或刪除其中一些內容，觀察頁面的變化。

然后改寫之前的list.html：

templates/article/list.html<!-- extends表明此頁面繼承自 base.html 文件 -->{% extends "base.html" %}{% load staticfiles %}<!-- 寫入 base.html 中定義的 title -->{% block title %} 首頁{% endblock title %}<!-- 寫入 base.html 中定義的 content -->{% block content %}<!-- 定義放置文章標題的div容器 --><div class="container"> <div class="row mt-2"> {% for article in articles %} <!-- 文章內容 --> <div class="col-4 mb-4"> <!-- 卡片容器 --> <div class="card h-100"> <!-- 標題 --> <h4 class="card-header">{{ article.title }}</h4> <!-- 摘要 --> <div class="card-body"> <p class="card-text">{{ article.body|slice:'100' }}...</p> </div> <!-- 注腳 --> <div class="card-footer"> <a href="#" class="btn btn-primary">閱讀本文</a> </div> </div> </div> {% endfor %} </div></div>{% endblock content %}最后寫入footer.html：

{% load staticfiles %}<!-- Footer --><div> <br><br><br></div><footer class="py-3 bg-dark fixed-bottom"> <div class="container"> <p class="m-0 text-center text-white">Copyright &copy; www.dusaiphoto.com 2018</p> </div></footer>呼，真是一大堆的東西啊。

讓我們來捋一捋發(fā)生了什么：

當我們通過url訪問list.html時，頂部的{% extends "base.html" %}告訴Django：“這個文件是繼承base.html的，你去調用它吧。”

于是Django就老老實實去渲染base.html文件：

運行服務器

老規(guī)矩，保存全部文件，進入虛擬環(huán)境，運行開發(fā)服務器，在瀏覽器中輸入http://127.0.0.1:8000/article/article-list/，看到如下頁面：







一個漂亮的博客界面就這樣出現(xiàn)在眼前，非常神奇。

如果報錯也不要著急，程序員就是不斷與bug斗爭的一個職業(yè)。仔細檢查Django給出的錯誤提示，修復它，你一定行。

總結

本章我們引入了前端框架Bootstrap 4，借助它重新組織了模板的結構，編寫了一個漂亮的博客網(wǎng)站的首頁。

下一章我們將學習編寫文章詳情頁面。

關鍵詞：改寫,模板

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉