【Django】静的ページを新規に作成する方法の流れをまとめる

DjangoでWebページを作成していますが、１ページを作成するためには、ただページを作成するだけではなく、そのページにURLを指定したり、公開できる様にDjangoで設定をしないといけません。

この流れは何度も行うので、手順をまとめておきます。

「Django」で作成する静的ページの公開までの流れをまとめる

DjangoでWebサイトを構築する場合、静的ページでは毎回同じ様な構築の流れが必要になります。
※Webページをそんなに多く作ったことがないのでもっと簡単なやり方はあると思いますが。。。

ページを新規に作成する際は、htmlファイルを新規に作成するだけではなく、グローバルに公開するにあたり、各設定ファイルの更新も必要となります。
以下は、Djangoの静的ページの更新手順をまとめます。

「template」配下に新規の静的ページ用のフォルダとファイルを作成

今回、新規に以下のページを作成します。

• 「linux_command_top.html」
• 「linux_network.html」
• 「linux_ping.html」

新規で以下の構成でページを作成します。

$ tree templates/
templates/
|--404.html
|--base.html
|--index.html
|__linux_command
   |--linux_command_top.html
   |--linux_network.html
   |__network
      |--linux_ping.html
|--linux_command_network_base.html
|--linux_command_top_base.html

ベースHTMLファイルを作成し、ページを量産する

各ページにはベースHTML（base.html）ファイルを参照するようにします。
今回の新規に作成するページのトップにベースHTMLを参照するようにします。

例：「linux_command_top.html」のトップでベースHTMLを利用する

{% extends 'linux_command_top_base.html'%}
{% load static %}

------中略------

詳細な設定は以下の記事を参照

「パンくずリスト」を作成する

パンくずリストはSEOとしても重要となるので各ページには付けておきましょう。

例：「linux_command_top.html」の場合

------中略------
{% block pankuzu %}
<nav aria-label="パンくずリスト">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item active" aria-current="page">Linuxコマンド集</li>
  </ol>
</nav>
{% endblock %}
------中略-------

パンくずリストの書き方は以下のページを参照

urls.py追加・編集

次に上記で作成したHTMLファイルを「urls.py」に追加します。
それぞれのファイルはtemplateフォルダをルートとして、書くフォルダ配下に置かれているので以下の点を注意してそれぞれのページを追加します。

左からカンマ「,」区切りで

• 対象ページの保存場所をディレクトリで表示
• viewsと関連づけるさいのコマンドを「views.xxxxxx」で作成
• nameを記載（views.xxxxxxと同じにするとわかりやすい）

$ vi myhp/urls.py

from django.urls import path
from . import views

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

    #Linuxコマンド集
    path('linux_command/', views.linux_command_top, name='linux_command_top'),
    path('linux_command/linux_network/', views.linux_network, name='linux_network'),
    path('linux_command/network/linux_ping/', views.linux_ping, name='linux_ping'),
]

views.py追加・編集

「urls.py」作成後、同じ階層にある「views.py」を編集します。
ここでは上記「urls.py」で作成したコードをそのまま引用します。

$ vi myhp/views.py

from django.http import HttpResponse
from django.template import Context, loader

------中略------

# Linuxコマンド集
def linux_command_top(request):
    return render(request, 'linux_command/linux_command_top.html')
def linux_network(request):
    return render(request, 'linux_command/linux_network.html')
def linux_ping(request):
    return render(request, 'linux_command/network/linux_ping.html')

これで、新規でページが表示されます。」

「サイトマップ」にページを追加する

最後にGoogleボットに通知するためにサイトマップを作成します。
上記で、使用したコードを10行目の「sitemap:xxxxxx」に当てはめてカンマ区切りで追加していきます。

from django.contrib import sitemaps
from django.urls import reverse

class StaticViewSitemap(sitemaps.Sitemap):
    priority = 0.5
    changefreq = 'weekly'
    protocol = 'https'

    def items(self):
        return ['sitemap:index', 'sitemap:linux_command_top', 'sitemap:linux_network', 'sitemap:linux_ping']

    def location(self, item):
        return reverse(item)

サイトマップの作成手順は以下の記事を参照

Djangoで新規に静的ページを作成する流れは以上となります。
以下では、Djangoの静的ページを作成する際に参考になるページとなります。

Djangoでページを量産する際に参考にしてください。