25

Bottleのドキュメントを読んでみましたが、静的ファイルの提供がどのように機能するかはまだわかりません。私はindex.tplファイルを持っていて、その中にcssファイルが添付されていて、それは機能します。ただし、Bottleは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>
4

5 に答える 5

76

を使用して静的ファイルを提供するには、提供されている関数を使用し、いくつかのルートを追加する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
于 2012-11-06T20:34:28.963 に答える
14

多くの生徒が課題でこのコードを使用しており、解決策について少し懸念があるため、ここで回答を提供するだけです。

ボトルで静的ファイルを提供する標準的な方法は、ドキュメントにあります。

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"）を使用できることを意味します。

このアプローチの問題は、アプリケーションをデプロイしようとしたときに発生します。実稼働環境では、静的リソースを、Bottleアプリケーションではなく、nginxなどのWebサーバーで提供する必要があります。これを有効にするには、それらすべてをURLスペースの単一の部分から提供する必要があります。/静的。コードに相対ファイル名が散らばっている場合、このモデルに簡単に変換することはできません。

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

于 2016-06-08T00:37:10.553 に答える
5

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

于 2012-05-07T18:44:34.767 に答える
3

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

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

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

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

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

于 2015-07-28T03:06:29.787 に答える
2

私は過去に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)
于 2015-07-24T23:28:27.907 に答える