Djangoでのtemplatesファイルとstaticファイルの設定

環境構築として下記のものが終了していることが前提である

https://qiita.com/tarakokko3233/items/46c567fb32a26a69269a

# ファイル構造
```
\---yourprojectname
    |   db.sqlite3
    |   manage.py
    |
    +---yourappname
    |   |   admin.py
    |   |   apps.py
    |   |   models.py
    |   |   tests.py
    |   |   urls.py  ##追加する
    |   |   views.py
    |   |   __init__.py
    |   |
    |   +---migrations
    |   |
    |   +---static ##追加する
    |   |
    |   +---templates ##追加する
    |   |
    |   \---__pycache__
    |
    \---yourprojectname
        |   asgi.py
        |   settings.py
        |   urls.py
        |   wsgi.py
        |   __init__.py
        |
        \---__pycache__
```
## ファイル・フォルダーの追加
上記のtreeで足りていないファイル・フォルダーを追加
・urls.py
・templates 　 (フォルダー)
・static 　　 　(フォルダー)


# templatesファイルの設定
## setting.pyの変更
```setting.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'yourappname', # ココにappの名前を追加
]
```

```setting.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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',
            ],
        },
    },
]
```


上記の`setting.py`のTEMPLATESに，下記を追加
```setting.py
'DIRS': [os.path.join(BASE_DIR, 'templates')],
```

恐らくosがimportできていないので，下記も追加
```setting.py
import os
```

## templatesフォルダー内にHTMLファイルの追加
1. templatesフォルダー内にindex.htmlを追加
1. 下記のHTMLを書き込む
```index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>
            Django Template
        </h1>
    </header>
    <main>
        <p>
            Hello, World!
        </p>
    </main>
    <footer>
        <p>
            &copy; 2024 Django Template
        </p>
    </footer>
    
</body>
</html>
```

## views.py
```views.py
from django.shortcuts import render

def title_page(request):
    return render(request, 'index.html')
```
## yourprojectname/urls.py

```yourprojectname/urls.py
from django.contrib import admin
from django.urls import path
from django.urls.conf import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('yourappname.urls')), # Add this line
]
```

## yourappname/urls.py
```yourappname/urls.py
from django.urls import path
from .views import title_page

urlpatterns = [
    path('', title_page, name='title_page'),
]
```

## 結果表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759397/289ba534-ac56-3289-f1e8-0c6b3826c66d.png)




# staticファイルの設定

## setting.py
下記コードを追加
```setting.py
STATIC_DIRS = [
    os.path.join(BASE_DIR, 'yourappname', 'static'),
]
```

## staticファイルの作成
1. templatesフォルダー内にindex.cssを追加
1. 下記のCSSを書き込む
```index.css
header{
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}
main{
    padding: 10px;
}
footer{
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}
```
## HTMLでの呼び出し

1. `{{% load static %}}`を**index.html**の一番上に追加
1. `<head>タグ`の中に以下を追加
```index.html
<link rel="stylesheet" href="{% static 'index.css' %}">
```

## 結果表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759397/25774339-191b-a300-f2ce-9c65fc3c41e9.png)


## 備考
```
+---static
|   +---css
|   |       index.css
|   |
|   +---img
|   |       suityann.png
|   \---js
|           index.js
```

上記の様にstatic内を定義すると`index.css`は`index.html`ないで下記の様に呼び出される．
```index.html
<link rel="stylesheet" href="{% static 'css/index.css' %}">
```

### 1.imgタグでの取り出し
```index.html
<img src="{% static 'img/suityann.png' %}" alt="kyoumokawaii!">
```
### 2.scriptタグでの取り出し
```index.html
<script src="{% static 'index.js' %}"></script>
```