Django學習筆記（二）：使用Template讓HTML、CSS參與網頁建立
阿新 • • 發佈：2018-10-31
Django學習筆記（二）：使用Template讓HTML、CSS參與網頁建立
通過本文章實現：
- 瞭解Django中Template的使用
- 讓HTML、CSS等參與網頁建立
利用靜態檔案應用網頁樣式
一、Template的使用
Template是Django利用渲染器將模板檔案與資料內容結合，完成網頁整合的方式。
1、Template的建立
在專案資料夾（manage.py所在路徑）內，建立templates資料夾。
在setting.py中配置TEMPLATES的DIR。將setting.py檔案中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', ], }, }, ]
主要是在'DIRS': [os.path.join(BASE_DIR, 'templates')]中配置。
2、編寫HTML模板檔案
在templates資料夾中編寫drugs_index.html檔案，內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>藥品搜尋</title> </head> <body> <h1>{{html_time}}</h1> </body> </html>
檔案與一般HTML一致，{{show_time}}部分表示show_time用於後續與Django進行資料通訊。
點選檢視HTML教程
3、Django與HTML之間的資料通訊
在APP下的views.py中先引入get_template模組。
from django.shortcuts import render from django.http import HttpResponse import datetime from django.template.loader import get_template # Create your views here. def index(request): # 確定引入的模板檔案 template = get_template('drugs_index.html') # 定義顯示的內容 time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") views_time = '今天是：' + time # 將views_time通訊到HTML中的html_time html = template.render({'html_time':views_time}) return HttpResponse(html)
cmd中執行python manage.py runserver 0.0.0.0:8000，開啟網頁可看到資料通訊成功。
4、CSS靜態檔案引入改善頁面顯示效果
除了在HTML中使用傳統的引入方式使用CSS檔案外，在Django中，CSS、JS和圖片檔案可以看作是靜態檔案，有專門的配置方式。
本筆記使用bootstrap.min.css的本地檔案的方式進行演示。點選檢視CSS教程
在templates資料夾中建立static子資料夾，在static資料夾內再建立css子資料夾。將bootstrap.min.css檔案複製到css子資料夾內。
在settings.py中找到STATIC_URL = '/static/'，並增加內容如下：
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'templates/static'),
]應用CSS與普通情況一樣，直接在HTML中編輯。將drugs_index.html檔案修改如下：
<!DOCTYPE html>
<!-- 載入靜態檔案 -->
{% load staticfiles %}
<html lang="en">
<head>
<!-- 以連結方式引用static資料夾中的css檔案 -->
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
<meta charset="UTF-8">
<title>藥品搜尋</title>
</head>
<body>
<!-- 應用css檔案中的樣式 -->
<p class="text-center muted">{{html_time}}</p>
</body>
</html>執行後檢視網頁，可看到使用了css中的樣式,使文字可以居中顯示，文字顏色變為灰色。