読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

bottleとsqlite3を連携させて簡単なメモ表示ツール その4:フロントエンド・フレームワークを使う

前回は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')

見え方

前の殺風景な奴から大幅に見栄えがするようになりました。やったぜ。
f:id:shuzo_kino:20160920195012p:plain