67

私はSymfony2をいじっていますが、 TwigテンプレートにCSSおよびJSファイルを含める際に問題があります。

という名前のバンドルがWebs/HomeBundleあり、小枝テンプレート ファイルをレンダリングしますHomeController。indexAction

public function indexAction()
{
    return $this->render("WebsHomeBundle:Home:index.html.twig");
}

これは簡単です。ここでやりたいことは、この Twig テンプレート内にいくつかの CSS および JS ファイルを含めることです。テンプレートは次のようになります。

<!DOCTYPE html>
<html>
<head>  
    {% block stylesheets %}
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}
</head>
<body>
</body>
</html>

含めたいmain.cssファイルは、次の場所にあります。

Webs/HomeController/Resources/public/css/main.css

だから私の質問は基本的に、Twigテンプレート内に単純なCSSファイルをどのように含めるのですか?

Twigasset()関数を使用していますが、正しい CSS パスにヒットしません。また、コンソールで次のコマンドを実行します。

app/console assets:install web

これにより、新しいフォルダーが作成されました

/web/bundles/webshome/...

これは単にリンクしています

src/Webs/HomeController/Resources/public/

右？

質問

  1. アセットファイル、JS、CSS、および画像をどこに配置しますか? Bundle/Resources/publicフォルダに入れて大丈夫ですか？それは彼らにとって正しい場所ですか？
  2. アセット関数を使用して、これらのアセットファイルを Twig テンプレートにどのように含めますか? それらがパブリック フォルダーにある場合、どうすればそれらを含めることができますか?
  3. 他の何かを構成する必要がありますか?
4

4 に答える 4

79

asset()バンドルパスを関数に渡すことを除いて、すべて正しく行っています。

ドキュメントによると-あなたの例では、これは次のようになります。

{{ asset('bundles/webshome/css/main.css') }}

ヒント: assets:install をキーで呼び出すこともできる--symlinkため、web フォルダーにシンボリック リンクが作成されます。jsこれは、頻繁に適用またはcss変更する場合に非常に便利です(このようにして、適用された変更は、再度呼び出す必要なくsrc/YouBundle/Resources/public、すぐにwebフォルダーに反映されます)。assets:install

app/console assets:install web --symlink

また、子テンプレートにいくつかのアセットを追加したい場合parent()は、Twig ブロックのメソッドを呼び出すことができます。あなたの場合、次のようになります。

{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
于 2012-08-28T19:10:01.290 に答える
12

%stylesheets% (assetic feature) タグを使用できます:

{% stylesheets
    "@MainBundle/Resources/public/colorbox/colorbox.css"
    "%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}

css へのパスをパラメーター (%parameter_name%) として記述できます。

このバリアントの詳細: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

于 2013-05-31T10:08:44.907 に答える
4

他の回答は有効ですが、公式の Symfony ベスト プラクティスガイドではweb/、異なるバンドルではなく、フォルダーを使用してすべてのアセットを保存することを提案しています。

Web アセットを数十の異なるバンドルに分散させると、それらの管理がより困難になります。すべてのアプリケーション資産が 1 つの場所にあれば、設計者の作業ははるかに楽になります。

リンクがはるかに簡潔であるため、テンプレートはアセットを一元化することでもメリットがあります[...]

これに加えて、たとえば、ボタン バンドル内のボタンにのみ必要な数行のスタイルなど、マイクロ アセットのみをマイクロ バンドル内に配置することを提案します。

于 2016-05-27T07:35:23.870 に答える