[不做怎麼知道系列之Android開發者的30天後端養成故事 Day8] - 換個皮 #怎麼套用前端樣版? #DjangoFileManagment #StaticFiles

不做怎麼知道系列 / Android開發者的30天後端養成故事
Word count: 2k   |   Reading time≈ 8 min

哈囉，我們又見面了，今天來看看我們怎麼在後端 Django，套用前端已經寫好的樣板吧!

到哪裡去找前端樣板呢?

RS 自己是在 Colorlib 下載到免費的樣板，覺得這個網站的品質還不錯，有興趣的捧油們可以逛逛看，其實免費的樣板就已經很漂亮了，免費版的有三個限制：不能轉售樣板、不能移除 footer 的 copyright 字樣、沒有 colorlib 的技術協助，不過這對我們來說不是問題，只要保留 copyright 就沒問題了，我自己用的是 ecommerce 分類 下的 Modist 樣板，從樣板的樣子看來是個賣衣服的品牌，很符合我們想要建立的電商頁面，那就來用用看吧。

直接感受一下這個樣板

下載後為 Zip 壓縮檔，解壓縮後直接雙擊 index.html

這個樣板很完整，包含了各個頁面，也有一些動畫，但我今天先抓一個頁面 shop.html 然後簡化掉我不需要的功能。

一起看影片來感受一下今天的成果

可以看到我把很多東西拿掉了，包括 menu 的 Shop, Blog, Contact 和 footer 上方的 Subscribe，以及 footer 的 web map，希望在這個練習中先盡量簡單。

https://youtu.be/3IYzpy5vcwA

那麼該怎麼告訴 Django 我要使用這個樣板呢?

目前我規劃就只需要四個頁面

  • 商品選擇頁面: 也就是今天展示的 shop.html 這個畫面
  • 商品詳細資訊頁面: product-single.html
  • 購物車: cart.html
  • 結帳填資料頁面: checkout.html

而今天主要是要瞭解，怎麼使用這些前端所產出的樣板檔案們，今天就專注在如何導入 shop.html 吧。

先將你要的檔案們挑出來

今天我先示範 shop.html 一個頁面，然後還有導入 css、images 與 javascript 等等 static files。

再到我們的 django project 裡的 app 資料夾

我把之前的 blog app 重新命名成 shop app，把 shop.html 放到 shop/templates/shop/ 底下，然後其餘資料夾都放到 shop/static/ 資料夾底下，這個 static/ 資料夾是另外創的，如果你沒有的話，那就創一個吧，所以目前的專案架構是這樣的：

全都放進去專案了，然後呢?

最後想呈現出來的是，連結到網站首頁，就直接是可以選擇衣服的畫面，也就是上面影片所展示的畫面。

先到 urls.py 把我們的首頁導到 shop_view 的頁面

而這個 shop_view 就是我們等等要在 views.py 新增的。

1
2
3
4
5
6
7
8
9
from django.contrib import admin
from django.urls import path

from shop.views import shop_view

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', shop_view),
]

在 views.py 新增 shop_view

之前測試用的 code 我就刪掉了，目前我們就專注在要發展的 shop 功能上。

1
2
3
4
5
6
from django.shortcuts import render

def shop_view(request):
	return render(request, 'shop/shop.html', {})
	# 現在還沒有資料要從 model 傳給頁面
  # 所以 context 留空

到 mysite/settings.py 確認路徑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
				# 這項 DIRS 可以決定我們的 templates 路徑
				# 以這邊留空來講，我的 html 就放在 shop/templates/shop/ 底下
				# 在 views.py 就可以用 'shop/shop.html' 來取用
				# 所以留空就代表是預設在 app 資料夾底下的 templates/
        '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',
            ],
        },
    },
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    # 確認 staticfiles 這項有，才能套用 css
    'django.contrib.staticfiles',
		# 我們的 shop app
    'shop',
]

# 決定我們的 css, javascript, images 放在哪裡
# 我們這邊使用預設的 '/static/'
# css, js, imgs 等的檔案，就放在 app 資料夾底下的 static/
# 而取用方式，舉例 {% static 'css/open-iconic-bootstrap.min.css' %}
STATIC_URL = '/static/'

我有試過把 STATIC_URL 設定在 shop app 底下，可是不知道為什麼失敗，只好把它放在 app 之外。

把 shop.html 有用到 css, js, images 路徑底下的路徑都改成我們專案的路徑

因為原本這個樣板的原始碼太長了，有三四百行，貼在文章裡實在不適合，在這邊我就只貼有改的範例，對原始碼有興趣的捧油，可以參考我的 Github。

需要注意的點有

  • 在檔案開頭加入 {% load static %} 的 django template tag
  • 在引入 css, js 的路徑時，使用 "{% static 'css/xxx.css' %}" 或 {% static 'js/xxx.js' %}
  • div 的 background-image，依舊是使用 url('img.jpg')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
{% load static %}

...

<!-- 舉兩個引入 css 的例子 -->
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">

...

<!-- 畫面上的 Collection -->
<div class="..." style="background-image: url('static/images/bg_6.jpg')">
	<div class="container">
		<div class="...">
			<h1 class="mb-0 bread">Collections</h1>
		</div>
	</div>
</div>

...

<!-- 舉兩個顯示產品圖片的例子 -->
<div class="product">
	<a><img class="..." src="{% static 'images/product-4.jpg' %}" alt="..."></a>
</div>

...

<!-- 舉兩個引入 javascript 的例子 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>

當然，之後是需要把 header 和 footer 都獨立到 base.html 的，之後再重構它，我們先確保它能跑再說~

Django 跑起來 !

$ python manage.py runserver

成果再貼一次上面的影片

https://youtu.be/3IYzpy5vcwA

如果你有更多的需求的話

可以參考官方文件 Managing static files (e.g. images, JavaScript, CSS)。

單日心得總結

其實最重要的就是，去理解 預設的路徑是代表什麼路徑，把檔案帶到對的地方，用對的方式來使用檔案資源。套入樣板之後，整個網站的感覺都不一樣了，耶呼~

到目前為止，我們只是把單一頁面放進來，所以在這個頁面中看的到的按鈕，都還不能點 XD，這需要一點時間把一個一個功能都兜起來了。

今天特地撥了一點時間，參與了好想工作室的 git 線上讀書會，明明我人就在旁邊，硬要用線上的方式參加 XD，我在這邊待了一個禮拜，覺得在這邊的學習資源真的很共享，你想要學什麼幾乎都可以找得到人問，或者是你自己開一個讀書會，邀請有興趣的人們一起參與，有多一點人一起學習，除了會感覺不那麼孤單之外，還有就是每個人遇到的情況、每個人對待同一件事情的看法都不一樣，這樣跟一個人學習比較的話，其實花同樣的時間來學習，會得到更好的效果。已經預約了 Effective Kotlin 的讀書會，感謝 Lester 讓我吸經驗 <3

我是 RS，這是我的 不做怎麼知道系列 文章，我們 明天見。

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2021-2022 Sam Ho
  • Visitors: | Views:

請我喝杯咖啡吧~

支付宝
微信