3

私はSymfony2とFOSUserBundleを使用しています。

この質問は、FOSUserBundleの他のバンドルされたフォームに拡張できます。

バンドルに含まれているため、FOSUserBundleのログインフォームを使用するのは非常に簡単です。その場合、完全なフォームが表示され、それを「コピー」するか、他の場所で使用して、希望するスタイルを適用するだけです。これはどのように見えるかです：

<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
<input type="password" id="password" name="_password" />
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />

しかし、たとえば、登録フォームはどうですか？その場合、バンドルに含まれるのはこれだけです。

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">

{{form_widget（form）}} 

<input type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />

</div></form>

[stackoverflowがこの最後のコードを正しく解析しておらず、正しくきれいになっていないことに注意してください]

ご覧のとおり、すべてのフォームはタグ{{form_widget（form）}}から取得され、フォームをレンダリングする必要があるのはこれだけです。

質問：自分のスタイル、幅、色などに合わせて、そのフォームをどこでどのように変更できますか？

4

2 に答える 2

3

RegistrationFormはSymfony2フォームコンポーネントで構築されているため、すべてのカスタマイズはそれを使用して行う必要があります。

これは、このトピックに関する非常に優れたクックブックエントリです。

非常に簡単な例：

<div class="pull-left input">
    {{ form_label(form.username) }}
    {{ form_widget(form.username) }}
</div> 

{{ form_rest(form) }}
于 2012-08-07T09:32:40.910 に答える
0

バンドルテンプレート（この場合はFOSUser）をオーバーライドし、@ Inorryによって提案されたフォームコンポーネントレンダリングオプションの処理を含め、新しいテンプレートですべてのカスタマイズを行う必要があります。説明は、ここのFOSドキュメントにあります。

一般的に、以下で十分です。

  1. layout.html.twigの下に独自のファイルを作成して、バンドルからオーバーライドしますapp/Resources/FOSUserBundle/views/。
  2. 同じパターンを使用してカスタマイズする追加のテンプレートをオーバーライドします：foo.html.twigby app/Resources/FOSUserBundle/views/foo.html.twig。

  3. たとえば、Bootstrapを使用してログインフォームをカスタマイズする場合は、次を作成しますapp/Resources/FOSUserBundle/views/Security/login.html.twig。

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

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Login{% endblock %}

{% block fos_user_content %}
{% 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 }}" />
    <div class="form-group">
        <label for="username">{{ 'security.login.username'|trans }}</label>
        <input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
    </div>
    <div class="form-group">
        <label for="password">{{ 'security.login.password'|trans }}</label>
        <input class="form-control" type="password" id="password" name="_password" required="required" />
    </div>
    <div class="form-group">
        <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
        <label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
    </div>

    <div class="form-group">
        <input class="btn btn-default" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
    </div>
</form>
{% endblock fos_user_content %}

  4. バンドルの下のビューの構造を維持するように注意してください。これが、ログインテンプレートがSecurityフォルダの下に作成された理由です。注意：バンドル内の構造は、カスタムテンプレートごとに保持する必要があります。

  5. 元のテンプレートはカスタムテンプレートによってマスクされているため、使用にも注意{% extends "FOSUserBundle::layout.html.twig" %}してください（基本的な仮定が失敗した場合に備えて、新しいバージョンのSymfonyでこれを確認します）。
于 2015-05-05T02:58:46.557 に答える