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

我想用BottlePy返回一個html模板。這工作正常。但是，如果我在我的tpl文件中插入一個像這樣的JavaScript文件：如何將JavaScript或css文件加載到BottlePy模板中？

<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>

也許它是從開發服務器的「rootPath/js/main.js」它尋找我的js文件？

文件的結構是：

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

感謝。

來源

2011-08-08 eltorrero

你嘗試過某種形式的調試，如打印出你的根路徑，你的JS文件夾的內容？ –

那麼，首先，你需要你的開發服務器來實際服務於main.js，否則它將不可用於瀏覽器。

這是習慣性地把所有.js和.css文件在小型Web應用程序的static目錄下，這樣你的佈局應該是這樣的：

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/下到瀏覽器。

現在，到最後一件事。你指定你的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函數來正確引用靜態文件。你的處理程序應該是這樣的：

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

get_url查找處理程序與name='static'，並計算出它的正確路徑：

from Bottle import get_url 

# ... 

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

而且在index.tpl，.js應該被引用。對於dev服務器，這將始終是/static/。你可以甚至可能在模板中有硬代碼，但是我不推薦它的原因有兩個：

您將無法在任何地方，但在根在生產安裝您的應用程序;即，當您將其上傳到生產服務器時，可將其放置在http://example.com/（根）下，但不在http://example.com/myapp/下。
如果更改/static/目錄位置，則必須在模板中搜索並在每個模板中對其進行修改。

來源

2011-08-08 10:15:03 Helgi

你能檢查這個問題嗎？http://stackoverflow.com/questions/9505256/static-files-in-bottle-py – Anuj

@Anuj：我已經回答了你的問題。 – Helgi

謝謝回答.. – Anuj

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

請注意，此文件路徑必須相對於請求的網址，而不是相對於您的模板的路徑。所以把它放在像template/js/main.js這樣的文件夾中將無法工作。

來源

2011-08-08 06:47:19 Paulpro

請查看編輯的問題以獲取更多詳細信息。 – eltorrero

這裏是一個工作方式，如在瓶 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>

輸出

來源

2017-08-18 16:44:02 arsho

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

回答

相關問題