3

テンプレート継承システムを使用して、ページに挿入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ブロック テンプレートの 1 つにカスタム css/js が必要な場所で使用する必要がある場合、問題が発生します。この場合、カスタム リソースはブロックと共に挿入されますが、base.htmlの指定された場所には挿入されません。

たとえば、上記の例extra_jsのpage.htmlが代わりにブロック テンプレートに追加されている場合、ブロックと共に挿入されているが、コア JSの後に意図したとおりではないため、存在しないselect2と不平を言うでしょう。ライブラリ。jquery

2 回ロードjqueryすると、他の問題が発生します: https://stackoverflow.com/a/25782679/2146346

他のオプションは、すべてのブロックの依存関係をページにロードすることですが、すべてのブロックがページでstreamfield使用されるとは限らないため、冗長なリソースでページがいっぱいになります。

他のオプションはありますか？

4

2 に答える 2

0

私はまだこれを行うのが好きな方法を思い付いていません。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'

これがあなたにいくつかのアイデアを与えてくれることを願っています. 幸運を。

于 2018-03-06T20:48:52.020 に答える