跳到主要內容

[Django教學6]Django Template(樣板)整合Bootstrap實戰教學

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資料夾,如下圖:
接著,在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',
            ],
        },
    },
]

其中的DIRSDjango搜尋樣板的資料夾路徑,所以需在這個串列(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按鈕,如下圖:
進入說明文件後,往下滑可以看到入門樣板(Starter template),如下圖:
複製其中的程式碼,接著開啟剛剛所建立的共用樣板base.html,貼上後,修改<title>標籤文字為應用程式名稱,並且在<body>顯示網頁內容的地方,利用Django Template(樣板)的block語法,定義應用程式(APP)樣板的嵌入區塊,如下範例:

<html lang="en">
<head>
    <!-- Required meta tags -->
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" rel="stylesheet"></link>
    <title>PoTrip</title>
</head>
<body>
    <div class="container">
        {% block content %}
        {% endblock  %}
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script crossorigin="anonymous" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

範例中定義了一個CSScontainer<div>,來放置網頁內容,而Django block樣板語法後面的content,為區塊的名稱,應用程式(APP)樣板也就是依據這個區塊名稱,來決定嵌入的位置

共用樣板設計完成後,開啟應用程式(APP)下的index.html樣板,透過Djangoextends樣板語法,繼承自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 %}
<div class="row">
    {% for article in articles %}
    <div class="col-lg-4">
        <div class="card" style="width: 18rem;">
            <img alt="..." class="card-img-top" src="{{ article.thumb }}" />
            <div class="card-body">
                <h5 class="card-title">{{ article.user.display_name }}</h5>
                <p class="card-text">{{ article.title }} . . .</p>
                <a class="btn btn-primary" href="{{ article.link }}">內容</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock  %}
範例中的row(列)及col-lg-4(欄)可以想像成表格(Table)的列(tr)與欄(td),依據資料的筆數動態的顯示col(欄),由於Bootstrap為響應式網站設計(Responsive Web Design),所以會隨著裝置的解析度來自動排版,執行結果如下:
各位可以看到,每個貼文的照片大小都不一樣,這時候可以在<img>標籤中,設定圖片的大小,如下範例:

<img alt="..." class="card-img-top" src="{{ article.thumb }}" style="height: 12rem; width: 18rem;" />
另外,如果想要統一文章的標題只顯示25個字,可以使用Djangoslice樣板語法來裁切字串,如下範例:

<div class="card-text">{{ article.title|slice:"0:25" }} . . .</div>

最後,在每一列的文章之間,想要增加間距,則可以在cardCSS類別後面,加上mt-4,如下範例:

<div class="card mt-4" style="width: 18rem;"></div>


執行結果
大功告成!有些圖片的解析度由於PIXNET Open API所提供的圖片過小,所以會有模糊的狀況。

四、小結

透過本文的教學,讓大家瞭解如何在Django專案中,呼叫外部所提供的API資源,並且整合Bootstrap框架,快速設計出響應式的網站。如果在實作的過程中,有遇到任何問題,歡迎留言提問,我將盡力為各位解答。

如果您喜歡我的文章,請幫我按五下Like(使用GoogleFacebook帳號免費註冊),支持我創作教學文章,回饋由LikeCoin基金會出資,完全不會花到錢,感謝大家。
 









留言

張貼留言