Google App Engine:注入依赖于页面的 CSS



我的 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 类,并在一个样式表中使用该类执行其余操作以区分大小写。

最新更新