茨の道も一歩から

40代後半の田舎住まい無職。再就職先が決まるまでの茨の道を記録します。

Django入門:Blogアプリの制作

はじめに

Blogアプリの作成

cd djpj
python manage.py startapp blog

ルートとビューの作成

  • ビューの作成
    • paramsの定義
  • ルートの作成

views.py

from django.shortcuts import render

def index(request):
    params = {
        'title': 'Blog',
        'msg': 'This page is django template test.'
    }
    return render(request, 'blog/index.html', params)

blog/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

djpj/urls.py

from django.contrib import admin
from django.urls import path, include

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

アプリの登録

djpj/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog.apps.BlogConfig',
]

テンプレートの作成

  • templates\blogフォルダの作成
  • テンプレートファイル(index.html)の作成
    • スタティックフォルダの読み込み({% load static %})
    • スタティックファイルの読み込み({% static 'blog/css/index.css' %})

blog\templates\blog\index.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{{title}} | Django Template Test</title>
        <link href="{% static 'blog/css/index.css' %}" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <header>
                <h1>{{title}} App</h1>
            </header>
            <main>
                <p>{{msg}}</p>
            </main>
            <footer>
                <small>copyright&copy;2020 mabo102.</small>
            </footer>
        </div>
    </body>
</html>

静的ファイル(CSS)の利用

  • static\blog\cssフォルダの作成
  • CSSファイル(index.css)の作成

blog\static\blog\css\index.css

@charset "utf-8";

.container {
    background-color: #cccccc;
}

動作確認

python manage.py runserver

終わりに

  • 今回は、静的ファイルの使い方をご紹介しました。