2024年國立虎尾科技大學聯合樹藝工坊、台灣工藝創客青創基地以及奧斯丁國際共同組成樹藝micro:bit工藝創客團隊，正在執行樹藝與micro:bit的魔幻交織計畫。本計畫主題將結合micro:bit與傳統樹藝，用科技促進創新工藝與藝術表現。跨界合作、技術傳承、環保意識等來豐富臺灣工藝文化，提升工藝競爭力，讓藝術與科技共創實用作品。本篇文章以其中一張照片為主題來撰寫如何設計網站的首頁。
1.打開cmd，輸入mkvirtualenv django_image命令建立虛擬環境。
2.輸入pip install django建立Django套件。
3.輸入django-admin startproject django_image來建立Djano專案，利用cd django_image來切換目錄。
4.輸入Python manage.py startapp imageapp來建立應用程式。
5.利用mkdir指令來建立templates和static目錄
6.輸入python manage.py migrate指令進行模型(Model)與資料庫(Database)的同步。
7.輸入python manage.py runserver指令來啟動Server。
8.打開瀏覽器，輸入http://127.0.0.1:8000/網址，開啟首頁。
9. 修改django_image/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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127 | """
Django settings for django_image project.
Generated by 'django-admin startproject' using Django 5.0.3.
For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-27sk6k95gv+x%#)w-a-jz10%%)5v+7_hznd)g0_r!lsj5p$*g8'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django_image',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'django_image.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [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',
],
},
},
]
WSGI_APPLICATION = 'django_image.wsgi.application'
# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR/'static',
]
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
|
10.設定URL，django_image\urls.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 | """
URL configuration for django_image project.
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/5.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from imageapp.views import index
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
]
|
註：路徑參數為空字串是代表首頁。
11.定義函式myapp\views.py。
1
2
3
4
5 | from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, "index.html", locals())
|
12.把下列照片放到static目錄中，檔案名稱monkey.jpg。
13.撰寫下列HTML，儲存在templates目錄中，取名為index.html。
1
2
3
4
5
6
7
8
9
10
11
12 | <! DOCTYPE html>
<html>
<head>
<title>
樹藝和micro:bit
</title>
</head>
<body>
<h1>樹藝和micro:bit<h1>
<img src="static/monkey.jpg">
</body>
</html>
|
14.重新整理網頁
15.在View中傳送變數到樣版。
15.1修改imageapp/views.py
1
2
3
4
5
6
7 | from django.shortcuts import render
# Create your views here.
def index(request):
h1_title = "樹藝和micro:bit"
jpg_name = "monkey.jpg"
return render(request, "index.html", locals())
|
15.2修改templates/index.html
1
2
3
4
5
6
7
8
9
10
11
12 | <! DOCTYPE html>
<html>
<head>
<title>
樹藝和micro:bit
</title>
</head>
<body>
<h1>{{h1_title}}<h1>
<img src="static/{{jpg_name}}">
</body>
</html>
|
15.3重新整理
16.使用load static指令
1
2
3
4
5
6
7
8
9
10
11
12
13 | <! DOCTYPE html>
<html>
<head>
<title>
樹藝和micro:bit
</title>
{% load static %}
</head>
<body>
<h1>{{h1_title}}<h1>
<img src={% static "" %}{{jpg_name}}>
</body>
</html> |
重新整理
