TIL

Today I Learned. 知ったこと、学んだことを書いていく

CSSを外部ファイルに記述 - bottle

CSSみたいな静的ファイルをbottleで扱うときには、ルーティングを設定してあげる

static_fileをインポートして、処理を記述する

以下のようなファイル構成だった場合

.
├── bottle.py
├── server.py
├── static
│   └── css
│       └── main.css
└── views
    └── top.html

CSSファイルはstatic/css/main.cssとする

from bottle import route, run, static_file

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_DIR = os.path.join(BASE_DIR, 'static')

import os


@route('/static/css/<filename:path>')
def send_static(filename):
    """静的ファイルを返す
    """
    return static_file(filename, root=f'{STATIC_DIR}/css')

HTML内で、以下のように記述しておくと、CSSが読み込める

<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="/static/css/main.css" type="text/css" />
</head>

わーい!できたー!

参考文献