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_stream 和 css_from_pkg_stream 来从一个包中加载文件。
这些函数的强制通用参数包括
使用 __name__ 在包内识别文件名。
路径是 __name__ 所属的包内路径。
可选参数包括
merge 定义资源是否允许与其他类似资源合并。默认为 True。
通过 prio 您可以定义资源在资源管理器中的顺序。数字较小的资源先加载。默认为 1。
name 是一个可选的名称,资源可以以此名称聚集在一起。具有相同名称的资源可以一起检索。默认值为 ""。在示例中,前两个 CSS 资源将一起检索,因为它们都有相同的空名称。
processors 定义一个可选的处理器函数列表,这些函数接受资源内容作为输入并输出另一个(例如压缩)版本。
auto_reload 定义资源是否可以重新加载。请注意,必须在资源和资源管理器中设置此选项。
CSS 特定参数
media 定义用于此样式的表的媒体类型,例如 print 或 screen。它可以是字符串或字符串列表。默认值是 ['screen', 'projection']。
JS 特定参数
minimize_method 是 "jsmin" 或 None,如果第一个提供,则 JavaScript 代码也将被压缩,这意味着删除空白和缩短变量。
实例化资源类
如果您有一个字符串,您也可以直接实例化 CSSResource 或 JSResource 类
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 可以是 True 或 False,它定义了资源是否被合并到集群中。
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 Ok。 headers 是一个 (key, value) 元组的列表。
变更历史
0.6 - (未发布)
修复命名错误:如果资源具有不同的名称和不同的优先级,它们只按优先级排序。这导致合并错误,因为在尝试合并时名称不断变化。现在它们首先按名称排序,然后按优先级排序。
0.5 - (2010/04/06)
初始发布
下载
量子核心资源-0.5.4.tar.gz 的哈希值
算法 | 哈希摘要 | |
---|---|---|
SHA256 | 288d6260fe3446e8e03e1e3a1a7209c91051b0571cf9c41d8c60cded9ef01ca0 |
|
MD5 | b9362e6b72e9f26cde4c88c4feb4f7b6 |
|
BLAKE2b-256 | c6bd3f1eef09059118dca4e397ac24d96d84c855756873e6baf9e31bca76e018 |