Symfony 3:FosUserBundle 使用自定义 html 类 自定义注册表单
Symfony 3: FosUserBundle Customizing registration form using custom html classes
当我试图从我的 symfony 3 项目的 FosUSerBundle 自定义登录表单时,我查看了 FosUSerBundle 的默认 twig 模板以产生一个想法,然后我注意到供应商提供的 twig 模板(vendor/friendsofsymfony/user-bundle/Resources/views/Registration/register_content.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) }}
我注意到它调用 {{ 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 类 以便从上面提到的模板中获得相同的外观。
一个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 -%}
当我试图从我的 symfony 3 项目的 FosUSerBundle 自定义登录表单时,我查看了 FosUSerBundle 的默认 twig 模板以产生一个想法,然后我注意到供应商提供的 twig 模板(vendor/friendsofsymfony/user-bundle/Resources/views/Registration/register_content.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) }}
我注意到它调用 {{ 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 类 以便从上面提到的模板中获得相同的外观。
一个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 -%}