DjangoでHTMLが正しく表示されない!?HTMLを正しく表示させる方法
DjangoでHTMLが表示されないときはsettings.pyとDjangoファイルの構成を確認しましょう。パスが通っていない可能性もあります。DjangoでHTMLファイル正しく表示させる方法をまとめています。
DjangoでHTMLファイルのパスを通すには?
今回はDjangoで投稿した記事を見るためにテンプレートのコードを書いていきます。
作成したテンプレートをローカルで表示するまでが今回の流れです。
目次
01. DjangoプロジェクトのHTMLファイルのパスを確認
02. Djangoプロジェクトをローカルサーバーで開く
03. DjangoプロジェクトのHTMLを表示
04. まとめ
01. DjangoプロジェクトのHTMLファイルのパスを確認
前回は投稿フォームの作成までを行いました。
それではここからDjangoのブログサイトの見た目を作っていきます。
まずDjangoのアプリケーションフォルダのblog_appの中にtemplatesという名前のフォルダとDjangoのプロジェクトフォルダのblogの中にstaticフォルダを作成してください。
templatesフォルダの中にはblog_appフォルダ作って下さい。
staticフォルダの中にはcssフォルダを作成しておいて下さい。
この画像を参照して下さい。
次にテンプレートフォルダのblog_app中にindex.htmlというファイルを作成しましょう。
これがサイトの見た目になります。
流石にHTMLテンプレートを最初から作ると時間が少しかかってしまいます。
そこで今回はHTMLテンプレートとしてPure.cssでお借りすることにします。
このサイトにはとても扱いやすいHTMLの無料テンプレートがいくつかあるので、その中のテンプレートのブログを選択します。
手順はまずPure.cssに行ってLayoutsの項目の1番上にあるBlogのSourceをクリックして下さい。
index.htmlというファイルとstyle.cssというファイルがあると思いますのでWeb上で開いてコピーしましょう。
コピーしたindex.htmlのコードはblog_appフォルダの中にあるindex.htmlにコピーして下さい。
staticのcssフォルダの中にstyle.cssというファイルを作成して下さい。
Web上のstyle.cssをコピーしてcssフォルダの中にあるstyle.cssに貼り付けて下さい。
とりあえずこれでテンプレートの準備はできました。
02. Djangoプロジェクトをローカルサーバーで開く
残念ながらローカルサーバーを開いてもテンプレートを見ることはできません。
Djangoにテンプレートはどこにあるのか教えてあげなければなりません。
ということでまずDjangoのプロジェクトフォルダにあるsettings.pyを開いて下さい。
DIRSの部分にコードを追加して下さい。
settings.pyの下の方に/static/と書いてあるような箇所があります。
その下にこのコードを書いておいて下さい。
先ほど作成したstaticフォルダにアクセスすることができるようになります。
Djangoのsettings.pyにはosをちゃんとインポートしておきましょう。
settings.pyのDIRSの部分でosを使用するのでインポートする必要があります。
これでtemplatesフォルダにアクセスしてくれるようにはなりました。
しかしまだテンプレートを表示させることはできません。
次にすることはDjangoのアプリケーションフォルダのblog_appのviews.pyとurls.pyにコードを追加します。
ユーザーからリクエストを受けたときindex.htmlを表示させるというシンプルな関数をとりあえず作成しました。
ここではviews.pyで作成したindex関数を呼び出してindex.htmlを表示させる処理を書いています。
path関数の第1引数の''はトップページであることを示しています。
さてやっと準備が整ったのでひとまず表示させてみましょう。
前回models.pyを作成したしたのでmigrateもついでにしておきましょう。
migrateはmodels.pyに追加した重要な定義をデータベースに設定しておきます。
migrateをやり直すのは地味にめんどくさいのでエラーがないことを確かめてから行うことをおすすめします。
このURLからローカルサーバーにアクセスすることができます。
順に行なって下さい。
これで最初に準備しておいたテンプレートが表示されるはずです。
03. DjangoプロジェクトのHTMLを表示
テンプレートが大変なことになっておりますね。
安心して下さい。
CSSが効いていないだけです。
index.htmlを開いて下さい。
index.htmlの1番最初の行にこのコードを追加して下さい。
このコードを追加することでstaticフォルダにアクセスすることができます。
headタグのstyle.cssの部分に注目して下さい。
staticタグで囲むことでstaticフォルダにアクセスすることができます。
Djangoでテンプレートを作成するときは必ず使用するので使い方を覚えておいて下さい。
04. まとめ
お疲れ様でした。
ここまで読んでいただきありがとうございました。
今回はテンプレートの表示まで行いました。
Djangoのアプリケーションを作成する上ではテンプレートの表示は必須となっているのでしっかりと押さえましょう。