web-dev-qa-db-ja.com

ボトルの静的ファイル

Bottleのドキュメントを読んでみましたが、静的ファイルサービスの仕組みがわかりません。 _index.tpl_ファイルがあり、その中にcssファイルが添付されていて、機能します。しかし、私はボトルがcssファイルを自動的に提供しないことを読んでいました、それはページが正しくロードされた場合には当てはまりません。

ただし、ページをリクエストすると速度の問題が発生します。 return static_file(params go here)を使用しなかったからですか？誰かがどのように機能するか、およびページのロード時にそれらがどのように使用されるかを明確にできれば、それは素晴らしいことです。

サーバーコード：

_from Bottle import route,run,template,request,static_file



@route('/')
def home():
    return template('Templates/index',name=request.environ.get('REMOTE_ADDR'))

run(Host='Work-PC',port=9999,debug=True)
_

インデックス：

_<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>index</title>
  <link type="text/css"
 href="cssfiles/mainpagecss.css"
 rel="stylesheet">
</head>
<body>
<table
 style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>
      <h1><span class="headertext">
      <center>Network
Website</center>
      </span></h1>
      </td>
    </tr>
  </tbody>
</table>
%if name!='none':
    <p align="right">signed in as: {{name}}</p>
%else:
    pass
%end
<br>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2"
 cellspacing="2">
  <tbody>
    <tr>
      <td>
      <table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="width: 15%; vertical-align: top;">
            <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
              <tbody>
                <tr>
                  <td>Home<br>
                  <span class="important">Teamspeak Download</span><br>
                  <span class="important">Teamspeak Information</span></td>
                </tr>
              </tbody>
            </table>
            </td>
            <td style="vertical-align: top;">
            <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
              <tbody>
                <tr>
                  <td>
                  <h1><span style="font-weight: bold;">Network Website</span></h1>
To find all of the needed information relating to the network's social
capabilities, please refer to the links in the side bar.</td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
_
pythonpython-2.7bottle
24
IT Ninja

ドキュメントに示されているように、静的ファイルはstatic関数を使用して提供する必要があり、cssは静的ファイルです。 static関数は、セキュリティと、ソースから確認できるその他の関数を処理します。静的関数のpath引数は、cssファイルを格納するディレクトリを指す必要があります

3
cobie

bottleを使用して静的ファイルを提供するには、提供されているstatic_file関数を使用して、ルートをいくつか追加する必要があります。次のルートは静的ファイル要求を送信し、正しいファイル拡張子を持つファイルのみがアクセスされるようにします。

from bottle import get, static_file

# Static Routes
@get("/static/css/<filepath:re:.*\.css>")
def css(filepath):
    return static_file(filepath, root="static/css")

@get("/static/font/<filepath:re:.*\.(eot|otf|svg|ttf|woff|woff2?)>")
def font(filepath):
    return static_file(filepath, root="static/font")

@get("/static/img/<filepath:re:.*\.(jpg|png|gif|ico|svg)>")
def img(filepath):
    return static_file(filepath, root="static/img")

@get("/static/js/<filepath:re:.*\.js>")
def js(filepath):
    return static_file(filepath, root="static/js")

これで、htmlで次のようにファイルを参照できます。

<link type="text/css" href="/static/css/main.css" rel="stylesheet">

ディレクトリのレイアウト：

`--static
|  `--css
|  `--fonts
|  `--img
|  `--js
71
Sanketh Katta

私の学生の多くがこのコードを課題で使用していて、解決策について少し懸念があるので、ここで答えを提供します。

Bottleで静的ファイルを提供する標準的な方法は documentation にあります：

from bottle import static_file
@route('/static/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='/path/to/your/static/files')

このようにして、静的フォルダーの下のすべてのファイルは、/ staticで始まるURLから提供されます。 HTMLでは、リソースの完全なURLパスを参照する必要があります。例：

<link rel='stylesheet' type='text/css' href='/static/css/style.css'>

Sankethからの回答により、URLスペース内の任意の場所にある画像、CSSファイルなどへの参照は、静的フォルダー内の特定のフォルダーから提供されます。したがって、/ foo/bar/baz/picture.jpgと/picture.jpgはどちらもstatic/images/picture.jpgから提供されます。つまり、HTMLコードで正しいパスを取得する必要はありません。常に相対ファイル名を使用できます（つまり、src = "picture.jpg"のみ）。

このアプローチの問題は、アプリケーションをデプロイしようとしたときに発生します。本番環境では、ボトルネックアプリケーションではなく、nginxのようなウェブサーバーによって静的リソースが提供されるようにします。これを有効にするには、URLスペースの1つの部分からすべて提供する必要があります。 /静的。コードに相対ファイル名が散らかっている場合、このモデルに簡単に変換できません。

したがって、このページにリストされているより複雑なソリューションではなく、Bottleチュートリアルの3行ソリューションを使用することをお勧めします。これはより単純なコードであり（バグが少ないため）、コードを変更せずにシームレスに本番環境に移行できます。

12
Steve Cassidy

Sankethの回答のようにファイルを提供するために正規表現マッチングを使用するのではなく、次のように、テンプレートを変更せずに静的ファイルへのパスを明示的に提供したくないのです。

<script src="{{ get_url('static', filename='js/bootstrap.min.js') }}"></script>

これを行うには、静的ルートデコレータの<filename>を:pathタイプのいずれかに置き換えるだけです。

@app.route('/static/<filename:path>', name='static')
def serve_static(filename):
    return static_file(filename, root=config.STATIC_PATH)

:pathは、貪欲ではない方法でファイルパス全体と一致するため、本番環境に切り替えるときにテンプレートを変更することを心配する必要はありません。すべてを同じ相対フォルダー構造に保つだけです。

3
Aaron D

私は過去にSankethのテンプレートを使用しましたが、時間の経過とともにそれを拡張不可知機能に凝縮しました。 ext_map辞書に拡張子とフォルダーのマッピングを追加するだけです。拡張機能が明示的にマップされていない場合、デフォルトでstatic /フォルダーになります。

import os.path    

# Static Routes
@get('/<filename>')
def serve_static_file(filename):
    ext = os.path.splitext(filename)[1][1:]
    ext_map = {'image':['png','gif','jpg','ico'],'js':['js']}
    sub_folder = next((k for k, v in ext_map.items() if ext in v),'')
    return static_file(filename, root='static/'+sub_folder)
1
phoxley