今回は前回に引き続きDjangoでのブログの始め方について記事を書きたいと思います。今回はDjangoでブログのトップページを作成する手順について書いていきたいと思います。
全体の流れ
以下項目についてこれから説明していきます。
- 各アプリの作成
- テンプレートディレクトリの作成
- トップページのHTMLの作成
- views.pyの編集
- urls.pyの編集
- トップページにアクセス
各アプリの作成
まずはトップページに関するアプリ（トップページの動作を設定するディレクトリ）を作成します。以下のコマンドを実行してアプリを作成しましょう。※作成する時は（/venv/プロジェクト名/）にいる状態で作成しましょう。
python manage.py startapp [アプリ名]また、各アプリを作成したらsetting.pyのINSTALLED_APPSにそのアプリを追加しましょう。以下のような感じで、一番下に作成したアプリ名を追加します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'[アプリ名]'
]テンプレートディレクトリの作成
次にHTMLファイルを格納するテンプレートディレクトリを作成します。先ほど作成したブログアプリのディレクトリに移動した後にテンプレートディレクトリ（templates）を作成します。以下コマンドを実行するかエディタツール（VisualStudioCodeなど）で作成しましょう
cd [アプリ名]
mkdir templates作成したらそのテンプレートディレクトリの中にそのアプリ名のディレクトリを作成します。何故そうなってるのかはよくわかりませんが、以下のような構造にします。
なので、先ほどテンプレートディレクトリを作成したみたいにアプリ名ディレクトリも作成します。以下コマンドを実行して作成していきましょう。（エディタツール使ってもOK）
cd templates
mkdir [アプリ名]トップページのHTMLの作成
次はHTMLファイルの作成です。HTMLファイルの作成方法については今回の主題ではないので、説明する内容としてはどこに作るかぐらいですね。先ほど作成したテンプレートディレクトリの中（templates/（アプリ名）/今回作るHTMLファイル）に作成します。HTMLの中身は以下を参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 30px;
border-radius: 8px;
}
.post {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.post:last-child {
border-bottom: none;
}
.post h2 {
margin: 0;
font-size: 1.5em;
}
.post .date {
font-size: 0.9em;
color: #666;
}
.post .excerpt {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>ようこそ、My Blogへ！</h1>
{% for post in posts %}
<div class="post">
<h2><a href="{% url 'blog:post_detail' post.pk %}">{{ post.title }}</a></h2>
<div class="date">{{ post.published_date|date:"Y年m月d日" }}</div>
<div class="excerpt">{{ post.text|truncatewords:30 }}</div>
</div>
{% empty %}
<p>まだ投稿がありません。</p>
{% endfor %}
</div>
</body>
</html>
views.pyの編集
次はviews.pyの編集です。views.pyは次に作成するurls.pyと先ほど作成したHTMLファイルの橋渡しをしてくれます。以下のようにコードを書いていきましょう。
from django.shortcuts import render
def top(request):
return render(request, 'blog/top.html')urls.pyの編集
最後にurls.pyの編集です。urls.pyはこのURLが入力されたらこのviews.pyの一部を表示するというURLとviews.pyの橋渡しをしてくれます。urls.pyはプロジェクトのurls.pyと各アプリのurls.pyの編集をする必要があります。各アプリのurls.pyは最初存在しないので、作成してから、以下のようにコードを書いていきましょう。
各アプリのurls.py
from django.urls import path
from . import views
app_name = '[アプリ名]'
urlpatterns = [
path('', views.top, name='top'),
]プロジェクトのurls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('[アプリ名].urls'))
]トップページにアクセス
さあ出来上がったトップページにアクセスしてみましょう。以下コマンドを実行してサーバを立ち上げます。
python manage.py runserver作成したHTMLファイルが出力されましたか？こんな感じで他のページもどんどん作成していきましょう！
おわりに
ここまで見ていただきありがとうございました。自分が作成したページがブラウザで表示されると感動しますよね？自分は初めてページが表示されたとき思わず「おお。。」と言葉を漏らしてしまいました。まだ皆さんのブログには記事がないですよね？次回はその記事を作成するための準備について書いていきたいと思います！
コメント