Djangoアプリを作る(html, css,カスタムフィルタ)

Djangoアプリを作る(html, css,カスタムフィルタ)

前回の記事でDjangoアプリの最低限の設定を行いました。今回はもう少し踏み込んだ設定をします。なお、前回はアプリ名をpollsにしていましたが、今回はmainというアプリが設定済みという前提で進めています。

HTML

まずhtmlを使用する準備をします。htmlファイルはアプリフォルダの中にtemplateフォルダを作り更にその中にアプリ名のフォルダを作成します。templateフォルダの中のフォルダ名は何でもいけるようですが、他アプリのhtmlファイルとの競合を避けるために別名にしたほうが良いようです。今回はindex.htmlという名前で保存します。

bodyタグの中に{{msg}}という文字列がありますが、これがデータの受け渡しに必要となります。

アプリフォルダの中のviews.pyを下記のように書き換えます。アプリ名によってmain/index.htmlのmainは変更します。このコードのindex関数でrenderに渡されているcontentがhtmlで表示できるデータとなります。

ここまで設定して、python manage.py runserverでサーバーを起動後、http://127.0.0.1:8000/mainにアクセスすると、Test Messageと表示されます。これでとりあえずhtmlファイルが使えるようになりました。次はcssが使えるようにします。

CSS

まずプロジェクトフォルダにstaticフォルダを作成します(mainフォルダと同列)。更にその中にcssフォルダを作成して下記をstyle.cssという名前で保存します。

更にsettings.pyの末尾に下記を追加します。

最後に、htmlを少し変更して、load staticとスタイルシートの読み込みを行います。

ここまで準備して、http://127.0.0.1:8000/mainにアクセスすると、背景色が変更されているかと思います。これで、cssでデザインができるようになりました。

カスタムテンプレートフィルタ

Djangoでは自分で関数を定義してそれを呼び出すことが出来ます。試しにそれを設定してみます。

最初にアプリフォルダの中にtemplatetagsフォルダを作成します。そして、__init__.pyという名前の空のファイルを作成して保存します。

そして、同じフォルダに下記のコードをcustom_filter.pyという名前で保存します(名前は任意)。今回はcubeという名前で値の3乗を返す関数を登録します。

そしてhtmlファイルの任意の位置で{% load custom_filter %}の後に{{5|cube}}という感じで関数を呼び出すと125という文字が表示されます。当然、数字は任意に変更できます。

以上で、一通りの設定が終わり、アプリを作ることが出来るようになりました。とりあえず今はデータベースを使う予定はないので、必要になったら覚えようと思います。