Notes｜Django| Bootstrap

basic Django Bootstrap

basic Bootstrap

前端框架（ 由 HTML、CSS 和 JavaScript 寫成的）
讓初心者也能快速開發出像樣的前端網頁，且達到 RWD 響應式。

我這邊不多介紹，可以參考以下

Bootstrap 简介

• 下載範例
• settings.py（urls.py、views.py）
• {% load static %}

下載範例

官網選範例->Blog->Blog Home （主頁樣式）

官網選範例->Blog->Blog Post (點進文章後)

Free Bootstrap Themes, Templates, Snippets, and Guides

選擇 View on GitHub-> Clone or download ->複製網址 -> cd 到 static 底下

$ git clone https://github.com/BlackrockDigital/startbootstrap-blog-home.git

查看結構

把 html 檔移到 templates 資料夾底下（index.html）

$ tree
.
└── startbootstrap-blog-home
    ├── LICENSE
    ├── README.md
    ├── css
    │   └── blog-home.css
    ├── gulpfile.js
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── vendor
        ├── bootstrap
        │   ├── css
        │   │   ├── bootstrap-grid.css
        │   │   ├── bootstrap-grid.css.map
        │   │   ├── bootstrap-grid.min.css
        │   │   ├── bootstrap-grid.min.css.map
        │   │   ├── bootstrap-reboot.css
        │   │   ├── bootstrap-reboot.css.map
        │   │   ├── bootstrap-reboot.min.css
        │   │   ├── bootstrap-reboot.min.css.map
        │   │   ├── bootstrap.css
        │   │   ├── bootstrap.css.map
        │   │   ├── bootstrap.min.css
        │   │   └── bootstrap.min.css.map
        │   └── js
        │       ├── bootstrap.bundle.js
        │       ├── bootstrap.bundle.js.map
        │       ├── bootstrap.bundle.min.js
        │       ├── bootstrap.bundle.min.js.map
        │       ├── bootstrap.js
        │       ├── bootstrap.js.map
        │       ├── bootstrap.min.js
        │       └── bootstrap.min.js.map
        └── jquery
            ├── jquery.js
            ├── jquery.min.js
            ├── jquery.min.map
            ├── jquery.slim.js
            ├── jquery.slim.min.js
            └── jquery.slim.min.map

設置 settings.py

INSTALLED_APPS-> ‘django.contrib.staticfiles’

TEMPLATES->’django.template.context_processors.static’

查看這兩個參數

💡（可自行跳過）稍微講解 STATIC_URL、STATICFILES_DIRS、
STATIC_ROOT

STATIC_URL=’/static/’
Django 會自行去抓 App 底下的 static，就算是根目錄的 static 也抓得到。

STATICFILES_DIRS = (
os.path.join(BASE_DIR, ‘common_static’),
)
配置 app 以外的公共文件資料（通用的靜態文件）夾的靜態文件，但因為 STATIC_URL 本身就是可以跨 app 使用靜態文件，所以這是多餘的。

STATIC_ROOT = os.path.join(BASE_DIR, ‘collect_static’)
適用於部署時，執行 python managy.py collectstatic 會生成(STATIC_ROOT ) 資料夾，把各個 app 的靜態文件都放進去（需配置Nginx）

urls.py、views.py 路徑修改

urls.py

from django.contrib import admin
from django.urls import path, include
from blog import views
urlpatterns = [
    path('', views.index),
    path('home', views.home),
    path('index', views.index),
]

views.py

from django.shortcuts import render
from .models import Post
def home(request):
    return render(request, 'index.html')
def index(request):
    blog = Post.objects.all()
    
    return render(request, 'blog.html', {
        'blog': blog, 
    })

在這邊執行的話會發現網頁沒吃到 CSS

查看 Debug：

/home 其實是 200，但是後面沒吃到 css（四個地方）
Not Found: /vendor/bootstrap/css/bootstrap.min.css
Not Found: /vendor/jquery/jquery.min.js
Not Found: /css/blog-home.css
Not Found: /vendor/bootstrap/js/bootstrap.bundle.min.js

{% load static %} {% static ‘’ %}

html 加載 static 文件
在最上面加入，我直接寫在在第一個要使用的上面。

# 載入起點：{% load static %}
# 修改路徑：{% static '' %}
ex:
src="vendor/jquery/jquery.min.js"
src="{% static 'vendor/jquery/jquery.min.js' %}"

修改 index.html （總共四個地方沒吃到）

<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/blog-home.css' %}" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

恭喜學會 Bootstrap 應用了👏👏👏👏👏👏