Nadpisywanie szablonów bundli

W Symfony 4 szablony aplikacji przechowujemy w katalogu templates/ (w katalogu głównym projektu). Nadpisywanie szablonów odbywa się poprzez skopiowanie struktury katalogów i podkatalogów (zasobów / widoków) danego bundla do nowej lokalizacji, czyli do katalogu templates/:

/ templates / bundles / <nazwa-pakietu> / <widok> / ...

1	/ templates / bundles / <nazwa-pakietu> / <widok> / ...

Dla przykładu nadpiszemy formularz logowania z pakietu FOSUserBUndle. Jak widać z rysunku poniżej, jest on dość ubogi, dlatego wzbogacimy go o style zaczerpnięte z Bootstrapa. Efekt jaki uzyskamy jest widoczny w topie posta.

form login fosuserbundle

Oryginalna lokalizacja:
/vendor/friendsofsymfony/user-bundle/Resources/views/Security/login_content.html.twig

Nowa lokalizacja (nadpisanie):
/templates/bundles/FOSUserBundle/Security/login_content.html.twig

Zawartość zmienionego pliku:

<!-- login_content.html.twig --> 
 
{% trans_default_domain 'FOSUserBundle' %} 
 
<div class="container col-md-4 col-sm-12"> 
    <form action="{{ path("fos_user_security_check") }}" method="post"> 
       {% if csrf_token %} 
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" /> 
        {% endif %} 
        <div class="form-group"> 
            <label for="username">{{ 'Username'|trans }}</label> 
            <input type="text" id="username" class="form-control" name="_username" value="{{ last_username }}" required="required" autocomplete="username" /> 
        </div> 
        <div class="form-group"> 
            <label for="password">{{ 'Password'|trans }}</label> 
            <input type="password" id="password" class="form-control" name="_password" required="required" autocomplete="current-password" /> 
        </div> 
        <div class="form-group"> 
            <input type="checkbox" id="remember_me" name="_remember_me" value="on" /> 
            <label for="remember_me">{{ 'Remember me'|trans }}</label> 
        </div>
        <input type="submit" id="_submit" class="btn btn-secondary btn-lg btn-block" name="_submit" value="{{ 'Sign in'|trans }}" /> 
    </form> 
    {% if error %} 
    <div class="alert alert-danger" role="alert"> 
    {{ error.messageKey|trans(error.messageData, 'security') }} 
    </div> 
    {% endif %} 
</div>

{% trans_default_domain 'FOSUserBundle' %}

{% if csrf_token %}

{% endif %}

<label for="username">{{ 'Username'|trans }}</label>

</div>

<label for="password">{{ 'Password'|trans }}</label>

</div>

<label for="remember_me">{{ 'Remember me'|trans }}</label>

</div>

</form>

{% if error %}

</div>

{% endif %}

</div>

Musimy nadpisać jeszcze jeden plik: layout.html.twig, aby importować do niego bibliotekę Bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

1	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

Skopiuj oryginalny plik do nowej lokalizacji i zmień jego zawartość jak poniżej:
/templates/bundles/FOSUserBundle/layout.html.twig

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
          <meta name="viewport" content="width=device-width, initial-scale=1" /> 
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> 
          <style type="text/css"> 
             body { background:#efefef; padding:15px; } 
             .container { background:#fff; padding:30px; margin-top:5%; } 
          </style> 
    </head> 
    <body> 
        {% if app.request.hasPreviousSession %} 
            {% for type, messages in app.session.flashbag.all() %} 
                {% for message in messages %} 
                    <div class="flash-{{ type }}"> 
                        {{ message }} 
                    </div> 
                {% endfor %} 
            {% endfor %} 
        {% endif %} 
        <div> 
            {% block fos_user_content %} 
            {% endblock fos_user_content %} 
        </div> 
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

body { background:#efefef; padding:15px; }

.container { background:#fff; padding:30px; margin-top:5%; }

</style>

</head>

<body>

{% if app.request.hasPreviousSession %}

{% for type, messages in app.session.flashbag.all() %}

{% for message in messages %}

</div>

{% endfor %}

{% endif %}

<div>

{% block fos_user_content %}

{% endblock fos_user_content %}

</div>

</body>

</html>

Po odpaleniu w przeglądarce adresu: localhost:8000/public/index.php/login
powinieneś otrzymać taki oto efekt 🙂

#FOSUserBundle #symfony 4 #widoki

Nadpisywanie szablonów bundli

KOMENTARZE