Symfony 3：FosUserBundle使用自定义html类自定义注册表

当我试图自定义我的symfony 3项目的FosUSerBundle登录表单时，因此我看了一下FosUSerBundle的默认树枝模板以创建一个想法，然后我注意到，通过供应商（vendor/friendsofsymfony/user-bundle/Resources/views/Registration/register_content.html.twig）提供的树枝模板具有以下值：Symfony 3：FosUserBundle使用自定义html类自定义注册表

{% trans_default_domain 'FOSUserBundle' %} 

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }} 
    {{ form_widget(form) }} 
    <div> 
     <input type="submit" value="{{ 'registration.submit'|trans }}" /> 
    </div> 
{{ form_end(form) }}

而且我注意到，它以呈现形式调用{{ form_widget(form) }}。所以我想知道如何调用此方法，以及如何自定义视图。基本上我想要的形式和HTML类，以便看起来像注册管理AdminLte的一个：https://almsaeedstudio.com/themes/AdminLTE/pages/examples/register.html

现在我所做的就是创建这个模板app/Resources/FOSUSerBundle/views/Registration/register.html.twig：

{% extends "FOSUserBundle::layout.html.twig" %} 

{% set classes='hold-transition register-page'%} 

{% block fos_user_content %} 

    {% trans_default_domain 'FOSUserBundle' %} 

    <div class="register-box"> 
    <div class="register-logo"> 
     <h1>PhotoShare!</h1> 
    </div> 
    <div class="register-box-body"> 
     <p class="login-box-msg">Register a new membership</p> 
     {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register')}) }} 
     {{ form_widget(form) }} 
     <div class="row"> 
      <div class="col-xs-4"> 
      <input type="submit" class="btn btn-primary btn-block btn-flat" value="{{ 'registration.submit'|trans }}" /> 
      </div> 
     </div> 
     {{ form_end(form) }} 
    </div> 

{% endblock fos_user_content %}

扩展app/Resources/FOSUSerBundle/views/layout.html.twig有以下内容：

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

{% block title %}Photoshare!!{% endblock %} 

{% set classes=''%} 

{% block body %} 
    {% block fos_user_content %} 
    {% endblock fos_user_content %} 
{% endblock body %}

，它扩展了app/Resourses/views/base.html.twig模板：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>{% block title %}Welcome!{% endblock %}</title> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     {% block stylesheets %} 
      <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" > 
      <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" > 
      <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" > 
     {% endblock %} 
     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> 

     {% block javascriptsHeader %} 

     {% endblock %} 

    </head> 
    <body class="{{ classes }}"> 
     {% block body %} 
     {% endblock body %} 

     {% block javascriptsFooter %} 

     {% endblock javascriptsFooter %} 
    </body> 
</html>

我想呈现的字段是默认的，并且通过默认的FosUserBundle的管理员表单提供的字段非常相似。为了从上面提到的模板中获得相同的外观，我想弄乱html类。

来源

2017-04-11 Dimitrios Desyllas

A form theme是你需要的。

您可以创建一个表单的主题，只有在喜欢你的登记表的特定模板使用它：

{% form_theme form 'register-form-theme.html.twig' %} 

{% trans_default_domain 'FOSUserBundle' %} 

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }} 
    {{ form_widget(form) }} 
    <div> 
     <input type="submit" value="{{ 'registration.submit'|trans }}" /> 
    </div> 
{{ form_end(form) }}

或者你可以设置一个全球性的形式，主题config.yml：

# Twig Configuration 
twig: 
    # ... 
    form_themes: 
     - 'form-theme.html.twig'

您的形式主题则应扩展由symfony提供的默认div布局：

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

然后您可以覆盖此模板中的块：

{# app/Resources/views/form-theme.html.twig #} 
{% extends 'form_div_layout.html.twig' %} 

{%- block form_start -%} 
    {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' custom classes')|trim }) %} 
    {{ parent() }} 
{%- endblock form_start -%} 

{%- block form_row -%} 
    <div class="custom classes"> 
     {{- form_label(form) -}} 
     {{- form_widget(form) -}} 
     {{- form_errors(form) -}} 
    </div> 
{%- endblock form_row -%} 

{%- block form_widget_simple -%} 
    {% set attr = attr|merge({ 'class': (attr.class|default('') ~ ' custom classes')|trim }) %} 
    {{ parent() }} 
{%- endblock form_widget_simple -%}

来源

2017-04-11 16:22:27

'form_widget_simple'和'form_row'之间的区别是什么？ –

'form_widget_simple'只是'form_row'中的'{{ - form_widget（form） - }}'部分。实际输入字段之前和之后是标签和错误。花一些时间，并进入symfony的表单主题系统。乍一看对我来说有点困惑，但事实证明它非常强大，而且不容易理解。今天节省了我很多时间。 –

在'form_widget_simple'中设置了哪些类？正如我知道的是，AdminLTE的自定义主题每个输入字段都有以下例如''那么'表格控制'类去？ –

Symfony 3：FosUserBundle使用自定义html类自定义注册表

回答

相关问题