Symfony AsseticBundle kullanarak twig içinde varlıkları yönetmek

17/04/2017 - SYMFONY, TWIG

Bu örnekte symfony AsseticBundle kullanarak twig içinde css, js ve resimler gibi varlıkları yöneteceğiz. Daha fazla bilgi için How to Use Assetic for Asset Management sayfasını ziyaret edin.


Yükleme


Terminalde composer require symfony/assetic-bundle komutunu çalıştırın, "AppKernel.php" dosyasına new Symfony\Bundle\AsseticBundle\AsseticBundle(), satırını, "config.yml" dosyasınada aşağıdaki bölümü ekleyin.


assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    bundles:        [FootballFrontendBundle]
    read_from:      "%kernel.root_dir%/../web"
    write_to:       "%kernel.root_dir%/../web"
    filters:
        cssrewrite: ~

Mevcut yapı


application
    app
        Resources
            views
                base.html.twig
    src
        Football
            FrontendBundle
                Resources
                    public
                        css
                            site.css
                        js
                            site.js
                        images
                            football.png
                    views
                        Default
                            index.html.twig
    web
        ...

base.html.twig


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        {% stylesheets '@FootballFrontendBundle/Resources/public/css/*' %}
        <link rel="stylesheet" href="{{ asset_url }}">
        {% endstylesheets %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
        {% javascripts '@FootballFrontendBundle/Resources/public/js/*' %}
        <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    </body>
</html>

index.html.twig


{% extends '::base.html.twig' %}

{% block body %}
    {% image '@FootballFrontendBundle/Resources/public/images/football.png' %}
    <img src="{{ asset_url }}" alt="Logo" />
    {% endimage %}
    <p>Home</p>
{% endblock %}

Assets yaratma


$ php bin/console assetic:dump --env=dev --no-debug

Dumping all dev assets.
Debug mode is off.

18:19:04 [dir+] /var/www/html/football/app/../web/images
18:19:04 [file+] /var/www/html/football/app/../web/images/7f83373.png
18:19:04 [dir+] /var/www/html/football/app/../web/css
18:19:04 [file+] /var/www/html/football/app/../web/css/88ab7e4.css
18:19:04 [dir+] /var/www/html/football/app/../web/js
18:19:04 [file+] /var/www/html/football/app/../web/js/0565161.js

Değişen yapı


application
    ...
    ...
    web
        css
            88ab7e4.css
        js
            0565161.js
        images
            7f83373.png

Sayfanın kontrolü


# http://192.168.99.10:8081/app_dev.php/

<link rel="stylesheet" href="/app_dev.php/css/88ab7e4_part_1_site_1.css">

<img src="/app_dev.php/images/7f83373_football_1.png" alt="Logo" />

<script src="/app_dev.php/js/0565161_part_1_site_1.js"></script>