13：带有Static Assets的css/js/images文件

当然，网络不仅仅是标记。您需要Static Assets：css、js和images。让我们将Web应用程序指向一个目录，在这个目录中Pyramid将提供一些Static Assets。

目标

  • 在URL上发布Static Assets目录。

  • 使用Pyramid帮助生成该目录中文件的URL。

步骤

  1. 首先我们复制 view_classes 步骤：

    cd ..; cp -r view_classes static_assets; cd static_assets
$VENV/bin/pip install -e .

  2. 我们加了一个电话 config.add_static_view 在里面 static_assets/tutorial/__init__.py ：

     1from pyramid.config import Configurator
 2
 3
 4def main(global_config, **settings):
 5    config = Configurator(settings=settings)
 6    config.include('pyramid_chameleon')
 7    config.add_route('home', '/')
 8    config.add_route('hello', '/howdy')
 9    config.add_static_view(name='static', path='tutorial:static')
10    config.scan('.views')
11    return config.make_wsgi_app()

  3. 我们可以在 <head> 我们的模板在 static_assets/tutorial/home.pt ：

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Quick Tutorial: ${name}</title>
    <link rel="stylesheet"
          href="${request.static_url('tutorial:static/app.css') }"/>
</head>
<body>
<h1>Hi ${name}</h1>
</body>
</html>

  4. 在添加CSS文件 static_assets/tutorial/static/app.css ：

    body {
    margin: 2em;
    font-family: sans-serif;
}

  5. 我们添加了一个功能测试，它断言新添加的静态文件已传递：

    46    def test_css(self):
47        res = self.testapp.get('/static/app.css', status=200)
48        self.assertIn(b'body', res.body)

  6. 现在运行测试：

    $VENV/bin/pytest tutorial/tests.py -q
....
5 passed in 0.50 seconds

  7. 运行 Pyramid 应用程序时使用：

    $VENV/bin/pserve development.ini --reload

  8. 在浏览器中打开http://localhost:6543/，注意新字体。

分析

我们将wsgi应用程序更改为将http://localhost:6543/static/下的请求映射到 static 我们的目录 tutorial 包。此目录包含 app.css .

我们链接到模板中的CSS。我们可以硬编码这个链接到 /static/app.css . 但是如果网站后来被移到 /somesite/static/ ？或者Web开发人员更改了磁盘上的排列？Pyramid提供了一个帮助器，可以灵活地生成URL：

${request.static_url('tutorial:static/app.css')}

这与 path='tutorial:static' 在我们 config.add_static_view 注册。通过使用 request.static_url 要生成Static Assets的完整URL，您都要确保与配置保持同步，并在以后获得重构灵活性。

额外credit

  1. 还有一个 request.static_path 应用程序编程接口。这和 request.static_url 是吗？

参见

静态资产, 阻止HTTP缓存, and 影响HTTP缓存