首页 > 解决方案 > 覆盖 FOSUserBUndle 布局

问题描述

我在我的项目中安装并配置了 FOSUserBundle(我使用的是 symfony 4)。安装完成没有问题。我覆盖了 FOSUserBundle 模板,但 layout.html.twig 和 base.html.twig 没有被覆盖。

我的 layout.html.twig :

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

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                {% block fos_user_content %}{% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

我的 base.html.twig :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

使用了唯一的 FOSUserBundle。其次,symfony 调试工具栏消失了。

FOSUserBundle 在那里被覆盖:templates/bundles/FOSUserBundle

在文件夹中,我添加了所有 FOSUserBundle 子文件夹:Security Registration Profile ....

模板结构

标签: phpsymfonysymfony4

解决方案


这就是我的做法:

在此处输入图像描述

base.html.twig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>
        {% block title %}Admin panel{% endblock %}
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="noindex,nofollow"/>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"/>
</head>
<body>

<div class="container">
    {% block content %}{% endblock %}
</div>

<script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>

布局.html.twig

{% extends 'bundles/FOSUserBundle/base.html.twig' %}

{% block content %}
    {% 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>
{% endblock %}

安全/login.html.twig

{% extends "bundles/FOSUserBundle/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Sing in{% endblock %}

{% block fos_user_content %}
    <div class="jumbotron">
        <h4 class="text-center">Sign in</h4>
        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}

        <form method="post" action="{{ path("fos_user_security_check") }}">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
            <div class="form-group">
                <label for="username">Email:</label>
                <input type="email" name="_username" class="form-control" id="username" value="{{ last_username }}"
                       autocomplete="off">
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="_password" class="form-control">
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">Remember
                    me
                </label>
            </div>
            <button name="_submit" type="submit" class="btn btn-primary">{{ 'security.login.submit'|trans }}</button>
        </form>
    </div>
{% endblock fos_user_content %}

推荐阅读