Photo by Hal Gatewood on Unsplash
在Django Template(樣板)開發快速上手文章中,介紹了基本的Django Template(樣板)開發,接下來,本文將教大家如何整合Bootstrap框架至Django專案中,讓Template(樣板)畫面看起來更加精緻。
另外,本文在Django Template(樣板)中,所要展示的資料內容,使用PIXNET痞客幫的Open Data API,來顯示國內旅遊的部落格文章。主要的重點包含:
- PIXNET Open Data API
- Django Base Template(共用樣板)
- Bootstrap
一、PIXNET Open Data API
PIXNET痞客邦為一個部落格類型的網站,其中包含了許多知名部落客所撰寫的經典文章,像是美食、旅遊、親子及美妝等,所以本文將以PIXNET痞客幫所提供的Open Data API,存取文章相關資訊至Django專案的Template(樣板)中。
而PIXNET痞客幫的官方API文件首頁,如下圖所示:
如果想要存取PIXNET痞客幫的API,需進行應用程式的申請,而本文所要使用的資料為Open Data(開放資料),所以無需進行申請的動作,位於上方導覽列,如下圖:
進入Open Data(開放資料)的說明頁面後,可以看到使用的方式及相關規定,而其中有本文所要使用的「文章分類」開放資料API文件連結,如下圖:
點擊後,即可看到「文章分類開放資料API」的使用方式及範例,擷取部分畫面如下圖:
由於Python呼叫API需使用requests套件(Package),所以,需事先利用以下指令進行安裝:
pip install requests
完成後,開啟Django專案應用程式(APP)下的views.py檔案,引用requests套件(Package),利用get方法(Method)呼叫「文章分類開放資料API」,並且指定類別ID,最後將取得的文章物件傳送至應用程式(APP)下的index.html樣板,如下範例:
from django.shortcuts import render
import requests
def index(request):
response = requests.get(
"https://emma.pixnet.cc/mainpage/blog/categories/hot/28") #28為國內旅遊
articles = response.json()["articles"] #轉換為JSON物件後,存取articles欄位
return render(request, "posts/index.html", {"articles": articles})
二、Django Base Template(共用樣板)
大家在使用網站的時候,一定會發現網站中有許多共用的部分,像是導覽列(Navbar)、網站名稱及側邊欄等,而變換的只有網頁內容。
如果想要在Django專案中定義共用樣板,讓專案中每一個應用程式(APP)都可以使用,首先,需在Django專案的最外層,新增一個templates資料夾,如下圖:
如果想要在Django專案中定義共用樣板,讓專案中每一個應用程式(APP)都可以使用,首先,需在Django專案的最外層,新增一個templates資料夾,如下圖:
接著,在templates資料夾中新增一個共用的樣板base.html,如下圖:
而要讓Django在搜尋樣板時,也要搜尋這個templates資料夾,就必須要在主程式中的settings.py檔案進行設定。在settings.py檔案中可以看到Django Template(樣板)的處理引擎設定,如下:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
其中的DIRS為Django搜尋樣板的資料夾路徑,所以需在這個串列(List)中,在原有的資料夾路徑,增加templates共用樣板資料夾,如下範例:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
設定完成後,接下來就可以整合Bootstrap框架,來設計Django共用樣板了。
三、Bootstrap
Bootstrap為非常受歡迎的CSS框架,能夠快速的設計出精緻的網頁畫面,並且為響應式網站設計(Responsive Web Design),也就是會隨著裝置的解析度不同,進行動態的顯示,不會因為解析度不同而讓顯示畫面變形。其中提供了許多的元件(Components)可以使用,本文將以Card元件(Component),來顯示PIXNET痞客幫的部落格文章訊息。
首先,前往Bootstrap官方網站,點擊Get started按鈕,如下圖:
首先,前往Bootstrap官方網站,點擊Get started按鈕,如下圖:
進入說明文件後,往下滑可以看到入門樣板(Starter template),如下圖:
複製其中的程式碼,接著開啟剛剛所建立的共用樣板base.html,貼上後,修改<title>標籤文字為應用程式名稱,並且在<body>顯示網頁內容的地方,利用Django Template(樣板)的block語法,定義應用程式(APP)樣板的嵌入區塊,如下範例:
PoTrip {% block content %} {% endblock %}
範例中定義了一個CSS為container的<div>,來放置網頁內容,而Django block樣板語法後面的content,為區塊的名稱,應用程式(APP)樣板也就是依據這個區塊名稱,來決定嵌入的位置。
共用樣板設計完成後,開啟應用程式(APP)下的index.html樣板,透過Django的extends樣板語法,繼承自base.html共用樣板,並且放置block區塊,如下範例:
共用樣板設計完成後,開啟應用程式(APP)下的index.html樣板,透過Django的extends樣板語法,繼承自base.html共用樣板,並且放置block區塊,如下範例:
{% extends 'base.html' %} {% block content %} {% endblock %}
在content區塊中,就是要來放置應用程式(APP)的樣板內容。回到Bootstrap的說明文件,點擊左邊欄的Components(元件),如下圖:
Bootstrap提供了許多的Components(元件)可以使用,而本文將選擇Card元件來顯示PIXNET部落格文章資訊,如下圖:
在Card元件說明文件的第一個Example範例,同樣複製其中的程式碼,如下圖:
接著回到Django應用程式(APP)的index.html樣板,在content區塊中貼上程式碼,並且利用在Django Template(樣板)開發快速上手文章中所學到的for迴圈樣板語法,讀取PIXNET部落格文章的物件,存取其中的圖片連結、文章作者、文章標題及PIXNET文章連結,如下範例:
{% extends 'base.html' %} {% block content %} {% for article in articles %}{% endblock %}{% endfor %}
範例中的row(列)及col-lg-4(欄)可以想像成表格(Table)的列(tr)與欄(td),依據資料的筆數動態的顯示col(欄),由於Bootstrap為響應式網站設計(Responsive Web Design),所以會隨著裝置的解析度來自動排版,執行結果如下:
各位可以看到,每個貼文的照片大小都不一樣,這時候可以在<img>標籤中,設定圖片的大小,如下範例:
另外,如果想要統一文章的標題只顯示25個字,可以使用Django的slice樣板語法來裁切字串,如下範例:
{{ article.title|slice:"0:25" }} . . .
最後,在每一列的文章之間,想要增加間距,則可以在card的CSS類別後面,加上mt-4,如下範例:
執行結果
大功告成!有些圖片的解析度由於PIXNET Open API所提供的圖片過小,所以會有模糊的狀況。
四、小結
透過本文的教學,讓大家瞭解如何在Django專案中,呼叫外部所提供的API資源,並且整合Bootstrap框架,快速設計出響應式的網站。如果在實作的過程中,有遇到任何問題,歡迎留言提問,我將盡力為各位解答。
如果您喜歡我的文章,請幫我按五下Like(使用Google或Facebook帳號免費註冊),支持我創作教學文章,回饋由LikeCoin基金會出資,完全不會花到錢,感謝大家。
如果您喜歡我的文章,請幫我按五下Like(使用Google或Facebook帳號免費註冊),支持我創作教學文章,回饋由LikeCoin基金會出資,完全不會花到錢,感謝大家。
你好 已有mail給你 練習過程有疑問
回覆刪除謝謝