उपयोगकर्ता लॉगिन फ़ॉर्म टेम्पलेट को ओवरराइड करें

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अपने विषय में बनाएँ ।

कैश साफ़ करना न भूलें।