bottleでBootstrapを使ってみる

前回の記事ではnginxのリバースプロキシをしました。jinja2というテンプレートを使ってブラウザで表示できるようにしました。今回はbootstrapを動かしてみたいと思います

Honokaを使ってみる

bootstrapのテンプレートであればなんでも良かったのでHonokaテーマを使ってみたいと思います。

ダウンロードしてアップロード

まずはSFTPなどで、/var/www/html/viewsの中にindex.htmlをアップします

index.pyを変更

ソースを表示
印刷SyntaxHighlighterについて
01[macan@localhost html]$ pwd
02/var/www/html
03 
04# coding: utf-8
05from bottle import route, run, template
06from bottle import TEMPLATE_PATH, jinja2_template as template
07 
08 
09@route('/')
10def index():
11    return template('index')
12if __name__ == '__main__':
13 
14    run(host='0.0.0.0', port=8081, debug=True, reloader=True)

topのとこをindexに変えました

Apacheの再起動

ソースを表示
印刷SyntaxHighlighterについて
1[macan@localhost html]$ sudo service httpd restart
2Redirecting to /bin/systemctl restart httpd.service
3[macan@localhost html]$

再起動して更新を押すと、CSSも何も読み込まれていないHTMLが読み込まれます

CSS、JavaScriptを読み込む

CSSやJavaScriptファイルを読み込まないといけないので、index.pyを変更します

ソースを表示
印刷SyntaxHighlighterについて
01# coding: utf-8
02import os
03from bottle import route, run, error
04from bottle import TEMPLATE_PATH, jinja2_template as template
05from bottle import static_file
06 
07#index.pyが設置されているディレクトリの絶対パス取得
08BASE_DIR = os.path.dirname(os.path.abspath(__file__))
09#テンプレートのディレクトリ指定
10TEMPLATE_PATH.append(BASE_DIR + "/views")
11 
12#CSSファイル
13@route('/assets/css/<filename>')
14def css_dir(filename):
15    """ set css dir """
16    return static_file(filename, root=BASE_DIR + "/static/assets/css")
17 
18 
19@route('/assets/js/<filename>')
20def js_dir(filename):
21    """ set js dir """
22    return static_file(filename, root=BASE_DIR + "/static/assets/js")
23 
24 
25@route('/')
26def index():
27    return template('index')
28if __name__ == '__main__':
29 
30    run(host='0.0.0.0', port=8081, debug=True, reloader=True)

ファイルをアップロードします
/var/www/html
          ├static
          │  └assets
          │    ├css
          │    │ ├bootstrap.css
          │    │ └example.css
          │    └JS
          │      ├bootstrap.bundle.js
          │      ├bootstrap.bundle.min.js
          │      ├bootstrap.js
          │      └bootstrap.min.js
          └views
　　　　　　 └index.html

となります。
※botleやjinja2など必要なものは↑には書いていないだけで実際には必要です。

index.htmlの修正

修正ソースのみ載せてます

ソースを表示
印刷SyntaxHighlighterについて
1  <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.css">
2  <link rel="stylesheet" type="text/css" href="/assets/css/example.css">
3/assets/js/bootstrap.min.js

CSSとJSが読み込まれました。JSコード書いたらなぜかimgとかに変換されてしまったのでJSだけは修正したとこのみです

画像を読み込む

/assets/ディレクトリにimgをいれて、index.pyに追記します

ソースを表示
印刷SyntaxHighlighterについて
1@route('/assets/img/<filename>')
2def img_dir(filename):
3    """ set js dir """
4    return static_file(filename, root=BASE_DIR + "/static/assets/img")

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS