成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

lolomaco / 1408人閱讀

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

配置Bootstrap 4

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

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

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

把剛才解壓出來的css和js兩個(gè)文件夾復(fù)制進(jìn)去。

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

jquery.js

popper.js

2018-10-29 新增：
不清楚popper.js如何下載的戳這個(gè)鏈接：


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


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

現(xiàn)在我們的static/目錄結(jié)構(gòu)像這樣：

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

因?yàn)樵贒jango中需要指定靜態(tài)文件的存放位置，才能夠在模板中正確引用它們。因此在settings.py的末尾加上：

my_blog/settings.py

...

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

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

編寫模板

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

base.html是整個(gè)項(xiàng)目的模板基礎(chǔ)，所有的網(wǎng)頁都從它繼承；

header.html是網(wǎng)頁頂部的導(dǎo)航欄；

footer.html是網(wǎng)頁底部的注腳。

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

現(xiàn)在templates的結(jié)構(gòu)像下面這個(gè)樣子：

templates
│
├─base.html
├─header.html
├─footer.html
└─article
    └─list.html # 上一章創(chuàng)建的

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

因?yàn)榍岸酥R(shí)非常博大精深，并且也不是Django學(xué)習(xí)的重點(diǎn)，本教程不會(huì)展開篇幅去講。如果之前沒接觸過前端知識(shí)也沒關(guān)系，這里可以先復(fù)制粘貼，不影響后面Django的學(xué)習(xí)。

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

這里會(huì)一次性寫大量代碼，不要著急慢慢看，理解了就很簡(jiǎn)單了。

首先寫base.html：

templates/base.html


{% load staticfiles %}






    
    
    
    {% block title %}{% endblock %}
    
    



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

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

HTML語法中，所有的內(nèi)容都被標(biāo)簽包裹；標(biāo)簽及標(biāo)簽中的屬性可以對(duì)內(nèi)容進(jìn)行排印、解釋說明等作用。

標(biāo)簽內(nèi)包含網(wǎng)頁的元數(shù)據(jù)，是不會(huì)在頁面內(nèi)顯示出來的。標(biāo)簽內(nèi)才是網(wǎng)頁會(huì)顯示的內(nèi)容。

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

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

然后是header.html：

templates/header.html

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

然后改寫之前的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中相對(duì)應(yīng)起來的。

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

最后寫入footer.html：

{% load staticfiles %}



    







    

        
Copyright © www.dusaiphoto.com 2018

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

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

當(dāng)我們通過url訪問list.html時(shí)，頂部的{% extends "base.html" %}告訴Django：“這個(gè)文件是繼承base.html的，你去調(diào)用它吧?！?/p>

于是Django就老老實(shí)實(shí)去渲染base.html文件：

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

{% include "footer.html" %}加入footer.html的內(nèi)容

{% block content %}{% endblock content %}表明這里應(yīng)該加入list.html中的對(duì)應(yīng)塊的內(nèi)容

運(yùn)行服務(wù)器

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

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

如果報(bào)錯(cuò)也不要著急，程序員就是不斷與bug斗爭(zhēng)的一個(gè)職業(yè)。仔細(xì)檢查Django給出的錯(cuò)誤提示，修復(fù)它，你一定行。

總結(jié)

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

下一章我們將學(xué)習(xí)編寫文章詳情頁面。

有疑問請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

或Email私信我：dusaiphoto@foxmail.com

項(xiàng)目完整代碼：Django_blog_tutorial 

轉(zhuǎn)載請(qǐng)告知作者并注明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/42489.html

相關(guān)文章

  • Django搭建個(gè)人博客：文章分頁

    摘要：隨著時(shí)間的推移加上勤奮的寫作，你的博客文章一定會(huì)越來越多。如果不進(jìn)行處理，可能同一個(gè)頁面會(huì)擠上成百上千的文章，不美觀不說，還降低了頁面的反應(yīng)速度。這個(gè)時(shí)候就需要對(duì)文章進(jìn)行分頁的處理。有疑問請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。 隨著時(shí)間的推移（加上勤奮的寫作?。?，你的博客文章一定會(huì)越來越多。如果不進(jìn)行處理，可能同一個(gè)頁面會(huì)擠上成百上千的文章，不美觀不說，還降低了頁面的反應(yīng)速度。 這個(gè)時(shí)...

    stormgens 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：改寫View視圖

    摘要：改寫視圖函數(shù)上一章我們感受了視圖的工作流程。循壞表示依次取出中的元素，命名為，并分別執(zhí)行接下來操作。即為語言，中間包裹了一個(gè)段落的文字。有疑問請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。 改寫視圖函數(shù) 上一章我們感受了視圖的工作流程。 為了讓視圖真正發(fā)揮作用，改寫article/views.py中的article_list視圖函數(shù)： article/views.py from django...

    KaltZK 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：根據(jù)瀏覽量對(duì)最熱文章排序

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

    kidsamong 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：編寫文章詳情頁面

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

    dabai 評(píng)論0 收藏0

  • 使用 django-blog-zinnia 搭建個(gè)人博客

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

    褰辯話 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

lolomaco

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<