跳转到主要内容

CSS和JS的资源管理器

项目描述

以下是如何使用CSS资源的示例。

首先,我们设置一些资源

from quantumcore.resources import CSSResourceManager, css_from_pkg_stream
from quantumcore.resources import JSResourceManager, js_from_pkg_stream, jst_from_pkg_stream

r1 = css_from_pkg_stream(__name__,
                         'static/css/screen.css',
                         merge=True,
                         auto_reload=True)
r2 = css_from_pkg_stream(__name__,
                     'static/css/addons.css',
                     merge=True,
                     auto_reload=True)
r3 = css_from_pkg_stream(__name__,
                         'static/css/print.css',
                         merge=True,
                         name="print",
                         auto_reload=True)
css_manager = CSSResourceManager([r1,r2,r3],
                                 prefix_url="/css",
                                 auto_reload=True)

# JS
js_manager = JSResourceManager([
    js_from_pkg_stream(__name__,
                       'static/js/jquery.json-2.2.min.js',
                       merge=True, prio=2),
    js_from_pkg_stream(__name__,
                       'static/js/jquery.cookie.js',
                       merge=True,
                       minimize_method="jsmin",
                       prio=3),
    ], prefix_url="/js", auto_reload=True)

这定义了两个CSS资源和两个JS资源。

实例化资源

资源对应文件系统中的一个文件。这里我们使用一个简写叫做 js_from_pkg_streamcss_from_pkg_stream 来从一个包中加载文件。

这些函数的强制通用参数包括

  • 使用 __name__ 在包内识别文件名。

  • 路径是 __name__ 所属的包内路径。

可选参数包括

  • merge 定义资源是否允许与其他类似资源合并。默认为 True

  • 通过 prio 您可以定义资源在资源管理器中的顺序。数字较小的资源先加载。默认为 1

  • name 是一个可选的名称,资源可以以此名称聚集在一起。具有相同名称的资源可以一起检索。默认值为 ""。在示例中,前两个 CSS 资源将一起检索,因为它们都有相同的空名称。

  • processors 定义一个可选的处理器函数列表,这些函数接受资源内容作为输入并输出另一个(例如压缩)版本。

  • auto_reload 定义资源是否可以重新加载。请注意,必须在资源和资源管理器中设置此选项。

CSS 特定参数

  • media 定义用于此样式的表的媒体类型,例如 printscreen。它可以是字符串或字符串列表。默认值是 ['screen', 'projection']

JS 特定参数

  • minimize_method"jsmin"None,如果第一个提供,则 JavaScript 代码也将被压缩,这意味着删除空白和缩短变量。

实例化资源类

如果您有一个字符串,您也可以直接实例化 CSSResourceJSResource

r = CSSResource(
        source = u'my CSS',
        minimize_method = None,
        media = ['projection', 'screen'],
        type_ = u'text/css',
        ...
)

r = JSResource(
        source = u'my JS',
        minimize_method = None,
        type_ = u'text/css',
        ...
)

除了 __name__filename 之外,上述所有参数都适用。

资源管理器

在上面的示例中,我们看到了这样的资源管理器

css_manager = CSSResourceManager([r1,r2,r3],
                 prefix_url="/css",
                 auto_reload=True)

js_manager = JSResourceManager([.....],
                 prefix_url="/js",
                 auto_reload=True)

它们处理项目中使用的所有 CSS 和 JS 文件,最终将它们分组。

两个版本都接受一个 prefix_url,该 URL 将在以后提供。这定义了将由管理器实例计算哪些 URL。

可选参数包括

  • no_merge 可以是 TrueFalse,它定义了资源是否被合并到集群中。

  • auto_reload 定义管理器是否应检查资源是否已更改并需要重新加载。这仅在资源已将 auto_reload 设置为 True 时才有效。

我们还可以稍后添加资源

css_manager.append(resource3)
js_manager.append(resource4)

现在我们可以将此资源对象传递给一个模板,例如 Chameleon 模板

template.render(js_manager = js_manager, css_manager = css_manager)

模板代码如下

<tal:block replace="structure css_resources()" />
<tal:block replace="structure js_resources()" />

这将渲染所有未命名的集群(意味着没有提供 name 参数的资源)的链接。您也可以这样渲染具有特定名称的所有资源

<!--[if lt IE 8]>
    <tal:block replace="structure css_resources('ie')" />
<![endif]-->

将渲染所有 name='ie' 的资源。

在生成的 HTML 中,它看起来像这样

<link href="/css/style.css?h=0140632a9c7bdfec7a2a73829e37d18a" media="projection, screen" rel="stylesheet" type="text/css" />
<link href="/css/ie.css?h=4e743c01195a9352f5b3763f8dcffd69" media="projection, screen" rel="stylesheet" type="text/css" />

<script src="/js/script.js?h=15b10405313c16a428bce63782ed86c7" type="text/javascript"></script>

如您所见,如果可能,资源将聚集到文件中。此外,每个资源链接都提供了一个缓存键,如果内容更改,则该键也会更改。

提供资源

要提供这些文件,我们必须将 URL 传递给资源注册表。在 WSGI 应用程序内部,这可能是这样的

def __call__(self, environ, start_response):
    path = environ['PATH_INFO'].split("/")

    if path[1]=="css":
        css_manager.render_wsgi(environ, start_response)
    elif path[1]=="js":
        js_manager.render_wsgi(environ, start_response)

它将检查 WSGI 环境中的路径是否与生成的任何 URL 匹配。

在没有 WSGI 的情况下,它可能看起来像这样

code, data, headers = resources.render(url)

data 是一个迭代器,包含合并和最小化的 CSS 文件,code 是返回代码,通常是 200 Okheaders 是一个 (key, value) 元组的列表。

变更历史

0.6 - (未发布)

  • 修复命名错误:如果资源具有不同的名称和不同的优先级,它们只按优先级排序。这导致合并错误,因为在尝试合并时名称不断变化。现在它们首先按名称排序,然后按优先级排序。

0.5 - (2010/04/06)

初始发布

下载

由以下机构支持