web-dev-qa-db-ja.com

Symfony 2およびTwigにCSSファイルを含める方法

Symfony2で遊んでいますが、CSSおよびJSTwigのファイルを含む問題があります=テンプレート。

Webs/HomeBundleという名前のバンドルがあり、その中にtwigテンプレートファイルをレンダリングする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ファイルをどのように含めるのですか？

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

app/console assets:install web

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

/web/bundles/webshome/...

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

src/Webs/HomeController/Resources/public/

右？

ご質問

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

バンドルパスをasset()関数に渡すことを除いて、あなたはすべて正しいことをしています。

documentation -によれば、これは次のようになります。

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

Tip：--symlinkキーを使用してasset：installを呼び出すこともできるため、Webフォルダーにシンボリックリンクが作成されます。これは、jsまたはcssの変更を頻繁に適用する場合に非常に便利です（この方法でsrc/YouBundle/Resources/publicに適用された変更はwebフォルダーにすぐに反映され、assets:installもう一度）：

app/console assets:install web --symlink

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

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

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
76
Vitalii Zurian

そして、％stylesheets％（アセティック機能）タグを使用できます：

{% 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 %}

パラメーター（％parameter_name％）としてcssへのパスを書き込むことができます。

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

12
ZhukV

他の答えは有効ですが、 Official Symfony Best Practices ガイドは、異なるバンドルではなく、web/フォルダーを使用してすべてのアセットを保存することを推奨しています。

Webアセットを数十の異なるバンドルに分散させると、それらの管理がより困難になります。すべてのアプリケーションアセットが1つの場所にあれば、デザイナーの生活はずっと楽になります。

リンクははるかに簡潔であるため、テンプレートはアセットを集中化することからも恩恵を受けます[...]

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

4
aalaap

Silexを使用している場合、依存関係としてSymfony Assetを追加します。

composer require symfony/asset

その後、登録できますAsset Service Provider：

$app->register(new Silex\Provider\AssetServiceProvider(), array(
    'assets.version' => 'v1',
    'assets.version_format' => '%s?version=%s',
    'assets.named_packages' => array(
        'css' => array(
            'version' => 'css2',
            'base_path' => __DIR__.'/../public_html/resources/css'
        ),
        'images' => array(
            'base_urls' => array(
                'https://img.example.com'
            )
        ),
    ),
));

次に、ヘッドセクションのTwigテンプレートファイルで：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block head %}
    <link rel="stylesheet" href="{{ asset('style.css') }}" />
    {% endblock %}
</head>
<body>

</body>
</html>
0
Pmpr