Comment inclure un fichier CSS dans Symfony 2 et Twig ?

Question

Comment inclure un fichier CSS dans Symfony 2 et Twig ?

Demandé el 28 de Août, 2012: Quand la question a-t-elle été
22454 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

J'ai un paquet nommé Webs/HomeBundle à l'intérieur duquel j'ai HomeController con indexAction qui rend un fichier modèle twig :

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

Alors c'est facile. Maintenant, ce que je veux faire, c'est inclure quelques 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, 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 un modèle Twig ?

J'utilise Twig asset() et il n'atteint pas le bon chemin CSS. De plus, j'exécute cette commande dans la console :

app/console assets:install web

Cela a créé un nouveau dossier

/web/bundles/webshome/...

il s'agit simplement d'un lien vers le

src/Webs/HomeController/Resources/public/

n'est-ce pas ?

Questions

Où placez-vous votre actif fichiers, JS, CSS et images ? Est-il possible de les placer dans Bundle/Resources/public dossier ? Est-ce le bon emplacement pour eux ?
Comment inclure ces actif dans votre modèle Twig en utilisant la fonction asset ? S'ils sont dans le dossier public, comment puis-je les inclure ?
Dois-je configurer autre chose ?

Demandé el 28 de Août, 2012 par Limeni

Answer 1

4 Réponses

Answer 2

76voto

Vitaliy Zurian Points 7870

Vous faites tout ce qu'il faut, sauf que vous passez votre chemin de bundle à asset() fonction.

Selon documentation - dans votre exemple, cela devrait ressembler à ce qui suit :

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

Conseil vous pouvez également appeler assets:install avec --symlink afin de créer des liens symboliques dans le dossier Web. Ceci est extrêmement utile lorsque vous appliquez souvent js o css (de cette manière, vos changements, appliqués à src/YouBundle/Resources/public sera immédiatement reflétée dans web sans avoir besoin d'appeler assets:install encore) :

app/console assets:install web --symlink

En outre, si vous souhaitez ajouter certains actifs dans votre modèle enfant, vous pourriez appeler parent() pour le bloc Twig. Dans votre cas, ce serait comme ceci :

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

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

Répondu el 28 de Août, 2012 par Vitaliy Zurian (7870 Points )

Answer 3

12voto

ZhukV Points 691

Et vous pouvez utiliser la balise %stylesheets% (fonction assise) :

{% 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 vers le css comme paramètre (%parameter_name%).

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

Répondu el 31 de Mai, 2013 par ZhukV (691 Points )

Answer 4

4voto

aalaap Points 928

Les autres réponses sont valables, mais la Meilleures pratiques officielles de Symfony suggère d'utiliser le web/ pour stocker toutes les ressources, au lieu des différents paquets.

La dispersion de vos ressources web dans des dizaines de paquets différents rend la tâche difficile. plus difficile de les gérer. La vie de vos concepteurs sera beaucoup plus si toutes les ressources de l'application se trouvent au même endroit.

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

J'ajouterais à cela que vous ne devez placer des micro-actifs qu'à l'intérieur de micro-bundles, comme quelques lignes de styles uniquement nécessaires pour un bouton dans un bundle de boutons, par exemple.

Répondu el 27 de Mai, 2016 par aalaap (928 Points )

Answer 5

0voto

Trix Points 9647

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

composer require symfony/asset

Vous pouvez alors vous inscrire Fournisseur de services d'actifs :

$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'
            )
        ),
    ),
));

Alors dans votre Brindille fichier modèle 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>

Répondu el 26 de Juin, 2016 par Trix (9647 Points )

Comment inclure un fichier CSS dans Symfony 2 et Twig ?

Questions

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment inclure un fichier CSS dans Symfony 2 et Twig ?

Questions

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: