2

スタイルシートとJavaScriptを扱うのに苦労しています。

アセット+小枝のすべての例は、必要なファイルのすべてのパスを事前に知っていることを前提としています。

「About」ページを作成したいとします。

'about.html.twig'テンプレートは'layout.html.twig'から拡張されています。

レイアウトには、サイト全体で使用される.cssと.jsがいくつか含まれている必要があります。

aboutテンプレートは、それに固有の他の.cssおよび.jsファイルをロードする必要があります。

したがって、スタイルシートブロックは次のようになります。

{% block stylesheets %}
{{ parent() }}
<link href='bla'> {# more stylesheets #}
{% endblock %}

では、この場合、どのようにアセットを使用しますか？

それでもパフォーマンスが向上するので、最初からサイトのすべてのアセットを送信することになっていますか？

問題は、.css間で競合が発生する可能性があることです。場合によっては、独自の基本設定を上書きするためだけに.cssをロードするため、サイト全体に対して単一の.cssを作成することはできません。

また、すべてのパスを格納し、ループして、パスをアセットに渡すように配列を設定してみました。しかし、構文css []='another_path.css'はtwigでサポートされていないようです。アレイ全体を1つの割り当てに設定する必要があります

4

1 に答える 1

2

はい、あなたは正しいです。アセットTwig拡張機能の構文は、含めたいすべてのアセットを知っていることを期待しています。ただし、これは仕様によるものです。本番環境では、結合および縮小されたCSS / JSをダンプして、PHPを使用せずにWebサーバーで処理できるようにすることを目的としているためです。

あなたへの私の最善の提案は、あなたがあなたのサイトのすべてのページに含めて喜んでいるすべてのあなたのスタイルシートを特定し、それらのための有益なスタイルシートの呼び出しをすることです。

次に、追加のスタイルシートが必要な特定のページについて、必要に応じて2回目の資産呼び出しを行うことができます。

layout.html.twig

// do common styles
{% stylesheets 'css/reset.css'
               'css/960.css'
               'css/foobar.css'
               filter='yui_css' %}
    <link rel="stylesheet" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}

// use an empty block for extra styles
{% block extra_styles %}{% endblock %}

someview.html.twig

{% block extra_styles %}
    {% stylesheets 'css/about1.css'
                   'css/about2.css'
                   filter='yui_css' %}
        <link rel="stylesheet" media="screen" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

もう1つの解決策は、おそらくもっと簡単ですが、CSSをリファクタリングするだけで、すべてのスタイルを一度にダウンロードできるようになります。

于 2011-07-01T11:57:55.357 に答える