web-dev-qa-db-ja.com

ユーザーログインブロックのカスタマイズ

私はDrupal 8で約1週間から遊んでいます。2日前に、必要に応じてユーザーログインページをデザインしようとしましたが、うまくできませんでした。私の問題は以下:

ユーザーログインフォーム(/ user/login)をカスタマイズしたい。ユーザーログインページ(page--user--login.html.twig)を編集できますが、ユーザーログインフォームの名前がわかりません。ユーザーログインフォームの要素をどのように再構成できますか?または私は間違った場所を探していますか?

あなたが与えることができるどんな助けにも感謝します!

2
adiii4

非常に役立つ1つのことは、services.ymlで enable Twig debugging にすることです(本番環境では推奨されません)。

parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

Auto_reloadおよびcache設定を開発設定に設定することもできるため、キャッシュを再構築する必要はありません(コンパイル済みのtwigテンプレートを手動で削除)。

これにより、マークアップのさまざまなコンポーネントに使用されているテンプレートを示すHTMLコメントが有効になります。 BartikとClassyは、デフォルトでこれをblock.html.twigと表示します。ブロックのテンプレートの提案はblock--PLUGINID.html.twigで、PLUGINIDはブロックのプラグインIDで、アンダースコアがダッシュに置き換えられています。

Classyのサブテーマを使用したローカル開発環境からのデバッグ出力の例:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--userlogin.html.twig
   x block--user-login-block.html.twig
   * block--user.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/blah8/templates/block--user-login-block.html.twig' -->
<div id="block-userlogin" class="contextual-region block block-user block-user-login-block" role="form">

templates/block--user-login-block.html.twig

2
mradcliffe

このページがあります:

  • / user-page--user.html.twig
  • / user/login-page--user--login.html.twig
  • / user/password-page--user--password.html.twig

このページすべてに使用することをお勧めします

{% extends "page.html.twig" %}

このページの内部page--user.html.twigこれで

<div class="user-login">    
{% if page.content %}
       {{ page.content }}
    {% endif %}
</div>

そして、冗談はあなたがこれを持っているCSSにあります:

.user-login input[type="text"],input[type="password"],input[type="email"],input[type="submit"]:hover, form, label, input[type="submit"]

私はすべてのタイプに対してpage--user.html.twigとcssのみを実行しました。

別の方法で要素を構成する場合は、次のようにします。

  • form.html.twig
  • form-element.html.twig
  • menu-local-tasks.html.twig

そして、plsはdebugs:trueをservices.ymlの中に入れます

1
SakaSerbia

SimpleLogin: https://www.drupal.org/project/simplelogin

これは、カスタマイズのためのシンプルなモジュールですDrupalログイン、パスワード、および背景画像付きの登録ページ。

0
Satheesh kumar