LoginSignup
27
26

More than 5 years have passed since last update.

django で twitter bootstrap を使う

Posted at

始まり

django で twitter bootstrap を使おうとした。(windows)
でも、htmlを読み込むところで失敗。

コマンドラインを見ると、bootstrapのcssとjsフォルダを読み込めていないことが発覚

え。もしかして、urls.pyで読み込むように書かないといけないの?
いやいや、そんなめんどくさいはずない!
と思って調べてみると、

settings.pyの、INSTALL_APPSで
django.contrib.staticfiles
を読み込んでいると、静的ファイル(cssとかjsとか)を簡単に扱えることがわかった。

以下、設定の手順

静的ファイルの保存場所の設定

settings.py
   import os
   from os.path import abspath,dirname,basename
   #プロジェクトのルートをSITE_ROOTとする
   SITE_ROOT = abspath(os.path.join(dirname(__file__),".."))
   #静的ファイルを保存するフォルダ名を設定
   STATIC_URL = '/static/'
   #静的ファイルを保存するフォルダのパスを設定
   STATICFILES_DIRS = (
       os.path.join(SITE_ROOT,'static'),
       )

URLマッピングの追加

urls.py
   from django.conf.urls import patterns, include ,url
   #追加する部分1:静的ファイル用のモジュール
   from django.contrib.staticfiles.urls import staticfiles_urlpatterns

   urlpatterns = patterns('',
   ...
   )

   #追加する部分2
   urlpatterns += staticfiles_urlpatterns()

静的ファイルの配置

今回は、プロジェクトのルートディレクトリ下に、
staticフォルダを作成し、その下にbootstrapのフォルダを追加した。

htmlファイルの書き換え

静的ファイルのリンクの前に、{{ STATIC_URL }} を追加する。

sample.html

   ...

   <link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" >
   ...

と、ここまでで、きちんと動くと思ったのだが、自分の環境では動かなかったので、次の手順を行った。

レンダリングをRequestContextで行う

views.py
   from django.shortcuts import render_to_response
   from django.template import RequestContext

   def sample(request) :
      return render_to_response('sample.html',{'title':"タイトル"},context_instance = RequestContext(request))

以上。

参考サイト:DjangoでCSSなどの静的ファイルを配信する(開発サーバー編)

27
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
26