1

Django アプリに統合するスタンドアロンのフロントエンド モジュール (HTML、CSS、および JS) を作成しようとしています。私が言いたいことの最良の例は、「マップ」モジュールです。これは、おそらく各ページの異なる場所にある、さまざまな無関係のページに含めたいと考えています。

マップに必要な HTML コードを提供するテンプレートがあります。フロント エンドの依存関係の処理を容易にするために、このテンプレートを介して CSS および JS コードも含めたいと考えています。これまでは、{% include %}タグを使用してこれを実現できました。

しかし、HTML ページの途中にスタイルシートとスクリプトを含めることは、フロントエンドのパフォーマンスに関しては非常に悪い習慣です。(CSS は に<head>、JS は の最後に含める必要があります<body>)

{% include %}タグがそれらを含むテンプレートの一部としてレンダリングされ、タグをオーバーライドできた場合、私の問題は解決できたはず{% block %}です。Django ではそうではありません。{% include %}タグは最初に HTML にレンダリングされてから組み込まれるため、{% block %}タグをオーバーライドすることはできません。

このテーマに関する過去の質問を見回すと、共通の知恵はテンプレートの継承 (つまり{% extends %}) の代わりに使用する{% include %}ことですが、モジュールを独立させたいので、私の場合に継承を使用する方法がわかりません。

フロントエンドのパフォーマンスのベスト プラクティスを維持しながら、テンプレート内でフロントエンドの依存関係を維持するにはどうすればよいですか?

ありがとう！

4

1 に答える 1

1

最初にマップ テンプレート タグを作成するには、包含タグを使用します。

静的ファイルの問題に関しては、関連するテンプレート タグを作成して、静的ファイルの参照を現在のテンプレートにダンプします。次に、そのテンプレート タグをブロックに含めます。

ベース テンプレートが base.html にあり、ページ テンプレートが page.html にある場合:

base.html

<html>
    <head>
        {% block css %}
            <link rel="stylesheet...
        {% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
        {% block scripts %}{% endblock %}
    </body>
</html>

page.html

{% extends 'base.html' %}

{% block css %}
    {{ block.super }}
    {% map_css %}
{% endblock %}

{% block scripts %}
    {{ block.super }}
    {% map_scripts %}
{% endblock %}

{% block content %}
    content...
    {% map_html %}
    content...
{% endblock %}
于 2012-06-27T12:39:33.457 に答える