2024年3月6日 星期三

在Django網站首頁放置樹藝micro:bit的照片

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>

重新整理


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)