django-templates - 将 wagtail streamfield block 依赖项插入模板的正确方法是什么？-6ren

django-templates - 将 wagtail streamfield block 依赖项插入模板的正确方法是什么？

转载作者：行者123 更新时间：2023-12-05 06:36:25

31

4

我依靠模板继承系统将 extra_css 和/或 extra_js 插入我的页面:

base.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Core CSS -->

        {% block extra_css %}
            {# Override this in templates to add extra stylesheets #}
        {% endblock %}

    </head>
    <body>

        {% block content %}{% endblock content %}

        <!-- Core JS -->

        {% block extra_js %}
            {# Override this in templates to add extra javascript #}
        {% endblock extra_js %}

    </body>
</html>

page.html:

{% extends "base.html" %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
{% endblock %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block content %}
<div class="blog-post">

  <!-- Custom HTML -->

  {% block content %}
  {% include_block page.body %}
  {% endblock %}

</div><!-- /.blog-post -->
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">

// Custom JavaScript

</script>
{% endblock extra_js %}

这很好用，因此额外的 css/js 确实插入了它所属的位置。

如果我需要使用 streamfield，其中一个 block 模板需要自定义 css/js，就会出现问题。在这种情况下，自定义资源随 block 一起插入，但不在 base.html 中的指定位置。

例如，如果将上例中 page.html 中的 extra_js 添加到 block 模板中，则 select2 会报错关于 jquery 不存在，这是完全正确的，因为它是与 block 一起插入的，但不是按预期在 Core JS 库之后。

加载 jquery 两次会导致其他问题:https://stackoverflow.com/a/25782679/2146346

其他选项是将所有 block 依赖项加载到页面中，但它会用冗余资源填充页面，因为并非 streamfield 中的每个 block 都可能在页面上使用。

还有其他选择吗？

最佳答案

更新:这里有一个更好的方法，它使用 JavaScript 只加载一次库:https://github.com/FlipperPA/wagtailcodeblock/blob/main/wagtailcodeblock/templates/wagtailcodeblock/code_block.html#L6

我还没有想出我喜欢的方式来做这件事。在 Wagtail 编辑器端执行此操作的工具非常好。但是，这是我为 WagtailCodeBlock 所做的:

{% load static wagtailcodeblock_tags %}
{% spaceless %}
    {# This is ugly, as it'll inject this code for each block, but browsers are smart enough to not load each time. #}
    <script src="{% static 'wagtailcodeblock/js/prism.min.js' %}" type='text/javascript'></script>
    <link href="{% static 'wagtailcodeblock/css/prism.min.css' %}" rel="stylesheet">
    {% load_prism_theme %}
    {% for key, val in self.items %}
        {% if key == "language" %}
            <script>
                language_class_name = 'language-{{ val }}';
            </script>
        {% endif %}
        {% if key == "code" %}
            <pre class="line-numbers">
                <code id="target-element-current">{{ val }}</code>
            </pre>
            <script>
                var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
                block_num++;
                document.getElementById('target-element-current').className = language_class_name;
                document.getElementById('target-element-current').id = 'target-element-' + block_num;
            </script>
        {% endif %}
    {% endfor %}
{% endspaceless %}

在这个例子中，我分别加载了 JS/CSS 资源，然后让浏览器解决它。它还假定 jQuery 是在父级加载的。但是，也可以使用 JavaScript 上下文来确保只加载一次，这是我的下一步。现在，它不是很漂亮，但它可以工作。

在 Wagtail 编辑器方面，有 @property media。我希望渲染端有类似的东西:

class CodeBlock(StructBlock):
    """
    Code Highlighting Block
    """

    WCB_LANGUAGES = get_language_choices()
    off_languages = ['html', 'mathml', 'svg', 'xml']


    language = ChoiceBlock(choices=WCB_LANGUAGES, help_text=_('Coding language'), label=_('Language'))
    code = TextBlock(label=_('Code'))

    @property
    def media(self):

        theme = get_theme()

        prism_version = get_prism_version()
        if theme:
            prism_theme = '-{}'.format(theme)
        else:
            prism_theme = ""

        js_list = [
            "https://cdnjs.cloudflare.com/ajax/libs/prism/{}/prism.min.js".format(
                prism_version,
            ),
        ]

        for lang_code, lang_name in self.WCB_LANGUAGES:
            # Review: https://github.com/PrismJS/prism/blob/gh-pages/prism.js#L602
            if lang_code not in self.off_languages:
                js_list.append(
                    "https://cdnjs.cloudflare.com/ajax/libs/prism/{}/components/prism-{}.min.js".format(
                        prism_version,
                        lang_code,
                    )
                )
        return Media(
            js=js_list,
            css={
                'all': [
                    "https://cdnjs.cloudflare.com/ajax/libs/prism/{}/themes/prism{}.min.css".format(
                        prism_version, prism_theme
                    ),
                ]
            }
        )

    class Meta:
        icon = 'code'
        template = 'wagtailcodeblock/code_block.html'
        form_classname = 'code-block struct-block'
        form_template = 'wagtailcodeblock/code_block_form.html'

我希望这能给你一些想法，如果你想出更好的方法，我会洗耳恭听。祝你好运。

关于django-templates - 将 wagtail streamfield block 依赖项插入模板的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49110833/

31

4

0

文章推荐： javascript - 如何使用 blueprintjs/table 渲染表格

文章推荐： xamarin.forms - 条目渲染不在 iOS Xamarin Forms 中添加下划线

文章推荐： angular - 基于 Angular 5 的掩码电话输入字段

文章推荐： angular5 - ngxs、redux 开发工具显示以前的状态

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城

django-templates - 将 wagtail streamfield block 依赖项插入模板的正确方法是什么？