【Django】mark_safeでhtmlコードを返す|実例付

paintingDjango

当記事では、Djangoで独自のテンプレートタグを作成し、<a>タグなどのついたhtmlコードを返す方法、をお伝えします

htmlコードでリンクなどどうやって返すかわからない!

htmlのコードを返せるようにしたい!!!

という方は、下記を読んで仕組みを理解すれば、簡単に、自由なhtmlを返せるようになります

筆者プロフィール

筆者プロフィールアイコン

【現職】プロマネ/システムプランニング

【副業】ブログ(月間7万PV)/YouTube/Web・アプリ制作

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

ChatGPTでLINEボット

【今なら無料】ChatGPTでLINEボットを作りました!

友だち追加

早速、コードの紹介!

from django import template
from django.utils.safestring import mark_safe
from django.urls import reverse_lazy

register = template.Library()

@register.filter
def createLink(value, pk):
    if not value:
        update_url = reverse_lazy("person_update", kwargs={"pk":pk})
        person_update_link = f"<a href={update_url}>追加する</a>"
        return mark_safe(person_update_link)
    else:
        return value

htmlを返すために

mark_safeのインポート

from django.utils.safestring import mark_safe

関数内でreturnするもの

 return mark_safe(person_update_link)

person_update_linkという変数には、返したいhtmlコードの文字列が代入されています

こちらの2つさえ覚えておけば、htmlを返すことが可能です!

おまけの解説

2つの引数

def createLink(value, pk):

上記の関数では、2つの引数(value, pk)を受け取ります

このような時、template内では

{{obj.company | createLink:obj.pk}}

とします

最初のobj.companyがvalue、「関数名:」後に記載されているobj.pkがpk、となります

reverse_lazy

こちらの関数ではreverse_lazyを使い、ページのURLを返すようにしています

固定でURLを指定(/some_page/など)とすると、仮にURLを変更した場合にこちらもいちいち変えないといけません

なのでreverse_lazyを使い、変更がきちんと反映されるようにしています

以上、独自フィルタでhtmlを返す方法でした!

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCへ投げ銭をする

タイトルとURLをコピーしました