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類自定義註冊表

回答

相關問題