web-dev-qa-db-fra.com

Comment inclure un fichier CSS dans Symfony 2 et Twig?

Je joue avec Symfony2, et j'ai des problèmes avec les fichiers CSS et JS dans le modèle Twig.

J'ai un paquet nommé Webs/HomeBundle à l'intérieur duquel j'ai HomeController avec indexAction qui restitue un fichier de modèle de brindille:

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

Donc c'est facile. Maintenant, ce que je veux faire, est d’inclure des fichiers CSS et JS dans ce modèle Twig. Le modèle ressemble à ceci:

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

Le fichier que je voudrais inclure, le fichier main.css se trouve dans: 

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

Ma question est donc la suivante: comment puis-je inclure un simple fichier CSS dans le modèle Twig?

J'utilise la fonction Twig asset() et elle ne frappe pas le bon chemin CSS. Aussi, j'exécute cette commande dans la console: 

app/console assets:install web

Cela a créé un nouveau dossier

/web/bundles/webshome/...

c'est juste un lien vers le

src/Webs/HomeController/Resources/public/

droite?

Des questions

  1. Où placez-vous vos fichiers asset, JS, CSS et images? Est-il possible de les mettre dans le dossier Bundle/Resources/public? Est-ce le bon endroit pour eux?
  2. Comment incluez-vous ces fichiers asset dans votre modèle Twig à l'aide de la fonction asset? S'ils sont dans un dossier public, comment puis-je les inclure?
  3. Devrais-je configurer autre chose?
symfonytwig
60
Limeni

Vous faites tout bien, sauf en passant votre chemin de paquet à la fonction asset().

Selon documentation - dans votre exemple, ceci devrait ressembler à ceci:

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

Astuce: vous pouvez également appeler des actifs: installez avec la clé --symlink pour créer des liens symboliques dans le dossier Web. Ceci est extrêmement utile lorsque vous appliquez souvent les modifications js ou css (de cette manière, vos modifications appliquées à src/YouBundle/Resources/public seront immédiatement répercutées dans le dossier web sans qu'il soit nécessaire d'appeler à nouveau assets:install):

app/console assets:install web --symlink

De même, si vous souhaitez ajouter des actifs dans votre modèle enfant, vous pouvez appeler la méthode parent() pour le bloc Twig. Dans votre cas, ce serait comme ça:

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

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

Et vous pouvez utiliser la balise% stylesheets% (fonctionnalité assetic):

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

Vous pouvez écrire le chemin d'accès à css en tant que paramètre (% nom_paramètre%).

En savoir plus sur cette variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

11
ZhukV

Les autres réponses sont valables, mais le guide Official Symfony Best Practices suggère d'utiliser le dossier web/ pour stocker tous les actifs, au lieu de différents ensembles.

La dispersion de vos ressources Web à travers des dizaines de bundles différents le rend plus difficile de les gérer. La vie de vos concepteurs sera beaucoup plus facile si tous les actifs de l’application se trouvent au même endroit.

Les modèles bénéficient également de la centralisation de vos actifs, car le fichier les liens sont beaucoup plus concis [...]

J'ajouterais à cela en vous suggérant de ne placer que des micro-actifs dans des micro-ensembles, par exemple quelques lignes de styles nécessaires uniquement pour un bouton dans un ensemble de boutons.

3
aalaap

Si vous utilisez Silex ajoutez le Symfony Asset en tant que dépendance:

composer require symfony/asset

Ensuite, vous pouvez vous inscrire 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'
            )
        ),
    ),
));

Puis dans votre fichier Twig template dans la section head:

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

</body>
</html>
0
Trix