twigを使ってすぐに使える共有要素を作成する

私は共有要素がたくさんあるプロジェクトに取り組んでいます。フッター、ヘッダー、ナビゲーションなどが含まれます。今のところ、私はビュー内の共有要素をロードしていますが、私はそれをロードするビューの中に各共有要素に必要なすべてのアセット（依存関係）を提供する必要があります。私はそのステップをスキップし、使用のために実際に準備される要素を読み込むことができるようにしたいと思います（従属するjavascriptとcssファイルを覚えておく必要はありません。。twigを使ってすぐに使える共有要素を作成する

要素のビュー内で共有要素に必要なすべてのアセットを指定することを考えていました。必要な要素を含めると、アセットが自動的にロードされます。だから私の質問は、これを行うことが可能か、これを達成するための正しい方法ですか？

が、それはコードを使用してさらに良く説明することを願っています：

構造：

views/ 
- /layout/ 
    -> layout.twig 
- /homepage/ 
    -> index.twig 
- /shared/ 
    -> navigation.twig

レイアウト：

<!-- HTML headers, etc. --> 
{% block assets %} 
    <link rel="stylesheet" href="xxx" /> 
{% endblock %} 

{% block content %} 

{% endblock %}

ビュー：

{% extends "layout/layout.twig" %} 
{% block assets %} 
    {{ parent() }} 
    <!-- some assets for view -->  
{% endblock %} 
{% block content %} 
    {% include "shared/navigation.twig" %} 
    <!-- content --> 
{% endblock %}

共有要素navigation.twig ：

// It's not working, of course - just for better explanation of what I'm trying to approach 
{% block assets %} 
    {{ parent() }} 
    <!-- assets needed for shared element --> 
{% endblock %} 
<!-- rest of shared element -->

通常、大規模なプロジェクトでは、いくつかの共有要素に多くのものが含まれている可能性があるため、ビュー内のすべてのアセットを読み込まないと思います。また、<body>の中にスタイルをレンダリングしたくないので、ビュー内に<links>を作成することは私のための方法ではありません。これは共有要素のように機能し、共有要素ごとに必要なアセットを知らなくても、アセットのロード先とロードされるアセットを制御できます。前もって感謝します。 documentation on useから

出典

2017-11-22 Dawid Zbiński

こんにちは、スタイルシートとjavascriptsブロックを別々に使用しようとしましたか？ –

あなたはそれが何を意味するのか分かりません。私はそれらを分けて、共有要素に関しては、スクリプトは主にその共有要素のビューの最後にあります（これはうまくありますが、私はむしろそれらをボディの最後に置いています）。スタイルシートはビューから読み込まれます（自分の考えを書いて頭の中に入れたいと思っているので、私にとっては問題のようなものです） –

ベストプラクティスはsymfonyのドキュメントで説明されています：https://symfony.com/doc /3.4/templating.html#including-stylesheets-and-javascripts-in-twig –

：

水平再利用は...主に継承を使用せずに、テンプレートブロックが再利用可能にする必要があるプロジェクトで使用されています。

useは、現在のファイルに外部ファイルを組み込み、ブロックの名前をローカルで一意の値に変更できます。これらのローカルに固有の値は、blockを使用して継承階層に注入することができます。

例。ベース「親」で開始：今すぐ

{% block assets %} 
    <link rel='stylesheet' href='menu.css' /> 
{% endblock %} 
{% block content %} 
    <div id='menu' class='content'></div> 
{% endblock %}

を、一緒にそれらの2をもたらす：

<head> 
    {% block assets %} 
    <link rel='stylesheet' href='layout.css' /> 
    {% endblock %} 
</head> 
<body> 
    <div id='layout' class='content'> 
    {% block content %} 
    {% endblock %} 
    </div> 
</body>

メニュー、「コンポーネント」私たちは、後に「再利用」されますを定義します。我々はextendsがベースを-ingているが、その後useコンポーネントを-ingとblockとそのブロックを再利用する方法に注目してください：

{% extends "layout.twig" %} 

{% use "menu.twig" with assets as menu_assets, content as menu_content %} 

{% block assets %} 
    {{ parent() }} 
    <link rel='stylesheet' href='view.css' /> 
    {{ block('menu_assets') }} 
{% endblock %} 

{% block content %} 
    <div class='menu'> 
    {{ block('menu_content') }} 
    </div> 
    <div id='view' class='content'></div> 
{% endblock %}

収量：

<head> 
    <link rel='stylesheet' href='layout.css' /> 
    <link rel='stylesheet' href='view.css' /> 
    <link rel='stylesheet' href='menu.css' /> 
</head> 
<body> 
    <div id='layout' class='content'> 
    <div class='menu'> 
     <div id='menu' class='content'> 
     </div> 
    </div> 
    <div id='view' class='content'></div> 
    </div> 
</body>

それが持つ「定義ブロックのかなりの魔法ではありません同じ名前とそれらはすべて結合されます」しかし、それはかなり近いです。あなたのレイアウトはメニューを知らず、メニューはレイアウトについて知らないが、どちらも "資産"と "コンテンツ"という名前のブロックで同意する。その後、それらのビューを一緒に正しい継承形式にステッチします。

出典

2017-11-29 19:33:47 bishop

偉大な人、ありがとう。私はおそらくドキュメントを読んでいる間盲目でした。 –

twigを使ってすぐに使える共有要素を作成する

答えて

関連する問題