本文將帶領讀者快速套用現成的Bootstrap的模板到Django中

mkdir django-bootstrap-dashboard     #建立資料夾   
cd django-bootstrap-dashboard #移動到資料夾中
django-admin startproject dashboard #建立dashboard專案
cd dashboard #移動到專案資料夾中
python manage.py startapp APP #建立一個名為APP的Django APPmd templates #建立templates資料夾(放HTML)
md static #建立static資料夾(放HTML,CSS,JS)
python manage.py makemigrations #建立資料庫檔案
python manage.py migrate #同步模型與資料庫
python manage.py runserver #啟動Server
#預設網址:http://127.0.0.1:8000/
修改settings.py,加入Application應用程式
INSTALLED_APPS中加入我們的APP名稱,此例為APP
修改settings.py,設定TEMPLATES路徑
修改'DIRS'部分,如下所示:
'DIRS': [os.path.join(BASE_DIR, 'templates'),],
修改settings.py,設定static路徑
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
複製static和templates檔案
[1]把開發好或寫好的Bootstrap模板複製到static資料夾,把html檔案複製到template資料夾裡面。
[2]注意,需要修改HTML裡面的CSS和JS路径,例如在template資料夾底下,我想要連回static資料夾中的css,則可以改成:<link rel=”stylesheet” href=”../static/assets/css/bootstrap-4.4.1-dist/css/bootstrap.min.css”/>修改views.py,渲染出HTML網站
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
def index(request):
return render(request,'index.html')
修改urls.py,建立Routing
from django.contrib import admin
from django.urls import path
from APP.views import index #從上個步驟的views.py引入index函數
#當進入http://127.0.0.1:8000/index/後,執行index函數,開啟index.htmlurlpatterns = [
path('admin/', admin.site.urls),
path('index/', index),
]

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store