我的 Web 应用具有不同的几种实体类型,每种实体类型都有不同的模板。
我想将 CSS 注入 HTML <body>
,具体取决于我正在查看的页面或实体类型。
最好的方法是什么?
您可以使用 Jinja 中的 Python 函数从数据存储或项目目录中读取 CSS。
您必须在您的环境中为 Jinja 注册此 Python 函数:
env.filters['readcss'] = readcss
要从项目中读取数据,您可以使用:
def readcss(css_file_name):
path = os.path.join(os.path.dirname(__file__), 'inlinecss', css_file_name)
return file(path, 'rb').read())
@voscausa的回答非常干净明了。如果您的设置允许,请使用他的答案!
另一种快速想到的方式:
实体类示例:
class Test(ndb.Expando):
pass
您可以轻松获取实体名称,例如:
test = Test()
class_name = test.__class__.__name__
在提供/使用实体的处理程序上,Test
可能通过模板化您的类名在 HEADER 注入
<link rel="stylesheet" type="text/css" href="/assets/css/{{ class_name }}.css" />
浏览器可能会忽略 HTML 正文中定义的 CSS。 传统上,CSS 属于 HTML head 元素。
除此之外,如果只是在几种静态样式之间进行选择,请利用浏览器和代理服务器中的CSS文档缓存。 仅更改HTML中的样式表名称,但是您的jinja是这样说的:
<link rel="stylesheet" href="style1.css" />
如果是样式表中不同的细节问题,则不会发生缓存,并且外部样式表引用将导致额外的浏览器请求。 在 HTML 中内联 CSS 会更好,如下所示:
<style>
div.style1 { display:none; }
</style>
第三种方法是在页面加载后使用 JavaScript 更改 CSS 属性。 这需要更多的程序员努力,并且可能会延迟所需样式的外观,但有可能更加动态和交互。 jQuery UI经常这样做。
如果你真的想将CSS内联到HTML正文中,你可以简单地将其包含在模板中,如下所示:
<style>
{% include 'local/path/to/my/stylesheet.css' %}
</style>
如果您想在<head>
HTML元素(它所属的位置)中内联或链接CSS,并且具有某种模板层次结构,则可以进行如下操作:
基本模板:
<!doctype html>
<html>
<head>
...
<style>
{% block style %}{% endblock %}
</style>
{% block stylesheet %}{% endblock %}
</head>
<body>
...
</body>
实体模板:
{% extends 'path/to/base/template.html' %}
{# inline CSS #}
{% block style %}
body {
background-color: green;
}
{% endblock %}
{# external CSS #}
{% block stylesheet %}
<link href="/public/path/to/my/stylesheet.css" rel="stylesheet">
{% endblock %}
...
但是,如果实体类型仅影响该模板中的 HTML,则还可以将实体名称用作 CSS 类,并在一个样式表中使用该类执行其余操作以区分大小写。