「bottle」+「jinja2」を使ってサイト構築 2 jQueryとBootstrap導入

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

導入に引き続き。

[amazonjs asin=”4774173207″ locale=”JP” title=”Pythonエンジニア養成読本[いまどきの開発ノウハウ満載!] (Software Design plus)”]

導入で用意したjs,css,imgディレクトリを利用できるようにする。
また、jQuery、bootstrapを導入する。

 

 
サンプルコードはこちら
(次回以降に紹介したコードも含む)
 

js,css,img,fontsディレクトリを指定する

static_fileメソッドを使って、js,css,imgディレクトリを指定する。
bootstrapにはfontsディレクトリも必要だったため、追加した。

[python title=”index.py”] # -*- coding: utf-8 -*-

import os

from bottle import route, run
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")

@route(‘/css/<filename>’)
def css_dir(filename):
""" set css dir """
return static_file(filename, root=BASE_DIR+"/static/css")

@route(‘/js/<filename>’)
def js_dir(filename):
""" set js dir """
return static_file(filename, root=BASE_DIR+"/static/js")

@route(‘/img/<filename>’)
def img_dir(filename):
""" set img file """
return static_file(filename, root=BASE_DIR+"/static/img")

@route(‘/font/<filename>’)
def font_dir(filename):
""" set font file """
return static_file(filename, root=BASE_DIR+"/static/fonts")

@route(‘/top’)
def top():

# 配列を渡すための準備
fizzbuzz = [] for i in range(1, 100):

if i % 3 == 0 and i % 5 == 0:
fizzbuzz.append(str(i) + ": fizzbuzz")
elif i % 3 == 0:
fizzbuzz.append(str(i) + ": fizz")
elif i % 5 == 0:
fizzbuzz.append(str(i) + ": buzz")
else:
fizzbuzz.append(str(i))

return template(‘top’, name="umentu", fizzbuzz=fizzbuzz)

if __name__ == "__main__":
run(host="localhost", port=8080, debug=True, reloader=True)
[/python]

jQuery,Bootstrapに必要なファイルを設置

次のように設置した。

スクリーンショット 2015-05-19 0.06.26

 

 

 

 

 

 

 

 

 

 

 

導入で作成したtop.htmlで読み込む。

[html title=”top.html”] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>テストページ</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
</head>
<body>
<!–変数を使う場合は、{{}}の中に変数名を記述–>
こんにちは、 {{name}}

<h1>今日のfizzbuzz</h1>
<!–
配列fizzbuzzから1つずつ順番にデータを取り出し、fzbzに代入。
fzbzは単なる変数のため、{{}}で表示
–>
<table class="table table-striped">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
</tr>
<tr>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
</tr>
<tr>
<td>data4</td>
</tr>

</tbody>
</table>
</body>
</html>
[/html]

https://localhost:8080/top にアクセスしてみる。

スクリーンショット 2015-05-19 1.11.01

 

 

 

 

 

 

 

 

 

 

 

bootstrapが適用できていることがわかる。
次はテンプレートファイル同士を呼び出す、フレームワークらしい開発手順。

 

 
「bottle」+「jinja2」を使ってサイト構築 1

Related posts

コメントを残す