Wie kann ich CSS-Dateien in Symfony 2 und Twig einbinden?

Ich bin Herumspielen mit Symfony2und ich habe Probleme, einschließlich CSS und JS Dateien in Zweig Vorlage.

Habe ich ein bundle mit dem Namen Webs/HomeBundle im inneren, die ich HomeController mit indexAction macht, dass ein twig-template-Datei:

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

So ist dies ganz einfach. Nun, was ich tun möchte, ist, einige CSS-und JS-Dateien in diesem Zweig Vorlage. Die Vorlage sieht wie folgt 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 einschließen möchten, main.css Datei befindet sich in:

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

Also meine Frage ist im Grunde, wie zur Hölle füge ich einfach die CSS-Datei im Twig-template?

Ich bin mit Zweig asset() Funktion und es funktioniert einfach nicht auf die richtige CSS-Pfad. Auch ich führe diesen Befehl in der Konsole:

app/console assets:install web

Diese erstellt einen neuen Ordner

/web/bundles/webshome/...

dies ist nur die Verknüpfung zu der

src/Webs/HomeController/Resources/public/

Recht?

Fragen

Wo stellen Sie Ihre asset - Dateien, JS -, CSS-und Bilder? Ist es OK, um Sie in Bundle/Resources/public Ordner? Ist das der richtige Ort für Sie?
Wie Sie diese asset Dateien in Ihrem Twig-template mit asset-Funktion? Wenn Sie öffentliche Ordner, wie kann ich Ihnen?
Sollte ich bei der Konfiguration etwas anderes?

InformationsquelleAutor der Frage Limeni | 2012-08-28

symfony twig

75

Du machst alles richtig, außer, indem Sie Ihre Bündel Weg, um asset() Funktion.

Laut Dokumentation - in deinem Beispiel diese sollte wie folgt Aussehen:
```
{{ asset('bundles/webshome/css/main.css') }}
```
Tipp: Sie können auch call-Ressourcen:installieren mit --symlink Schlüssel, so wird es erstellt symlinks in web-Ordner. Dies ist äußerst nützlich, wenn Sie oft anwenden js oder css änderungen (auf diese Weise werden Ihre änderungen angewendet src/YouBundle/Resources/public werden sofort in web Ordner ohne anrufen müssen assets:install wieder):
```
app/console assets:install web --symlink
```
Auch, wenn Sie möchten, hinzufügen einige assets, die in Ihrer Kind-Vorlage, die Sie nennen könnte parent() Methode für die Zweig-block. In deinem Fall wäre es so:
```
{% block stylesheets %}
    {{ parent() }}

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

Und können Sie %stylesheets% (assetic-Funktion) tag:
```
{% 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 %}
```
Schreiben Sie den Pfad zu css als parameter (%parameter_name%).

Mehr über diese Variante: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

InformationsquelleAutor der Antwort ZhukV
3

Die anderen Antworten sind gültig, aber die Offizielle Symfony Best Practices guide schlägt mit der web/ Ordner zu speichern, alle Vermögenswerte, anstatt verschiedene bundles.

Streuung Ihre web-Anlagen über zig verschiedene bundles macht es
mehr schwierig zu verwalten. Ihre Designer' Leben wird viel
einfacher, wenn alle Vermögenswerte Anwendung in einem Standort.

Vorlagen auch nutzen aus der Zentralisierung Ihrer Vermögenswerte, weil die
links sind viel präziser[...]

Ich würde hinzufügen, indem Sie darauf hindeutet, dass Sie nur Mikro-Objekten im Mikro-Bündel, wie ein paar Zeilen von Formatvorlagen, die nur für einen button in einer button-bundle, zum Beispiel.

InformationsquelleAutor der Antwort aalaap

Falls Sie mit Silex fügen Sie die Symfony Asset als Abhängigkeit:

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 Ihre Zweig template-Datei im head-Bereich:

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

</body>
</html>

InformationsquelleAutor der Antwort Trix

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.