Symfony3.4.4+Sonata Admin+FOSUserBundle登录页面美化咨询

哈哈，这个问题我之前帮好几个开发者搞定过！其实原因特别直白：FOSUserBundle自带的登录模板并没有继承Sonata Admin的基础布局，所以它没法自动用上Sonata那套美观的Bootstrap样式。别担心，咱们几步就能把登录页改成和后台统一的风格：

步骤1：创建自定义登录模板，覆盖FOSUser的默认模板 #

在你的项目里新建（如果不存在的话）路径 app/Resources/FOSUserBundle/views/Security/login.html.twig，然后把下面的代码粘进去：

{% extends '@SonataAdmin/standard_layout.html.twig' %}

{% block title %}{{ 'security.login.title'|trans }} - {{ parent() }}{% endblock %}

{% block sonata_nav %}
{% endblock %}

{% block sonata_sidebar %}
{% endblock %}

{% block sonata_breadcrumb %}
{% endblock %}

{% block body_attributes %}class="sonata-bc login-page"{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'security.login.title'|trans }}</h3>
                </div>
                <div class="box-body">
                    {% if error %}
                        <div class="alert alert-danger">
                            {{ error.messageKey|trans(error.messageData, 'security') }}
                        </div>
                    {% endif %}

                    <form action="{{ path('fos_user_security_check') }}" method="post">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                        <div class="form-group has-feedback">
                            <label for="username">{{ 'security.login.username'|trans }}</label>
                            <input type="text" class="form-control" id="username" name="_username" value="{{ last_username }}" required="required" />
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        </div>

                        <div class="form-group has-feedback">
                            <label for="password">{{ 'security.login.password'|trans }}</label>
                            <input type="password" class="form-control" id="password" name="_password" required="required" />
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>

                        <div class="row">
                            <div class="col-xs-8">
                                <div class="checkbox icheck">
                                    <label>
                                        <input type="checkbox" id="remember_me" name="_remember_me" value="on" /> {{ 'security.login.remember_me'|trans }}
                                    </label>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <button type="submit" id="_submit" name="_submit" class="btn btn-primary btn-block btn-flat">{{ 'security.login.submit'|trans }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

代码说明： #

• 直接继承Sonata Admin的标准布局模板，自动加载Sonata的CSS和JS资源
• 清空sonata_nav、sonata_sidebar、sonata_breadcrumb区块，避免登录页显示后台导航和侧边栏
• 用Sonata的box组件包裹登录表单，匹配后台的卡片式设计
• 表单元素使用Bootstrap的form-control、has-feedback等类，和后台表单样式完全统一

步骤2：确保Symfony优先加载自定义模板 #

因为我们把模板放在了app/Resources/FOSUserBundle/views目录下，Symfony会自动优先加载这个自定义模板，覆盖FOSUserBundle自带的默认模板，无需额外修改配置（只要你的config.yml里FOSUser的templating.theme配置正常即可）。

步骤3：清理缓存 #

Symfony3.4的缓存机制可能会保留旧模板文件，记得运行缓存清理命令：

# 开发环境
php bin/console cache:clear --env=dev

# 生产环境
php bin/console cache:clear --env=prod

补充说明： #

为什么Sonata Admin后台有样式但登录页没有？因为Sonata Admin是后台界面组件，而FOSUserBundle是独立的用户认证组件，两者默认没有整合登录模板——Sonata Admin的样式只作用于它管辖的后台页面，FOSUser的登录页属于独立路由和模板，所以需要我们手动通过模板继承来打通样式。

改完之后刷新登录页，你会发现它已经和Sonata Admin后台的风格完全一致啦！

内容的提问来源于stack exchange，提问作者Javier