Django搭建個人博客：使用 Bootstrap 4 改寫模板文件

lolomaco 發布于2019-07-30 17:53 / 1325人閱讀

上一章我們的網站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。

配置Bootstrap 4

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

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

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

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

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

jquery.js

popper.js

2018-10-29 新增：

不清楚popper.js如何下載的戳這個鏈接：

https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js

進去后頁面顯示很長一段代碼，把這段代碼全部拷貝；在項目中新建名叫popper.js的文件，把剛拷貝的代碼復制進去就可以了。很多開源js文件都是通過這樣的方式下載。

現在我們的static/目錄結構像這樣：

my_blog
│
├─article
└─my_blog
│ ...
└─static
    └─bootstrap
    │   ├─css # 文件夾
    │   └─js # 文件夾
    └─jquery
    │   └─jquery-3.3.1.js # 文件
    └─popper
        └─popper-1.14.4.js # 文件

因為在Django中需要指定靜態文件的存放位置，才能夠在模板中正確引用它們。因此在settings.py的末尾加上：

my_blog/settings.py

...

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

再確認一下settings.py中有沒有STATIC_URL = "/static/"字段，如果沒有把它也加在后面。

編寫模板

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

base.html是整個項目的模板基礎，所有的網頁都從它繼承；

header.html是網頁頂部的導航欄；

footer.html是網頁底部的注腳。

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

現在templates的結構像下面這個樣子：

templates
│
├─base.html
├─header.html
├─footer.html
└─article
    └─list.html # 上一章創建的

加上之前的list.html，接下來就要重新寫這4個文件了。

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

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

這里會一次性寫大量代碼，不要著急慢慢看，理解了就很簡單了。

首先寫base.html：

templates/base.html


{% load staticfiles %}






    
    
    
    {% block title %}{% endblock %}
    
    



    
    {% include "header.html" %}
    
    {% block content %}{% endblock content %}
    
    {% include "footer.html" %}

模板中要加上 {% load staticfiles %} 之后，才可使用 {% static "path" %} 引用靜態文件。

HTML語法中，所有的內容都被標簽包裹；標簽及標簽中的屬性可以對內容進行排印、解釋說明等作用。

標簽內包含網頁的元數據，是不會在頁面內顯示出來的。標簽內才是網頁會顯示的內容。

留意Bootstrap的css、js文件分別是如何引入的

jquery.js 和 popper.js 要在 bootstrap.js 前引入。**

然后是header.html：

templates/header.html



  

    
    我的博客

    
    
      
        
        
          文章

標簽內的class屬性是Bootstrap樣式的定義方法。試著改寫或刪除其中一些內容，觀察頁面的變化。

然后改寫之前的list.html：

templates/article/list.html


{% extends "base.html" %}
{% load staticfiles %}


{% block title %}
    首頁
{% endblock title %}


{% block content %}



    

        {% for article in articles %}
        
        
        
            
                
                {{ article.title }}
                
                
                    {{ article.body|slice:"100" }}...
                
                
                
                    閱讀本文
                
            
        
        {% endfor %}

    

{% endblock content %}

留意{% block title %}和{% block content %}是如何與base.html中相對應起來的。

摘要中的{{ article.body|slice:"100" }}取出了文章的正文；其中的|slice:"100"是Django的過濾器語法，表示取出正文的前100個字符，避免摘要太長。

最后寫入footer.html：

{% load staticfiles %}


    





    
        Copyright © www.dusaiphoto.com 2018

呼，真是一大堆的東西啊。

讓我們來捋一捋發生了什么：

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

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

其中的{% include "header.html" %}表明這里需要加入header.html的內容

{% include "footer.html" %}加入footer.html的內容

{% block content %}{% endblock content %}表明這里應該加入list.html中的對應塊的內容

運行服務器

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

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

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

總結

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

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

有疑問請在杜賽的個人網站留言，我會盡快回復。

或Email私信我：dusaiphoto@foxmail.com

項目完整代碼：Django_blog_tutorial

轉載請告知作者并注明出處。

云服務器 GPU云服務器搭建個人博客個人博客搭建如何用wordpress搭建個人博客阿里云服務器linux搭建個人博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/42489.html

Django搭建個人博客：文章分頁

摘要：隨著時間的推移加上勤奮的寫作，你的博客文章一定會越來越多。如果不進行處理，可能同一個頁面會擠上成百上千的文章，不美觀不說，還降低了頁面的反應速度。這個時候就需要對文章進行分頁的處理。有疑問請在杜賽的個人網站留言，我會盡快回復。隨著時間的推移（加上勤奮的寫作！），你的博客文章一定會越來越多。如果不進行處理，可能同一個頁面會擠上成百上千的文章，不美觀不說，還降低了頁面的反應速度。這個時...

stormgens 2019-07-30 18:40 評論0 收藏0
Django搭建個人博客：改寫View視圖

摘要：改寫視圖函數上一章我們感受了視圖的工作流程。循壞表示依次取出中的元素，命名為，并分別執行接下來操作。即為語言，中間包裹了一個段落的文字。有疑問請在杜賽的個人網站留言，我會盡快回復。改寫視圖函數上一章我們感受了視圖的工作流程。為了讓視圖真正發揮作用，改寫article/views.py中的article_list視圖函數： article/views.py from django...

KaltZK 2019-07-30 17:51 評論0 收藏0
Django搭建個人博客：根據瀏覽量對最熱文章排序

摘要：有了瀏覽量之后，文章受歡迎的程度就有了評價標準。隨之而來的就有根據瀏覽量對文章進行排序的需求，即顯示最熱文章。它也是可以傳遞多個參數的，如，參數間用隔開視圖根據參數的值，判斷取出的文章如何排序方法指定對象如何進行排序。有了瀏覽量之后，文章受歡迎的程度就有了評價標準。隨之而來的就有根據瀏覽量對文章進行排序的需求，即顯示最熱文章。現在你已經很熟悉MTV模式，不需要我啰嗦也能完成任務： ...

kidsamong 2019-07-30 18:42 評論0 收藏0
Django搭建個人博客：編寫文章詳情頁面

摘要：有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。編寫視圖函數打開，增加文章詳情頁面的視圖函數文章詳情取出相應的文章需要傳遞給模板的對象載入模板，并返回對象函數中多了這個參數。有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。編寫視圖函數打開article/views.py，增加文章詳情頁面的視圖函數article_deta...

dabai 2019-07-30 17:53 評論0 收藏0
使用 django-blog-zinnia 搭建個人博客

摘要：語法支持再次打開文件，在文件的最后添加指明了使用語法標記，做了兩個拓展，其中表示支持語法高亮，包含的特性請參見相關文檔。語法高亮支持注意這一步必須在安裝完主題之后。目前網上搭建個人博客的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個人博客，但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...

褰辯話 2019-07-25 10:47 評論0 收藏0