初心者向け : Flaskログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-

初心者向け : Flaskログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-

 

テンプレートのダウンロード

今回はこちらのテンプレートを使用します
こちらのリンクの「Free Download」をクリックし、
テンプレートをダウンロードします
https://startbootstrap.com/themes/freelancer/

ダウンロード後はたくさんフォルダとファイルがありますが、
とりあえず必要なファイルはこちらだけです

 

templates/index.htmlへ適用する

先ほどダウンロードしたテンプレートのhtmlを
templates/index.htmlに貼り付けます

ちなみに今回作成しているFlaskのプロジェクトではblock contentの中に
htmlを入れてあげることで反映させることができます

 

貼り付け後はこのようなhtmlとなります

 

 

localhost:5000で確認すると
画像やcssがないので見た目も綺麗ではありません

※開発者ツールがわからないという方はこちらから調べてください
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

 

なので、次はcssを追加していきます

 

FlaskにCSSを追加する

FlaskにCSSを追加するにはstaticディレクトリを作成する必要があります
さらにその中にcssとjsディレクトリを作成します

ダウンロードしたテンプレートのフォルダに入っている

  • vendor/bootstrap/cssの中身全部をstatic/cssへ
  • vendor/bootstrap/jsの中身全部をstatic/jsへ
  • css/heroic-features.cssをstatic/cssへ

ペーストする

このような内容となります
開発環境の違いで表示のされ方が異なるかもしれません

 

追加が完了したらbootstrapを読み込ませるために
templates/layout.htmlをこのように修正します

 

その後flaskを再起動してlocalhost:5000で確認しましょう

 

先ほどよりかはだいぶ前進しました!

 

ルーティングやヘッダーを修正する

先ほどはtemplates/index.htmlにbootstrapのhtmlを追加しましたが、
今からlayout.htmlに移動してヘッダーに

  • ログインしていれば「Questions」のリンクを表示

リンクを追加します。

修正後はtemplates/layout.htmlはこのようになります

 

templates/index.htmlは前の状態にひとまず戻します

 

この状態で、ログインしたりログアウトしてテストを行いましょう

ちなみにlayout.htmlへ直接貼り付けたので全ての要素がこのlayoutを反映していることになってます

これでどの画面からでもログインしたり、ログアウトしたりすることができます!

Questionsをリスト表示する

templates/questions/index.htmlの綺麗に表示されるようにしていきます
templates/questions/index.html

 

localhost:5000/questionsではこのように表示されています

 

ただし下の方にスクロールするとtemplates/layout.htmlのhtmlも表示されて
おかしなことになっているので、templates/layout.htmlを修正します

templates/layout.html

 

修正後はlayout.htmlの余分なhtmlを削除したので綺麗になっています

 

 

Questionsの詳細を修正する

Questionsの一覧は綺麗にしたので、次は詳細画面を綺麗にしていきます

templates/questions/show.htmlをこのように修正します

 

 

見た目はこのようになります

bootstrapの適用はこれで完了です

Bitbucketのリンク:https://bitbucket.org/Masahiro_Okubo/qa-site/src/phase2/
ブランチは「phase2」で指定してください。

 

参考記事

【Trainer’s Recipe】Pythonのフレームワークのflaskを触ってみた。

Pythonカテゴリの最新記事