複数ページ間の移動

Django

別ページへのリンクを貼る

hello/templates/hello/index.htmlを修正し、別ページへ移動できるようにする。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
</head>
<body>
  <h1>{{title}}</h1>
  <p>{{msg}}</p>
  <p><a href="{% url goto %}">{{goto}}</a></p>  <!-- ＜＝追加箇所 -->
</body>
</html>

views.pyを修正

hello/views.pyを修正し、index以外のページへのビュー関数を追加する。

def index(request):
  params = {
    'title': 'Hello/Index',
    'msg': 'これはサンプルページです。',
    'goto': 'next',
  }
  return render(request, 'hello/index.html', params)

def next(request):
  params = {
    'title': 'Hello/Next',
    'msg': 'これはもう一つのページです。',
    'goto': 'index',
  }
  return render(request, 'hello/index.html', params)

urlpatternsを修正する

hello/urls.pyを修正し、別のページへのパスを作る。

from django.urls import path
from . import views

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

これでhttp://localhost:8000/hello/にアクセスすると、次のように表示され、「next」と書かれたリンクをクリックすると

Hello/Index

これはサンプルページです。

next

http://localhost:8000/hello/nextにアクセスし、次の表示になる。

Hello/Next

これはもう一つのページです。

index

「index」と書かれたリンクで元のページに戻る。

テンプレートタグ {% %}

{% .... %}はテンプレートタグと呼ばれるもので、条件分岐や繰り返しなどの構文がテンプレートの中で使える。

{% %} の中で使えるurlは組み込みタグ構文の一つで、ビューとオプションの引数を指定すると、マッチする絶対パスへの参照を返す(ドメイン部分を除いたURL)。パスに特殊文字が含まれる場合、iri_to_uri()を使ってエンコードされる。

ここでは{% url goto %}とすることで、hello/urls.pyのurlpatternsで定義された名前name='next'やname='index'のリンク先に飛ぶことになる。

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

gotoという変数名で渡すパス名を、index関数とnext関数内のパラメータで変えることで、同じテンプレートの記述であっても、リンク先を変化させている。

静的ファイルの読み込み

.js, .css, 画像などの静的ファイルは、アプリ内のstaticフォルダに置く。この中にテンプレートの場合と同じで、やはりアプリ名のDIRを作り、その中でファイルの種類ごとに管理する。

例えばhello/static/helloというDIRを作って、その中に「js, css, img」などのフォルダを作って管理すればよい。

hello/templates/hello/index.htmlの<head>タグ内にCSSファイルを読み込む。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}" />
</head>
<body>
  <h1>{{title}}</h1>
  <p>{{msg}}</p>
  <p><a href="{% url goto %}">{{goto}}</a></p>
</body>
</html>

冒頭の{% load static %}によってstaticフォルダ内が読めるようになる。CSSファイルなどの読み込みは{% static 'hello/css/style.css' %}などとすればよい。

.jsファイル や画像も同じ方法で読み込める。