bottleでBootstrapを使ってみる

前回の記事ではnginxのリバースプロキシをしました。jinja2というテンプレートを使ってブラウザで表示できるようにしました。今回はbootstrapを動かしてみたいと思います
Honokaを使ってみる
bootstrapのテンプレートであればなんでも良かったのでHonokaテーマを使ってみたいと思います。
ダウンロードしてアップロード
まずはSFTPなどで、/var/www/html/viewsの中にindex.htmlをアップします
index.pyを変更
[c]
[macan@localhost html]$ pwd
/var/www/html
# coding: utf-8
from bottle import route, run, template
from bottle import TEMPLATE_PATH, jinja2_template as template
@route('/')
def index():
return template('index')
if __name__ == '__main__':
run(host='0.0.0.0', port=8081, debug=True, reloader=True)
[/c]
topのとこをindexに変えました
Apacheの再起動
[c]
[macan@localhost html]$ sudo service httpd restart
Redirecting to /bin/systemctl restart httpd.service
[macan@localhost html]$
[/c]
再起動して更新を押すと、CSSも何も読み込まれていないHTMLが読み込まれます
CSS、JavaScriptを読み込む
CSSやJavaScriptファイルを読み込まないといけないので、index.pyを変更します
[c]
# coding: utf-8
import os
from bottle import route, run, error
from bottle import TEMPLATE_PATH, jinja2_template as template
from bottle import static_file
#index.pyが設置されているディレクトリの絶対パス取得
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
#テンプレートのディレクトリ指定
TEMPLATE_PATH.append(BASE_DIR + "/views")
#CSSファイル
@route('/assets/css/<filename>')
def css_dir(filename):
""" set css dir """
return static_file(filename, root=BASE_DIR + "/static/assets/css")
@route('/assets/js/<filename>')
def js_dir(filename):
""" set js dir """
return static_file(filename, root=BASE_DIR + "/static/assets/js")
@route('/')
def index():
return template('index')
if __name__ == '__main__':
run(host='0.0.0.0', port=8081, debug=True, reloader=True)
[/c]
ファイルをアップロードします /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の修正
修正ソースのみ載せてます
[html]
<link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/css/example.css">
/assets/js/bootstrap.min.js
[/html]
CSSとJSが読み込まれました。JSコード書いたらなぜかimgとかに変換されてしまったのでJSだけは修正したとこのみです
画像を読み込む
/assets/ディレクトリにimgをいれて、index.pyに追記します
[c]
@route('/assets/img/<filename>')
def img_dir(filename):
""" set js dir """
return static_file(filename, root=BASE_DIR + "/static/assets/img")
[/c]
個人支援・寄付について
サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。
- ビットコイン:3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS