web-dev-qa-db-ger.com

Wie füge ich die CSS-Datei in Symfony 2 und Twig ein?

Ich spiele mit Symfony2 herum und habe Probleme mit CSS und JS - Dateien in der Twig - Vorlage.

Ich habe ein Paket namens Webs/HomeBundle, in dem ich HomeController mit indexAction habe, das eine Zweigvorlagendatei darstellt:

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

Das ist also einfach. Nun möchte ich einige CSS- und JS-Dateien in diese Twig-Vorlage aufnehmen. Vorlage sieht so aus:

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

Die Datei, die ich enthalten möchte, main.css-Datei befindet sich in: 

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

Meine Frage ist also im Grunde, wie zur Hölle ich einfache CSS-Dateien in die Twig-Vorlage einbinden kann.

Ich verwende die Twig asset()-Funktion und trifft nicht den richtigen CSS-Pfad. Ich führe diesen Befehl auch in der Konsole aus: 

app/console assets:install web

Dadurch wurde ein neuer Ordner erstellt

/web/bundles/webshome/...

das ist nur ein Link zu dem

src/Webs/HomeController/Resources/public/

recht?

Fragen

  1. Wo platzieren Sie Ihre asset -Dateien, JS, CSS und Bilder? Ist es in Ordnung, sie im Bundle/Resources/public-Ordner abzulegen? Ist das der richtige Ort für sie?
  2. Wie binden Sie diese asset -Dateien mithilfe der Asset-Funktion in Ihre Twig-Vorlage ein? Wenn sie sich in einem öffentlichen Ordner befinden, wie kann ich sie hinzufügen?
  3. Soll ich noch etwas konfigurieren?
60
Limeni

Sie machen alles richtig, außer dass Sie Ihren Bündelpfad an asset() function übergeben.

Nach Dokumentation - sollte dies in Ihrem Beispiel so aussehen:

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

Tipp: Sie können Assets auch aufrufen: Installieren Sie sie mit dem Code --symlink, sodass Symlinks im Webordner erstellt werden. Dies ist äußerst nützlich, wenn Sie häufig js oder css Änderungen anwenden (auf diese Weise werden Änderungen, die auf src/YouBundle/Resources/public angewendet werden, sofort im web-Ordner angezeigt, ohne dass assets:install erneut aufgerufen werden muss):

app/console assets:install web --symlink

Wenn Sie einige Elemente in Ihrer untergeordneten Vorlage hinzufügen möchten, können Sie auch die parent()-Methode für den Twig-Block aufrufen. In Ihrem Fall wäre das so:

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

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

Und Sie können den Tag% stylesheets% (Assetic Feature) verwenden:

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

Sie können den Pfad als Parameter (% parameter_name%) in css schreiben.

Mehr zu dieser Variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

11
ZhukV

Die anderen Antworten sind gültig, aber der Leitfaden Official Symfony Best Practices schlägt vor, den Ordner web/ zu verwenden, um alle Assets anstelle von verschiedenen Paketen zu speichern.

Die Verteilung Ihrer Web-Assets auf mehrere Dutzend verschiedene Bundles macht es schwieriger zu handhaben. Das Leben Ihrer Designer wird viel sein einfacher, wenn sich alle Anwendungsressourcen an einem Ort befinden.

Vorlagen profitieren auch von der Zentralisierung Ihrer Assets, da die Links sind viel prägnanter [...]

Ich füge hinzu, indem Sie vorschlagen, dass Sie nur Mikro-Assets in Mikrobündeln einfügen, z. B. einige Stilzeilen, die nur für eine Schaltfläche in einem Schaltflächenbündel erforderlich sind.

3
aalaap

Falls Sie Silex verwenden, fügen Sie das Symfony Asset als Abhängigkeit hinzu:

composer require symfony/asset

Dann können Sie sich registrieren 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'
            )
        ),
    ),
));

Dann in Ihrer Twig -Vorlagendatei im Kopfbereich:

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

</body>
</html>
0
Trix