知識の枝

"All is well"

Django テンプレートタグでリンクを作成

約182日前 2021年5月28日22:55
デジタル
Django

改訂履歴


2021/5/28 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はDjangoのアプリ内でテンプレートタグを使ってリンクを貼る方法を解説します。


2. ゴール


Djangoのテンプレートタグを使って便利なリンク機能を使う。


3. はじめに


Djangoのテンプレート内でリンクを作成するとき、方法としては

・通常通りURLを書く
・Djangoのテンプレートタグで書く


の2つが挙げられます。

今回は2つ目、
「Djangoのテンプレートタグで書く」について説明したいと思います。


4. リンクのテンプレートタグ


<a>タグを使ってリンクを作る際、
href="●●●"の部分にURLを入れてリンク先を設定します。

こんな感じですね。
<a href="https://chuna.tech">リンク</a>



DjangoにはURLの部分を動的に変えられるようにURLのビルトインテンプレートタグがあります。
Built-in template tags and filters

書き方は下記の通りです。
{% url 'ここにurls.pyで指定した名前' %}
「urls.pyで指定した名前」というのは、「name='●●●'」とした部分のことです。

urls.py
from django.urls import path
from . import views

app_name = 'test' #ここも使います

urlpatterns = [
path('', views.IndexView, name='dashboard'), #ここのname=の部分
]
上記の例では「name='dashboard'」の部分が該当します。
「app_name = 'test'」の部分も重要です。


「app_name='test'」と「name='dashboard'」の2つを使ってURLを定義します。
<a href="{% url 'test:dashboard' %}">リンク</a>
こう書くことでリンクとして使用可能です。


この書き方の良さを簡単に説明します。

例えば上記の例の
path('', views.IndexView, name='dashboard'),
のパス部分を下記のように変更したとしましょう。

path('index/', views.IndexView, name='dashboard'),
「index/」に変更しました。


テンプレートタグを使用しない場合、htmlファイルの中のリンクを下記のように書き換える必要があります。

【変更前】
<a href="https://chuna.tech">リンク</a>

【変更後】
<a href="https://chuna.tech/index/">リンク</a>


テンプレートタグを使用する場合、パスを変更しても「name='dashboard'」の部分は変わりません。
したがって、下記のリンクは書き換える必要がないのです。
<a href="{% url 'test:dashboard' %}">リンク</a>


これはhtmlのリンクが増えるほど楽で便利に感じると思います。


ついでにパスの中に変数が入っている場合、
urls.py
from django.urls import path
from . import views

app_name = 'test'

urlpatterns = [
path('', views.IndexView, name='dashboard'),
path('<int:pk>/', views.IndexView, name='detail'), #ここへのリンクを書く場合
]
<int:pk>の部分です。ここには整数が入ります。

このように変数付きのパスへのリンクを作成する場合は、下記のように書くと変数をurls.pyに渡すことができます。
<a href="{% url 'test:dashboard' model.id %}">リンク</a>
「model.id」の部分がパスの「pk」に入ります。
modelはテンプレートに読み込んでいるモデルの変数名を書いて下さい。


変数が複数ある場合も同様にスペースを空けて付け足せばOKです。
urls.py
from django.urls import path
from . import views

app_name = 'test'

urlpatterns = [
path('', views.IndexView, name='dashboard'),
path('<int:pk>/', views.DetailView, name='detail'),
path('<int:pk>/<str:title>/', views.TitleView, name='title), #ここへのリンクを書く場合
]

<a href="{% url 'test:dashboard' model.id model.title %}">リンク</a>



5. さいごに


便利なテンプレートタグの1つを紹介しました。
まだ利用していなければぜひ活用してみましょう!