转载作者：行者123 更新时间：2023-11-28 00:11:19

29

4

如何使用 loadCSS ( https://github.com/filamentgroup/loadCSS ) 加载我的样式表？

目前，我正在将 loadCSS 的 javascript 与类似的模板标记包含在我的脑海中。我只是用 noscript 标签包围我的默认 css 作为后备(如文档中所述)。

<head>        
    ...
    <noscript>
        {% stylesheet "main" %}
    </noscript>

    ...
    <script>
        {% include "components/loadCSS.js" %}
    </script>
    ...
</head>

但是我怎样才能生成那样的输出呢？

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

我能否以某种方式获取模板中的链接(在 href 内)？

最佳答案

找到解决方案:

自定义模板标签

from django import template
from pipeline.templatetags.pipeline import StylesheetNode
from pipeline.utils import guess_type
from django.utils.safestring import mark_safe
from django.contrib.staticfiles.storage import staticfiles_storage
from django.template.loader import render_to_string
register = template.Library()

class MyStylesheetNode(StylesheetNode):

    def render_css(self, package, path):
        template_name = "pipeline/loadcss.html"
        context = package.extra_context
        context.update({
            'type': guess_type(path, 'text/css'),
            'url': mark_safe(staticfiles_storage.url(path))
        })
        return render_to_string(template_name, context)

@register.tag
def mytest(parser, token):
    try:
        tag_name, name = token.split_contents()
    except ValueError:
        raise template.TemplateSyntaxError(
            '%r requires exactly one argument: the name of a group in the PIPELINE.JAVASVRIPT setting' %
            token.split_contents()[0])
    return MyStylesheetNode(name)

/pipeline/loadcss.html

<link rel="preload" href="{{ url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

关于css - 如何异步加载样式表(使用 loadCSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55383055/

29

4

0

首页

博学

6Ren·AI

商城

css - 如何异步加载样式表(使用 loadCSS)

自定义模板标签

/pipeline/loadcss.html