ユーザーログインフォームテンプレートを上書きする

Aug 18 2020

テンプレートファイルを使用してカスタムテーマでユーザーログインページをカスタマイズしようとしていますpage--user--login.html.twigが、さまざまなフォーム要素へのアクセスに問題があります。フォームのすべての側面はにありますがpage.content、出力されているコンテンツを編集したいと思います。

簡単な例として、基本テーマにはユーザー名とパスワードが垂直方向にスタックされています。ブートストラップを使用するようにこれを調整して、大画面では水平方向に、モバイルでは垂直方向にスタックされるようにします。

Drupal 7ではform、テンプレートファイルに、次のような特定のフォーム要素を個別にレンダリングできる要素がありました。

<div class="col-sm-12 col-lg-6">
  <?php print drupal_render($form['name']); ?> </div> <div class="col-sm-12 col-lg-6"> <?php print drupal_render($form['pass']); ?>
</div>

Drupal 8に相当するものはありますか?

フォーム(form--user-login.html.twigおよびform--user-login-form.html.twig)のテンプレートファイルを作成して、フォームが存在するページではなくフォームテンプレート自体を変更できるかどうかを確認しようとしましたが、うまくいきませんでした。

まったく新しいページとフォームを作成するのではなく、現在のログインテーマを上書きし、ユーザーが正しいログインページにアクセスできるように必要なすべての構成を追加する必要がありますが、そうする方法がまだ見つかりません。あらかじめ。

回答

1 Yuseferi Aug 18 2020 at 19:05

正しくオーバーライドelementすると、のすべてのアイテムが含まれますform--user-login.html.twig

<div class="login-form login-form__wrapper">
    <form{{ attributes }}>
        <div class="login-form__top">
            <h3>hello world</h3>
            <div id="error_messages"></div>
            {{ element.messages }}
            {{ element.name }} {# username element #}
            {{ element.pass }} {# password element #}
            <div class="login-form__help_actions">
                <input id="show_password" class="show_password" type="checkbox" />
                <label class="password-toggle" for="show_password">Show password</label>
                <a href="/user/password" class="forgot-password">Forgot Password?</a>
            </div>
            {{ element.form_build_id }} {# required #}
            {{ element.form_id }} {# required #}
            <div class="login-form__submit">
                {{ element.actions.submit }}
            </div>
        </div>
    </form>
</div>

テンプレートが有効でない場合は、追加してみてください。

function Yourtheme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) { if ($hook == 'form' & !empty($variables['element']['#id'])) { $suggestions[] = 'form__' . str_replace('-', '_', $variables['element']['#id']);
  }
}

次にform--user-login-form.html.twig、テーマで作成します。

キャッシュをクリアすることを忘れないでください。