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

Share on Facebook
Pocket
LINEで送る
Bookmark this on Google Bookmarks

導入に引き続き。

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

 

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

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

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

# -*- 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)

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

次のように設置した。

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

 

 

 

 

 

 

 

 

 

 

 

導入で作成した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>

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

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

 

 

 

 

 

 

 

 

 

 

 

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

 

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です