通常情況下,需要在模板響應(yīng)中包含一些資源,即使有一定的動態(tài)數(shù)據(jù)也不會改變。這樣的資源被稱為靜態(tài)資產(chǎn)。媒體文件(.png,.jpg等),用于執(zhí)行一些前端代碼的JavaScript文件,或用于格式化HTML的樣式表(.css文件)是靜態(tài)文件的例子。
Pyramid將這些靜態(tài)資產(chǎn)從服務(wù)器文件系統(tǒng)的指定目錄中提供給客戶端的瀏覽器。配置器對象的 add_static_view() 方法定義了路由的名稱和包含靜態(tài)文件(如圖片、JavaScript和CSS文件)的文件夾路徑。
按照慣例,”static “目錄被用來存儲靜態(tài)資產(chǎn),add_static_view()的使用方法如下
config.add_static_view(name='static', path='static')
一旦定義了靜態(tài)路由,在HTML腳本中使用靜態(tài)資產(chǎn)的路徑就可以通過 request.static_url() 方法獲得。
靜態(tài)圖片
在下面的例子中,Pyramid的標志將在logo.html模板中被呈現(xiàn)。因此,”pyramid.png “文件首先被放在靜態(tài)文件夾中。現(xiàn)在它可以作為HTML代碼中標簽的src屬性使用。
<html>
<body>
<h1>Hello, {{ name }}. Welcome to Pyramid</h1>
<img src="{{request.static_url('app:static/pyramid.png')}}">
</body>
</html>
例子
應(yīng)用程序代碼用 add_static_view() 更新配置器,并定義 index() 視圖來渲染上述模板。
from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.response import Response
from pyramid.view import view_config
@view_config(route_name='index', renderer='templates/logo.html')
def index(request):
return {'name':request.matchdict['name']}
if __name__ == '__main__':
with Configurator() as config:
config.include('pyramid_jinja2')
config.add_jinja2_renderer(".html")
config.add_route('index', '/{name}')
config.add_static_view(name='static', path='app:static')
config.scan()
app = config.make_wsgi_app()
server = make_server('0.0.0.0', 6543, app)
server.serve_forever()
輸出
運行上述代碼來啟動服務(wù)器。在你的瀏覽器中使用 http://localhost:6543/Guest 作為 URL。這里’Guest’是由 matchdict 對象中的view函數(shù)拾取的路徑參數(shù),并作為上下文傳遞給logo.html模板。瀏覽器現(xiàn)在會顯示Pyramid標志。
Javascript作為靜態(tài)資產(chǎn)
這里是另一個靜態(tài)文件的例子。一個JavaScript代碼 hello.js 包含一個 myfunction() 的定義,將在以下HTML腳本(templates\hello.html)的 onload 事件中執(zhí)行。
<html>
<head>
<script src="{{request.static_url('app:static/hello.js')}}"></script>
</head>
<body onload="myFunction()">
<div id="time" style="text-align:right; width="100%"></div>
<h1><div id="ttl">{{ name }}</div></h1>
</body>
</html>
例子
保存在靜態(tài)文件夾中的 hello.js 代碼如下所示
function myFunction() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var msg="";
if (h<12)
{
msg="Good Morning, ";
}
if (h>=12 && h<18)
{
msg="Good Afternoon, ";
}
if (h>=18)
{
msg="Good Evening, ";
}
var x=document.getElementById('ttl').innerHTML;
document.getElementById('ttl').innerHTML = msg+x;
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
}
輸出
該函數(shù)檢測當前時間值,并根據(jù)一天中的時間為 msg 變量分配適當?shù)闹担ㄔ缟虾?,下午好或晚上好)?/p>
將 hello.js 保存在 static 文件夾中,hello.html保存在 templates 文件夾中,并重新啟動服務(wù)器。瀏覽器應(yīng)該顯示當前時間和下面相應(yīng)的信息。
更多建議: