如何將javascript或css文件加載到BottlePy模板中？

Question

我想用BottlePy返回一個html模板。 這很好用。 但是如果我在我的tpl文件中插入這樣的javascript文件：

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

我收到404錯誤。 （無法加載資源：服務器響應狀態為404（未找到））

有誰知道如何解決這個問題？

這是我的腳本文件：

from bottle import route, run, view

@route('/')
@view('index')
def index():
    return dict()
run(host='localhost', port=8080)

這是模板文件，位於“./views”子文件夾中。

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/main.js" charset="utf-8"></script>
    </head>
    <body>
    </body>
</html>

也許它是從開發服務器查找我的js文件的“rootPath / js / main.js”？

文件的結構是：

app.py
-js
 main.js
-views
 index.tpl

謝謝。

Answer 1

好吧，首先，您需要您的開發服務器實際提供main.js ，否則它將無法用於瀏覽器。

習慣.css所有.js和.css文件放在static目錄下的小型Web應用程序中，因此您的布局應如下所示：

  app.py
- static/
    main.js
- views/
    index.tpl

絕不是這種確切的命名和布局，只是經常使用。

接下來，您應該為靜態文件提供處理程序：

from bottle import static_file

# ...

@route('/static/:path#.+#', name='static')
def static(path):
    return static_file(path, root='static')

這將在static/ browser下為您的文件提供服務。

現在，到最后一件事。 您將JavaScript指定為：

<script type="text/javascript" src="js/main.js" charset="utf-8"></script>

這意味着.js的路徑是相對於當前頁面的。 在您的開發服務器上，索引頁（ / ）將在/js/main.js查找.js ，而另一個頁面（例如/post/12 ）將在/post/12/js/main.js查找它，肯定會失敗。

相反，您需要使用get_url函數來正確引用靜態文件。 您的處理程序應如下所示：

from Bottle import get_url

# ...

@route('/')
@view('index')
def index():
    return { 'get_url': get_url }

在index.tpl ， .js應引用為：

<script type="text/javascript" src="{{ get_url('static', path='main.js') }}" charset="utf-8"></script>

get_url找到name='static'的處理程序，並計算它的正確路徑。 對於dev服務器，這將始終是/static/ 。 您甚至可以在模板中對其進行硬編碼，但我不推薦它有兩個原因：

您將無法將應用程序安裝在生產中的任何位置，但在根目錄下; 也就是說，當你將它上傳到porduction服務器上時，它可以放在http://example.com/（root ）下，但不能放在http://example.com/myapp/下。
如果更改/static/ dir位置，則必須在模板上搜索所有模板並在每個模板中進行修改。

Answer 2

這是在Bottle Web項目中添加CSS / JS等靜態文件的工作方法。 我正在使用Bootstrap和Python 3.6。

項目結構

project
│   app.py
│   bottle.py
│
├───static
│   └───asset
│       ├───css
│       │       bootstrap-theme.css
│       │       bootstrap-theme.css.map
│       │       bootstrap-theme.min.css
│       │       bootstrap-theme.min.css.map
│       │       bootstrap.css
│       │       bootstrap.css.map
│       │       bootstrap.min.css
│       │       bootstrap.min.css.map
│       │       custom.css
│       │
│       ├───fonts
│       │       glyphicons-halflings-regular.eot
│       │       glyphicons-halflings-regular.svg
│       │       glyphicons-halflings-regular.ttf
│       │       glyphicons-halflings-regular.woff
│       │       glyphicons-halflings-regular.woff2
│       │
│       └───js
│               bootstrap.js
│               bootstrap.min.js
│               jquery.min.js
│               npm.js
│
└───views
        index.tpl

app.py

from bottle import Bottle, run, \
     template, debug, static_file

import os, sys

dirname = os.path.dirname(sys.argv[0])

app = Bottle()
debug(True)

@app.route('/static/<filename:re:.*\.css>')
def send_css(filename):
    return static_file(filename, root=dirname+'/static/asset/css')

@app.route('/static/<filename:re:.*\.js>')
def send_js(filename):
    return static_file(filename, root=dirname+'/static/asset/js')

@app.route('/')
def index():
    data = {"developer_name":"Ahmedur Rahman Shovon",
            "developer_organization":"Datamate Web Solutions"}
    return template('index', data = data)

run(app, host='localhost', port = 8080)

在index.tpl

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bottle web project template">
    <meta name="author" content="datamate">
    <link rel="icon" href="/static/favicon.ico">        
    <title>Project</title>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">
    <script type="text/javascript" src="/static/jquery.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap.min.js"></script> 
</head>
<body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../navbar/">Home</a></li>
                        <li><a href="./">Github</a></li>
                        <li><a href="../navbar-fixed-top/">Stackoverflow</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="jumbotron">
            <h2>Welcome from {{data["developer_name"]}}</h2>
                <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
            </div>
        </div>
        <!--./row-->
        <div class="row">
            <hr>
            <footer>
                <p>&copy; 2017 {{data["developer_organization"]}}.</p>
            </footer>           
        </div>
    </div> 
    <!-- /container -->
</body>
</html>

產量

Answer 3

我認為你把文件main.js放在錯誤的位置。

請注意，此文件路徑必須相對於請求的URL，而不是相對於模板的路徑。 所以把它放在像template/js/main.js這樣的文件夾中是行不通的。

如何將javascript或css文件加載到BottlePy模板中？

問題描述

3 個解決方案

解決方案1
28 已采納 2011-08-08 10:15:03

解決方案2
0 2017-08-18 16:44:02

解決方案3
0 2011-08-08 06:47:19

如何將javascript或css文件加載到BottlePy模板中？

問題描述

3 個解決方案

解決方案1 28 已采納 2011-08-08 10:15:03

解決方案2 0 2017-08-18 16:44:02

解決方案3 0 2011-08-08 06:47:19

解決方案1
28 已采納 2011-08-08 10:15:03

解決方案2
0 2017-08-18 16:44:02

解決方案3
0 2011-08-08 06:47:19