前回はJadeを導入しました。
今回はCSSやJS、画像やフォントがテンコ盛りのフロントエンド・フレームワークをbottleで使う方法を考えます。
実際のところ
導入
designmodo.github.io
上記サイトから、twitter-bootstrapの拡張版「Flat UI」を頂いてきます。
展開すると「dist」というディレクトリが確認できるので、こいつの中身をbottleプロジェクトのtemplatesディレクトリに追加。
index.htmlは好みで。私は消しました。
終わると、こんな構成になってるはずです。
$ tree -l 2 . ├── app.py ├── blogtest.sqlite ├── static │ ├── css │ ├── fonts │ ├── img │ └── js └── templates ├── blog.jade ├── hello.jade └── index.jade
ディレクトリ構成
app.py
bottleのstaticは必須です。
あとはstaticフォルダにパスを通してあげます。
from bottle import route, run, static_file from os import path as op templates = op.dirname(op.abspath(__file__)) + '/templates/' @route('/static/:path#.+#', name='static') def static(path): return static_file(path, root='static')
blog.jade
blog.jadeのテンプレも付属のdist/index.htmlを基準に大幅に記述量を増やしました。
doctype html(lang='jp') head meta(charset='utf-8') title Blog Post test meta(name='viewport', content='width=device-width, initial-scale=1.0') // Loading Bootstrap link(href='/static/css/vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet') // Loading Flat UI link(href='/static/css/flat-ui.min.css', rel='stylesheet') link(rel='shortcut icon', href='img/favicon.ico') // HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. //if lt IE 9 script(src='/staic/js/vendor/html5shiv.js') script(src='/static/js/vendor/respond.min.js') body .container h1 blog posts p #{body[0]} hr form(action="/blog" method="post") .form-group input.form-control(type='text',name='body', placeholder="Input your blog contents") .form-group input(type="submit" class="btn btn-primary") // jQuery (necessary for Flat UI's JavaScript plugins) script(src='/static/js/vendor/jquery.min.js') // Include all compiled plugins (below), or include individual files as needed script(src='/static/js/flat-ui.min.js')
見え方
前の殺風景な奴から大幅に見栄えがするようになりました。やったぜ。
