Mawa Town

Mawaという人が作る小さな町でMawaTownです。技術と音楽が好き。

Django テンプレートタグに出力されるHTMLタグにCSSクラスを追加できるdjango-widget-tweaksが便利

CSSクラスをDjangoテンプレートにぶち込みたい時ありませんか??

CSSクラスとDjangoテンプレートタグを共存させたいときがありませんか?? たしかにフォームクラスからいじる方法もあるけども、フィルターのようにテンプレートタグに書き込めると楽!ってことも多々ある。

例えばここにフォームを出力するぜという場合、

{{ form }}

と変数を置いた時、出力結果が次のようになっているとする

<input id="****" maxlength="****" name="****" type="text">

ここで、自作の CSSのクラスを組み込みたい!と思ったとする例えばこんなCSSクラスhogeを入れ込みたいというとき

<input class="hoge" id="****" maxlength="150" name="****" type="text"> #class="hoge"が追加されてる

ではどうすればいいか・・・

これだとモチロンうまくいかない

イメージだとこんな感じの手軽さがイイなァと思うけども・・・

{{ form }}+{{ class="hoge" }}

まあできないよね・・・似た操作感でなんとかならんか・・・
そうこうしてたら、こんなの見つけました。 参考URL simpleisbetterthancomplex.com Django Widget Tweaks!おお!まさにこれ!

  • 1:pipでインストール
$pip install django-widget-tweaks
  • 2:settings.pyのINSTALLED_APPSに書き込み
INSTALLED_APPS = [
    '・・・',
    '・・・',
    'widget_tweaks', #←追加
  '・・・',
    '・・・',
]
  • 3:テンプレート冒頭にタグ呼び出しタグをセット
{% load widget_tweaks %}
↓HTMLを書く・・・↓
  • 4:追加したいテンプレートタグにCSSクラスを追記
{{ form|add_class:'hoge' }}

これでうまく行きました!ちなみにDjango1.10&Python3.5です