البرنامج التعليمي النهائي لوحدة فقرات دروبال

خلال الأشهر القليلة الماضية ، عملنا مع المزيد والمزيد من مواقع Drupal 8. كل هذه المشاريع لديها شيء واحد مشترك ... لقد استخدموا وحدة فقرات دروبال.

الفقرات هي وحدة شائعة جدًا للتعامل مع المحتوى في دروبال 8.

تعمل الفقرات بطريقة مشابهة لحقول المحتوى ، ولكنها توفر أيضًا مجموعة واسعة من الخيارات لتصميم وتخطيط وتجميع المحتوى الخاص بك.

إذا كنت تريد تعلم الفقرات ، فهذا هو الدليل النهائي! اقرأ ، شاهد واتبع جميع الأجزاء العشرة من هذا البرنامج التعليمي. في النهاية ، ستستخدم الفقرات لجميع مواقعك أيضًا!

الجزء # 1. لماذا تستخدم وحدة فقرات دروبال؟

يمكن أن تكون أنواع الفقرة أي شيء من كتلة نصية بسيطة أو صورة إلى عرض شرائح معقد وقابل للتكوين.

بدلاً من وضع كل محتوياتهم في حقل نصي واحد لـ WYSIWYG ، يمكن للمستخدمين النهائيين الاختيار سريعًا بين أنواع الفقرات المحددة مسبقًا. يمكنك إنشاء العديد من الميزات المتقدمة ويمكن للمستخدمين اختيار الميزة التي يريدون استخدامها.

هذا يسهل على المستخدمين إضافة محتوى متقدم. على سبيل المثال ، قد يفهم المستخدمون كيفية إضافة اقتباس مستخرج إلى نص محتوى ، ولكن قد لا ينتهي به الأمر إلى توسيطه أو تنسيقه بشكل صحيح تمامًا. قد يرغبون أيضًا في القيام بشيء أكثر تعقيدًا مثل تضمين مربع شرح داخل مقال ، لكن ليس لديهم فكرة عن كيفية إضافة الأنماط المطلوبة.

يمكن لوحدة Drupal Paragraphs أن تجعل عمليات مثل هذه أكثر قابلية للإدارة للمستخدمين غير التقنيين مع منح المطورين أيضًا القدرة على التحكم في تنسيق ومظهر هذه العناصر المنسقة بشكل خاص على مستوى السمة.

في الممارسة العملية ، تسمح لنا الفقرات بإدراج عناصر تشبه إلى حد كبير حقول المحتوى ، ولكن بدلاً من إضافة هذه العناصر حول جسم أي جزء معين من المحتوى ، يتم إدراجها فعليًا في جميع أنحاء الجسم.

بالنسبة لهذا الدليل ، سنتخيل أننا نقوم بإنشاء موقع ويب يسمى "Life Advice for Free" ، والذي يقدم محتوى إعلامي في شكل مقالات. يمكنك متابعة أي موقع تطوير آخر إذا كنت ترغب في ذلك ، مع إجراء تعديلات طفيفة حسب الضرورة.

الجزء 2. تثبيت وحدة فقرات دروبال

نوصي باستخدام موقع اختبار Drupal 8 فارغ لهذا المشروع.

• انقر هنا لتنزيل وحدة Paragaphs.
• تتطلب الفقرات أيضًا وحدة تنقيحات مرجع الكيان.
• بمجرد تنزيل هاتين الوحدتين ووضعهما في دليل / modules الخاص بك ، قم بتثبيتهما على موقعك.

الجزء # 3. إنشاء فقراتك الأولى

تعمل الفقرات من خلال السماح لنا بإنشاء ما يسمى "أنواع الفقرات" والتي في حالتنا ستحل بشكل جماعي محل حقل النص لأي نوع محتوى معين نريد استخدام أنواع الفقرات معه.

لكي تبدأ في الاستفادة من الفقرات ، يجب عليك أولاً إنشاء نوع فقرات واحد على الأقل ، ثم يتعين عليك إضافة نوع الفقرات هذا إلى نوع المحتوى. قد تبدو هذه العملية محيرة في البداية ، ولكن من السهل التعرف عليها بمجرد إعداد نوع أو نوعين من الفقرات.

في العرض التوضيحي الخاص بنا ، سنقوم باستبدال حقل النص لنوع محتوى المقالة الافتراضي بمجموعة من أنواع الفقرات.

هام: إذا كنت تختبر هذا على موقع يحتوي بالفعل على محتوى من نوع المقالة ، فلا تحذف حقل النص الخاص بنوع محتوى المقالة كما نحن على وشك القيام به في هذا العرض التوضيحي. إذا قمت بذلك ، فسوف تفقد نص جميع المقالات الموجودة على موقع الويب الخاص بك. إذا كنت تعمل على موقع تم فيه استخدام نوع محتوى المقالة بالفعل ، فيجب عليك إنشاء نوع محتوى جديد لاختبار وحدة الفقرات عليه.

في موقع "Life Advice for Free" الخاص بنا ، سنبدأ في تكوين الفقرات عن طريق تحرير نوع محتوى المقالة.

• انتقل إلى الهيكل> أنواع المحتوى.
• انقر فوق الزر "إدارة الحقول" في صف المقالة.
• ستكون الآن في صفحة "إدارة الحقول" لنوع محتوى المقالة. في هذه الصفحة ، انقر فوق سهم القائمة المنسدلة بجوار الزر "تحرير" في صف النص الأساسي ، ثم انقر فوق حذف.
• تأكيد الحذف في الصفحة التالية.

الآن سنقوم بإنشاء أول نوع فقرات لدينا.

• انتقل إلى الهيكل> أنواع الفقرات.
• انقر فوق "إضافة نوع فقرات".
• في الصفحة التالية ، نحتاج إلى توفير تسمية لنوع الفقرات هذا. لعرضنا التوضيحي ، سوف نسمي هذا "النص الأساسي" ، لأننا سنستخدمه كجسم للمحتوى الخاص بنا.
• انقر على "حفظ وإدارة الحقول".
• في صفحة "إدارة الحقول" ، انقر على "إضافة حقل".
• في القائمة المنسدلة التالية "إضافة حقل جديد" ، مرر لأسفل ، وضمن "نص" ، حدد "نص (منسق ، طويل ، مع ملخص)". هذا مشابه لحقل النص الافتراضي الذي يستخدمه نوع محتوى المقالة غالبًا - منطقة نص طويلة مع محرر WYSIWYG.
• في صفحة "إضافة حقل" التالية ، سنقوم بتسمية هذا الحقل بالذات "نص أساسي" أيضًا.
• انقر فوق "حفظ ومتابعة".
• بعد ذلك ، ننتقل إلى علامة التبويب "إعدادات الحقل" في هذا الحقل. لأي من هذه الحقول ، قد نحدد عددًا مسموحًا به من القيم. قد يكون من المفيد السماح بأكثر من قيمة واحدة لبعض الحقول - لا سيما تلك التي تقبل أجزاء فردية سرية من المعلومات ، مثل التواريخ أو ملفات الصور أو الحقول النصية القصيرة للحصول على معلومات مثل الأسماء - ولكن لمناطق النص الطويل ، غالبًا ما يكون من غير الضروري توفير قيم إضافية حيث يمكن ببساطة وضع الفقرات واحدة تلو الأخرى في منطقة نصية واحدة. في هذا المثال ، دعنا نترك الإعدادات الافتراضية على "محدود" و 1.
• انقر فوق "حفظ إعدادات الحقول".
• في صفحة "إعدادات النص الأساسي للنص الأساسي" التالية ، يمكننا الاحتفاظ بجميع الإعدادات الافتراضية. لاحظ أن المستخدمين سيظل لديهم جميع خيارات التنسيق التي يفضلونها عادةً باستخدام محرر WYSIWYG الخاص بمنطقة النص. نحن لا نأخذ منهم أي شيء. ما سنفعله بدلاً من ذلك هو منحهم طريقة إضافية ومحسنة لإضافة أنواع معينة من العناصر إلى محتواهم.
• انقر فوق "حفظ الإعدادات".
• سترى الآن الحقول الجديدة داخل نوع الفقرة الجديد الخاص بك:

• في هذه الصفحة التالية ، انقر فوق علامة التبويب "إدارة العرض".
• يحتوي نوع الفقرات هذا حاليًا على حقل واحد فقط - حقل النص الأساسي. لا نريد أن تظهر التسمية جنبًا إلى جنب مع النص من هذا الحقل ، لذا حدد "مخفي" أسفل عمود التسمية لهذا الحقل. يجب أن يظل التنسيق كافتراضي.
• انقر فوق "حفظ".

نحتاج الآن إلى إضافة نوع الفقرات هذا إلى نوع محتوى المقالة حتى نتمكن من استخدامه. إليك كيف نفعل ذلك:

• انتقل إلى الهيكل> أنواع المحتوى.
• انقر فوق "إدارة الحقول" لنوع محتوى المقالة.
• انقر فوق "إضافة حقل".
• لاستخدام نوع الفقرات الجديد مع هذا الحقل ، افتح القائمة المنسدلة "تحديد نوع الحقل" وحدد "فقرة" ضمن "المراجعات المرجعية".
• بعد تحديد "فقرة" ، أدخل التسمية "Body" لأن هذا هو ما نستخدمه كنص للمحتوى الخاص بنا.
• انقر فوق "حفظ ومتابعة".
• في الصفحة التالية ، يجب تعيين "نوع العنصر المراد الرجوع إليه" على "الفقرة".
• "يجب أن يكون عدد القيم المسموح به" غير محدود ". باختيار "غير محدود" ، يمكننا إدخال هذا الحقل الخاص الذي توفره أنواع الفقرات المكونة لدينا عدة مرات كما نريد. سيصبح هذا مفيدًا عندما نبدأ في إدراج أشياء أخرى إلى جانب النص في نص المحتوى.
• انقر فوق "حفظ إعدادات الحقول".
• في صفحة "إعدادات النص الأساسي للمقال" التالية ، نحتاج إلى إتاحة نوع الفقرات الذي تم إنشاؤه مسبقًا لهذا الحقل. للقيام بذلك ، حدد المربع بجوار "النص الأساسي" ضمن "النوع" بالقرب من أسفل الصفحة. هذه هي الطريقة التي نجعل بها نوع الفقرات المحدد هذا متاحًا في هذا المجال. نظرًا لأننا نضيف المزيد من أنواع الفقرات إلى موقعنا ، يمكننا العودة وإتاحتها لهذا الحقل أيضًا.

• انقر فوق "حفظ الإعدادات" ، ومن المفترض أن يعيدك الموقع إلى صفحة "إدارة الحقول" لنوع المحتوى.

لقد انتهينا الآن من استبدال حقل Body السابق (الافتراضي) بحقل Body الجديد ، والذي يستخدم الفقرات ، وعلى وجه التحديد نوع فقرات "النص الأساسي" الذي أنشأناه. سنقوم الآن بتهيئة بعض الإعدادات الأخرى بحيث تظهر بالطريقة التي نريدها.

• للبدء ، سننقر فوق علامة التبويب "إدارة عرض النموذج" حتى نتمكن من وضع حقل النص الأساسي الجديد في مكان بارز في صفحة إنشاء المحتوى للمقالات.
• في هذه الصفحة ، قم بالتمرير لأسفل للعثور على حقل النص الأساسي الجديد الخاص بنا ، واسحبه بالقرب من أعلى القائمة ، أسفل العنوان مباشرةً.
• انقر فوق "حفظ".

نحتاج الآن إلى التأكد من توفر نوع الفقرة الجديد في المكان المناسب لزوار الموقع.

• انقر فوق "إدارة العرض".
• مرة أخرى ستجد الجسم في الأسفل. اسحب هذا بالقرب من الأعلى ، أسفل الصورة مباشرة. سنتعامل مع حقل الصورة هذا كنوع كبير من الصور التمهيدية أو الأولية لمقالاتنا وليس جزءًا من المحتوى نفسه.
• انقر فوق "حفظ".

في هذه المرحلة ، أكملنا الإعداد لنوع محتوى المقالة الخاص بنا باستخدام حقل الفقرات الجديد هذا. حان الوقت الآن لإنشاء بعض المحتوى لاختباره.

• انتقل إلى صفحة محتوى موقعك ، وانقر على "إضافة محتوى".
• انقر فوق "مقالة".
• يمكنك إدخال أي عنوان لمقالك. في هذا المثال ، دعنا نطلق على مقالتنا "كيفية تكوين 100 صديق".
• الآن ، وصولاً إلى حقل Body ، ربما لاحظت أنه يبدو مختلفًا قليلاً ، على الرغم من أنه لا يزال يستخدم نفس الحقل الطويل مع محرر WYSIWYG تمامًا كما كان من قبل. الفرق الآن هو أن لدينا حقل نص شامل يحتوي حاليًا على حقل نص أساسي واحد. أسفل حقل النص الأساسي مباشرةً ، يجب أن ترى زر "إضافة نص أساسي" ، والذي يسمح لنا بإضافة حقول متعددة. في هذه المرحلة ، لن يكون ذلك ضروريًا لأن حقل النص الطويل المستخدم حاليًا مناسب تمامًا لإدخال نص طويل متعدد الفقرات ، لذلك لن نحتاج إلى إضافة حقل إضافي عندما نتمكن من إضافة المزيد من النص في نفس الحقل . في وقت لاحق ، على الرغم من ذلك ، سنرى أنه يصبح من المفيد جدًا أن تكون قادرًا على إضافة حقول فقرات إضافية عندما تقوم بتنفيذ أنواع فقرات متعددة على موقعك. في الوقت الحالي ، فقط أدخل فقرة أو فقرتين من النص في حقل النص الأساسي.

احفظ مقالتك واعرض الصفحة كما يراها أي زائر.

في هذه المرحلة ، لا يبدو النص الجديد الذي يستخدم الفقرات مختلفًا عن المقالة التي تستخدم حقل النص الافتراضي. مع وجود الفقرات ، على الرغم من ذلك ، سنتمكن قريبًا من السماح لمنشئي المحتوى لدينا بإضافة عناصر إضافية إلى المحتوى دون الحاجة إلى معرفة كيفية تصميمه بشكل صحيح.

الجزء # 4. إضافة CSS الخاص بك إلى الفقرات

جزء كبير مما يجعل الفقرات مفيدة للغاية هو أنه يمكننا كتابة CSS لعناصر محددة داخل المحتوى حتى لا يضطر منشئو المحتوى إلى محاولة تصميم العديد من هذه العناصر يدويًا باستخدام محرر WYSIWYG أو CSS المضمنة. هذا يعني أننا سنخصص سمة موقعنا لجعل هذه العناصر تظهر تمامًا كما نريد.

في العديد من الحالات الواقعية ، من المحتمل أن تعمل باستخدام سمة مخصصة أو موضوع فرعي خاص بك ، وفي هذه الحالة يمكنك تحريره بحرية. في هذا البرنامج التعليمي ، سننشئ موضوعًا فرعيًا سريعًا وسهلاً لموضوع Bartik الافتراضي حتى نتمكن من اتباع أفضل الممارسات وإضافة CSS الخاصة بنا دون تحرير Bartik لهم نفسها. (نتجنب تحرير Bartik - أو أي سمة أساسية أو مساهمة أخرى - بشكل مباشر لأننا إذا فعلنا ذلك ثم طبقنا تحديثًا تم إصداره لاحقًا على هذا الموضوع ، فستفقد تعديلاتنا الخاصة.) إذا لم تكن معتادًا على إنشاء الموضوعات الفرعية ، فلا بأس بذلك. نحن لا نتعمق في العملية ولكن بدلاً من ذلك نقوم بإنشاء نسخة مباشرة من الموضوع ، والتي سنقوم بعد ذلك بتطبيق بعض التعديلات الطفيفة عليها. هذه عملية سهلة.

• لإنشاء موضوع فرعي ، تحتاج أولاً إلى الوصول إلى الخادم الذي يتم استضافة موقعك عليه ، والانتقال إلى الدليل الجذر لموقعك.
• بمجرد الوصول إلى هناك ، افتح دليل "السمات". هذا هو المكان الذي يتم فيه وضع جميع السمات والمواضيع الفرعية المخصصة والمساهمة. في دليل "السمات" هذا ، أنشئ مجلدًا جديدًا يسمى "custombartik" ، وانتقل إلى هذا الدليل الجديد.

نحتاج الآن إلى إضافة ملفين إلى هذا الدليل الجديد. الأول سيكون ملف معلومات السمة. افتح أي برنامج لتحرير الكود تستخدمه لتطوير الويب. تتطلب ملفات المعلومات هذه عدة أجزاء من المعلومات: اسم المشروع (اسم موضوعنا) ، ونوع المشروع ("السمة" في هذه الحالة) ، واسم الجهاز للسمة الأساسية إذا كان هذا موضوعًا فرعيًا (مثل موضوعنا) is) ، ووصفًا موجزًا ​​، والإصدار الرئيسي من Drupal (7.x ، 8.x ، إلخ) الذي تم إنشاء السمة من أجله. سنقوم بإدخال هذه المعلومات في النموذج التالي (اكتب كل شيء كما تراه بالضبط):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

تأكد من بقاء اسم النسق الأساسي "bartik" بدون أحرف كبيرة - فهو الاسم الحساس لحالة الأحرف القابل للقراءة آليًا الذي نحتاجه. مع إدخال هذه المعلومات ، احفظ الملف باسم "custombartik.info.yml". من المهم أن تقوم بحفظه بنفس اسم المجلد الذي قمت بإنشائه متبوعًا بـ ".info.yml".

نحتاج الآن إلى إنشاء ملف مكتبات السمات الخاصة بنا ، حيث سنخبر دروبال بمكان العثور على CSS الخاص بالثيم وإصدار السمة هذا. يمكن تقديم المزيد من المعلومات ، ولكن هذا كل ما نحتاجه لأغراضنا.

• افتح ملفًا جديدًا. في هذا الملف ، انتبه جيدًا للمسافات البادئة هنا. يجب أن تكون كل مسافة بادئة علامة تبويب ذات مسافتين.
• أدخل المعلومات التالية تمامًا كما تظهر:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• احفظ هذا الملف باسم "custombartik.libraries.yml". يخبر هذا الملف موقع الويب بشكل أساسي أن هذا هو الإصدار 0.1 من السمة (كان من الممكن أن نعطي هذا أي رقم إصدار) وأنه ستكون هناك ورقة أنماط موجودة داخل دليل السمات ("custombartik") في css / style.css.

نحتاج الآن إلى العودة إلى ملف المعلومات الخاص بنا لإخبار دروبال باستخدام المعلومات الموجودة ضمن حاوية "global-css" للعثور على ورقة الأنماط الخاصة بنا.

• افتح ملف custombartik.info.yml الخاص بك ، وأضف سطرًا فارغًا أسفل سطر "core: 8.x" الخاص بك ، ثم أضف سطر المعلومات التالي ، مع الاحتفاظ بالمسافة البادئة تمامًا كما تظهر أدناه:

 libraries:  - custombartik/global-css

يجب أن يبدو الملف بالكامل الآن كما يلي:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

في هذه المرحلة ، نحن جاهزون لإضافة هذين الملفين إلى موضوعنا.

• قم بتحميل أو نسخ ملفات custombartik.info.yml و custombartik.libraries.yml إلى مجلد custombartik الخاص بك.
• أضف الآن مجلدًا يسمى "css" داخل مجلد custombartik الخاص بك.
• انطلق وأنشئ ملفًا فارغًا يسمى "style.css" وقم بتحميله إلى هذا الدليل. ستكون هذه ورقة الأنماط الخاصة بنا.
• قبل أن ننشئ ورقة الأنماط الخاصة بنا ، انتقل إلى صفحة "المظهر" الخاصة بموقعك على الويب.
• قم بالتمرير إلى أسفل الصفحة ، وتحت قسم "المظهر غير المثبت" ، يجب أن ترى سمة Bartik المخصصة الخاصة بك. إذا لم تره ، فتأكد من وجود مجلد custombartik وجميع ملفاته في مجلد السمات الخاص بنظام ملفات موقعك.
• انقر فوق "تثبيت وتعيين كافتراضي" تحت القالب المخصص بحيث يبدأ موقعك في استخدام السمة الخاصة بك.
• بمجرد الانتهاء من ذلك ، انتقل إلى صفحتك الرئيسية ، ويجب أن تبدو تمامًا مثل سمة Bartik الافتراضية من Drupal ، باستثناء أنك سترى على الأرجح أيقونة صورة مكسورة بدلاً من شعار دروبال. يبدو المظهر تمامًا مثل Bartik لأن ما أنشأناه هو موضوع فرعي لـ Bartik بدون تخصيص حتى الآن. إذا كان موقعك لا يشبه Bartik ، وخاصة إذا كان يبدو بتنسيق HTML عادي بدون نمط CSS ، فارجع إلى ملفي .yml وتأكد من أنهما يبدوان تمامًا كما تمت طباعتهما أعلاه.

أخيرًا ، لإصلاح صورة الشعار المكسورة ، سنقوم بنسخ الشعار مباشرة من بارتيك إلى الموضوع الفرعي الخاص بنا. هذا جيد لأننا في الواقع لا نغير أي شيء في بارتيك.

• انتقل إلى الدليل الجذر لموقعك ، وانتقل إلى core / theme / bartik. هنا ، سترى ملفًا يسمى "logo.svg".
• انسخ هذا الملف إلى موضوعك الفرعي (دليل “custombartik”).
• على موقع الويب الخاص بك ، انتقل إلى التكوين> الأداء ، وانقر فوق "مسح جميع ذاكرات التخزين المؤقت". الآن يجب أن يظهر الشعار على موقعك.

الجزء رقم 5. تصميم حقول Paragaphs الخاصة بك

الآن بعد أن أصبح لدينا موضوع فرعي يمكننا تحريره بأمان ، يمكننا البدء في وضع قواعد التصميم لعناصر المحتوى التي تتحكم فيها الفقرات. قبل القيام بذلك ، يجب علينا إنشاء نوع فقرات جديد يتطلب قواعد نمط خاصة. سوف نتبع مثالنا في وجود حقل يُدرج صورة مركزية في وسط المقالة.

• انتقل إلى الهيكل> أنواع الفقرات.
• انقر فوق "إضافة نوع فقرات".
• سنقوم بتعيين تسمية لهذه الصورة على أنها "صورة مركزية".
• انقر على "حفظ وإدارة الحقول".
• في الصفحة التالية ، انقر على "إضافة حقل" وحدد "صورة" ضمن "إضافة حقل جديد".
• سنقوم بتسمية هذا الحقل "صورة مركزية" أيضًا.
• انقر فوق "حفظ ومتابعة".
• في الصفحة التالية ، يمكننا الاحتفاظ بجميع القيم الافتراضية ، لذا انقر فوق "حفظ إعدادات الحقل".
• بعد ذلك ، في صفحة "إعدادات الصورة المركزية للصورة المركزية" ، سنضيف بعض القيود البسيطة. اضبط الحد الأقصى لدقة الصورة على 650 × 450 والحد الأدنى للدقة على 50 × 50. اضبط الحد الأقصى لحجم التحميل على 1 ميغابايت ، وانقر على "حفظ الإعدادات". هذه الإعدادات المحددة ليست ضرورية لنوع الفقرات لكي يعمل بشكل صحيح ؛ نقوم بتضمينهم ببساطة لتقليد سيناريو العالم الحقيقي.

• انقر الآن على علامة التبويب "إدارة العرض" ، واضبط تسمية الصورة المركزية على أنها "مخفية" ، ثم انقر على "حفظ".

في هذه المرحلة ، نحتاج إلى إضافة نوع الفقرات هذا إلى حقل الفقرات الموجود لدينا في نوع محتوى المقالة الخاص بنا.

• انتقل إلى الهيكل> أنواع المحتوى.
• انقر فوق "إدارة الحقول" بجوار "المقالة".

قد تميل إلى النقر فوق "إضافة حقل" هنا للحصول على نوع فقرات "صورة مركزية" الجديدة ، ولكن تذكر ، سيتم مزج هذا مع حقل "الجسم المخصص" الخاص بنا. لذا ، بدلاً من ذلك ، سنضيف صورة مركزية إلى حقل الجسم الذي أنشأناه.

• انقر على "تعديل" بجوار "النص الأساسي" ، وانتقل إلى أسفل الصفحة.
• هنا سترى "صورة مركزية" متوفرة أسفل نوع فقرات "النص الأساسي".
• حدد المربع بجوار "الصورة المركزية" لإتاحتها لهذا الحقل ، واحفظ إعداداتك.

سنقوم الآن بإضافة صورة باستخدام هذا الحقل.

• انتقل إلى صفحة المحتوى الخاصة بك ، وقم بتحرير مقالتك "كيفية تكوين 100 صديق".
• دعنا نتخيل أننا نريد إضافة صورة مركزية في مكان ما في منتصف مقالتنا. أسفل حقل النص الأساسي ، سترى مرة أخرى زر "إضافة نص أساسي" لإضافة حقل نص أساسي آخر داخل حقل النص الأساسي هذا. ومع ذلك ، إذا نقرت على سهم القائمة المنسدلة بجوار هذا الزر ، فسترى أن "الصورة المركزية" متاحة الآن أيضًا. انقر فوق هذا الزر ، واختر بعض ملفات الصور للتحميل هنا. ثم قدم بعض النصوص البديلة ، حيث أن ذلك مطلوب.

لقد أضفنا الآن الصورة إلى المحتوى الخاص بنا ، ولكن يتم وضعها حاليًا أسفل كل النص. هذا هو المكان الذي سنستخدم فيه حقل نص أساسي إضافي.

• انقر فوق "إضافة نص أساسي". الآن لدينا حقل نص أساسي وصورة مركزية وحقل آخر للنص الأساسي. لاحظ أنه على الرغم من أنه لا يجب عليك القيام بذلك في هذه المرحلة ، يمكنك تحريكها بحرية عبر أسهم السحب والإفلات في الجزء العلوي الأيسر من حقول الفقرات الفردية. لجعل الصورة المركزية تظهر محصورة بين نص المقالة ، ما عليك سوى الانتقال إلى حقل النص الأساسي الأول ، وتحديد النص الذي ترغب في ظهوره بعد الصورة ، وقص هذا النص من الحقل. ثم قم بالتمرير لأسفل ولصق هذا النص المقطوع في حقل النص الأساسي الثاني (بعد صورتك).
• انقر فوق "حفظ".

عندما تشاهد مقالتك الآن ، فإنها لن تبدو صحيحة تمامًا. نظرًا لأننا لم نقم بإضافة أي قواعد نمط إلى المظهر الخاص بنا ، فمن المحتمل أن يتم تعويم الصورة لليسار (كما هي افتراضيًا) ، بدلاً من توسيطها. ومع ذلك ، يجب أن يظهر بعد نص حقل النص الأساسي الأول وقبل نص حقل النص الأساسي الثاني. الآن لدينا مقال يمكننا من خلاله اختبار بعض قواعد التصميم المخصصة.

الجزء # 6. التحكم في الفقرات باستخدام CSS

سننتقل إلى موضوعنا الفرعي المخصص الآن لبدء تصميم إخراج حقول الفقرات التي أنشأناها. في الوقت الحالي ، سنستهدف حقل "الصورة المركزية" على وجه التحديد ، بدلاً من تضمين حقل الفقرات من نوع المحتوى. نحن نقوم بذلك لأننا نريد أن يتم توسيط هذا الحقل في أي وقت ، بغض النظر عن مكانه. وبالتالي ، من خلال تعيين القواعد مباشرة لـ "الصورة المركزية" ، نتجنب تعيين قواعد متعددة غير ضرورية لسياقات متعددة.

ومع ذلك ، نحتاج إلى استهداف فئة "العقدة" ، لأنه سيكون هناك ، افتراضيًا ، بعض الأنماط لهذا الحقل المستهدف ضمن فئة "العقدة". وبالتالي ، يتعين علينا تجاوز تلك القواعد.

• افتح ورقة الأنماط الخاصة بالموضوع الفرعي "custombartik" على custombartik / css / style.css.
• يجب أن يظل الملف فارغًا ، لكننا سنبدأ الآن في إضافة القواعد إليه. سنبقي الأمور بسيطة في الوقت الحالي. أضف سطور التعليمات البرمجية التالية إلى ورقة الأنماط الخاصة بك:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

مع المجموعة الأولى من القواعد ، نقوم ببساطة بتوسيط الصورة أفقيًا داخل فئة المجال الخاصة بها والتأكد من عدم وجود نص أو أي شيء آخر يطفو بجانبها. المجموعة الثانية من القواعد ليست ضرورية تمامًا ، ولكنها بعض التعليمات البرمجية الشائعة للتأكد من أن الصور لا ينتهي بها الأمر أكبر مما ينبغي بالنسبة إلى منطقة المحتوى.

• بمجرد إضافة هذا إلى ملف style.css ، احفظ التغييرات (من الآن فصاعدًا ، يفترض أي مرجع لحفظ التغييرات في موضوعك الفرعي أيضًا تحميل الملفات أو نسخها إلى الخادم الخاص بك إذا لم تكن تقوم بالتحرير مباشرة على الخادم على الذي يقع عليه موقع الاختبار الخاص بك).
• ثم على موقعك ، انتقل إلى التكوين> الأداء ، وانقر فوق "مسح جميع ذاكرات التخزين المؤقت" لتحميل تغييرات المظهر على موقعك.
• انتقل مرة أخرى إلى المقالة التي قمت بإضافة الصورة ليتم توسيطها (أو قم بتحديث الصفحة إذا كانت مفتوحة بالفعل).

الصورة الموضوعة من خلال نوع الفقرات "صورة مركزية" يجب الآن توسيطها مع عدم وجود نص عائمًا على جانبيها. قد يكون هناك المزيد من الأنماط التي نرغب في إضافتها ، ولكن لغرض هذا البرنامج التعليمي ، قمنا بما نريد القيام به في هذا الوقت - تأكد من أن مخرجات هذا الحقل يتم التحكم فيها بشكل صارم بواسطة CSS حتى يتمكن المستخدمون من إضافة لا يلزم أن يقوم المحتوى بتصميم أي شيء بنفسه باستخدام محرر WYSIWYG أو أساليب التصميم المضمنة الأخرى.

الجزء # 7. فقرات ذات حقول متعددة

يمكننا أيضًا إنشاء أنواع فقرات تتكون من حقول متعددة.

على سبيل المثال ، بدلاً من نوع "صورة مركزية" ، يمكننا إنشاء نوع "صورة مركزية مع تسمية توضيحية" ، والتي تتكون من حقل تحميل صورة وحقل نص مصاحب لأي عنصر منفرد من هذا النوع. يساعدنا هذا أيضًا في إزالة عبء التخطيط عن أولئك الذين يضيفون محتوى إلى الموقع حتى نتمكن من التحكم في عرض المحتوى على مستوى المظهر.

لنقم بإنشاء نوع "الصورة المركزية مع التسمية التوضيحية" لممارسة عملية إنشاء نوع فقرات متعدد الحقول. كما قد تتوقع ، ستكون هذه العملية مماثلة لعملية إنشاء نوع حقل واحد.

• انتقل إلى الهيكل> أنواع الفقرات ، وانقر على "إضافة نوع فقرات".
• قم بتسمية هذا النوع "صورة مركزية مع التسمية التوضيحية" ، وانقر على "حفظ وإدارة الحقول".
• انقر فوق "إضافة حقل".

نظرًا لأن حقل "الصورة المركزية" الذي أنشأناه مسبقًا هو بالضبط ما نريده لجزء الصورة من نوع الفقرات الجديد ، بدلاً من إنشاء حقل جديد ، يمكننا إعادة استخدام الحقل السابق. لذلك ، لا تحدد أي شيء ضمن "إضافة حقل جديد" في صفحة "إضافة حقل".

• ضمن "إعادة استخدام حقل موجود" ، حدد "صورة: field_centered_image".
• احتفظ بعلامة "الصورة المركزية" ، وانقر على "حفظ ومتابعة".
• نحتاج إلى تكوين إعداداتنا لحدود حجم الصورة في الصفحة التالية. دعنا مرة أخرى ندخل حدًا أقصى لدقة وضوح الصورة يبلغ 650 × 450 بكسل ، و 50 × 50 بكسل كحد أدنى. اضبط الحد الأقصى لحجم التحميل على 1 ميغا بايت.
• انقر فوق "حفظ الإعدادات".

الآن سنقوم بإضافة حقل آخر. ضع في اعتبارك أننا ما زلنا داخل الإعدادات الخاصة بنوع الفقرات الجديد ، لذلك بمجرد إضافة هذا الحقل الثاني ، سيكون "توسيط الصورة مع التسمية التوضيحية" نوعًا واحدًا يحتوي على حقلين.

• انقر على "إضافة حقل" ، وأضف حقلاً جديدًا من النوع "نص (عادي)".
• تسمية هذا الحقل "تسمية توضيحية".
• انقر فوق "حفظ ومتابعة".
• قد تحتاج بعض التسميات التوضيحية الأطول إلى تجاوز الحد الافتراضي البالغ 255 حرفًا ، لذا قم بتغيير الحد الأقصى لطول هذا الحقل إلى 500. احتفظ بعدد القيم المسموح به عند "محدود" و 1 ، واحفظ الإعدادات.
• الإعدادات الافتراضية لإعدادات التسمية التوضيحية التالية جيدة ، لذا احفظ الإعدادات في تلك الصفحة أيضًا.

الآن لدينا نوع الفقرات الجديد يحتوي على جميع الحقول التي يحتاجها ، لذلك دعونا نتحكم في العرض.

• انقر فوق علامة التبويب "إدارة العرض" حتى نتمكن من إزالة تسميات الحقول ، وهي غير ضرورية في هذه الحالة.
• حدد "مخفي" ضمن عمود "التصنيف" لكلا الحقلين ، وانقر على "حفظ".
• إذا كان الحقلين خارج الترتيب ، فسنقوم بإعادة ترتيبهما بحيث يأتي حقل التسمية التوضيحية بعد حقل الصورة ، ولكن نظرًا لأننا أضفنا حقل التسمية التوضيحية أخيرًا ، يجب أن يكون قد تم وضعه بالفعل بعد حقل الصورة ، تمامًا كما نريده. .

سنقوم الآن بإضافة النوع الجديد إلى نوع محتوى المقالة الخاص بنا.

• انتقل إلى الهيكل> أنواع المحتوى ، وانقر فوق "إدارة الحقول" للمقال. كما كان الحال عندما أضفنا أول نوع فقرات "صورة مركزية" إلى نوع المحتوى ، سنضيف نوع الفقرات الجديد هذا داخل حقل النص المخصص لدينا بدلاً من إضافة حقل جديد تمامًا.
• في صفحة "إدارة الحقول" للمقال ، انقر على "تعديل" للنص.
• قم بالتمرير إلى أسفل الصفحة ، وحدد المربع بجوار "توسيط الصورة مع التسمية التوضيحية" لإتاحة هذا النوع داخل حقل النص الأساسي هذا.
• انقر فوق "حفظ الإعدادات".
• الآن هذا النوع الجديد من الفقرات سيكون متاحًا لأولئك الذين يضيفون مقالات إلى الموقع.

دعنا نمضي قدمًا وننشئ مقالًا جديدًا باستخدام هذا الحقل ، ثم سنضيف التصميم الخاص بنا للتحكم في عرضه.

• انتقل إلى صفحة المحتوى ، وانقر على "إضافة محتوى" ، ثم انقر على "مقالة".
• دعنا نسمي هذا المقال "تعلم العزف على آلة موسيقية قد يحسن حياتك."
• انقر فوق "إضافة نص أساسي" لبدء إضافة بعض النص إلى المقالة. أدخل فقرة أو فقرتين من النص في هذا الحقل.
• بعد ذلك ، أسفل حقل النص الأساسي ، انقر فوق سهم القائمة المنسدلة بجوار "إضافة نص أساسي" ، وحدد الخيار المتاح حديثًا "إضافة صورة مركزية مع تسمية توضيحية". لاحظ أننا نقدم الآن حقلين لإدخال البيانات ، كما يجب أن نتوقع - حقلا "الصورة المركزية" و "التسمية التوضيحية" التي تنتمي إلى هذا النوع من الفقرات.
• قم بتحميل أي صورة في حقل الصورة وقدم بعض النصوص البديلة.
• ثم اكتب ، "The Les Paul هو أحد أكثر القيثارات الأسطورية في موسيقى الروك أند رول."

سنضيف الآن بعضًا من باقي نص المقالة بعد الصورة والتعليق.

• أسفل الصورة ونوع فقرات التسمية التوضيحية ، انقر فوق "إضافة نص أساسي" مرة أخرى.
• أضف فقرة أخرى أو فقرتين من النص.
• أخيرًا ، انقر على "حفظ ونشر".

حاليًا ، يجب أن يكون عرض "الصورة المركزية والتسمية التوضيحية" نصف صحيح. نظرًا لأننا أعدنا استخدام حقل "الصورة المركزية" السابق ، يجب أن يتم توسيط الصورة نفسها بالفعل تمامًا كما كان الحال مع الحقل السابق الذي يتكون فقط من صورة ليتم توسيطها. لا يحتوي نص التسمية التوضيحية ، بالطبع ، على أي قواعد CSS حتى الآن ، لذلك سيظهر بمحاذاة إلى اليسار ويشبه نص بقية المقالة. لذلك ، نحتاج إلى إضافة بعض القواعد إلى موضوعنا لتصميم نص التسمية التوضيحية هذا.

هذه المرة ، عند كتابة CSS ، سنستهدف نوع فقرات "الصورة المركزية مع التسمية التوضيحية" بالكامل ثم ننتقل إلى حقل التسمية التوضيحية داخل تلك الفئة ، بدلاً من استهداف نص التسمية التوضيحية بشكل مستقل عن حاويته ، كما فعلنا سابقًا مع صورة مركزية. سنتخذ هذا الأسلوب لأننا قد نرغب في إعادة استخدام حقل نص التسمية التوضيحية هذا في مكان آخر ، ومن المحتمل أنه في بعض الحالات سنرغب في تنسيقه بشكل مختلف (مثل المحاذاة إلى اليسار أو اليمين بدلاً من التوسيط) عن الطريقة الموجودة في هذا نوع فقرات معينة.

سنقوم بتوسيط نص التسمية التوضيحية لأن الصورة المقابلة لها تتمركز ، ولتوفير تمييز مرئي بين هذا النص ونص المقالة ، سنجعله غامقًا (ستوفر الخط المائل هذا التأثير أيضًا).

• أضف سطور التعليمات البرمجية التالية إلى ورقة الأنماط الخاصة بك ، واحفظ التغييرات:

{codecitation} .paragraph - type - centered-image-with-caption .field - name-field-caption {font-weight: bold؛ محاذاة النص: مركز ؛ } {ترميز}

• بعد ذلك ، لمشاهدة التغييرات التي أجريناها على الموقع ، انتقل إلى التكوين> الأداء ، وامسح جميع ذاكرات التخزين المؤقت.
• ارجع وقم بتحديث المقالة التي تم إنشاؤها مؤخرًا ، وسترى قواعد التصميم الجديدة سارية المفعول. يجب أن يكون نص التسمية التوضيحية الآن غامقًا ومتمركزًا أسفل الصورة.

يمكننا بالطبع تطبيق بعض الأنماط على نوع الفقرات هذا ككل. قد يكون أحد أسباب القيام بذلك هو فصل عنصر الصورة / التسمية التوضيحية عن النص المحيط وتوضيح أنه يجب النظر إليه كوحدة واحدة.

• أضف الكود التالي إلى ورقة الأنماط الخاصة بك ، واحفظ التغييرات:

{codecitation} .paragraph - type - centered-image-with-caption {border: 2px grey solid؛ الهامش: 4 بكسل 0 ؛ الحشو: 4 بكسل ؛ }

الآن امسح ذاكرة التخزين المؤقت لموقعك مرة أخرى ، وقم بتحديث صفحة المقالة. يجب أن تبدو الصورة والتعليق متماثلان في الغالب ؛ ومع ذلك ، فإن وحدة الصورة / التسمية التوضيحية بأكملها الآن محاطة بحد رمادي ولها هوامش صغيرة حول الجزء العلوي والسفلي. يمكننا فعل المزيد لتحسين الجماليات هنا (ومن المحتمل ألا تكون الحدود ضرورية) ، لكن هذا يوضح قدرتنا على توفير تصميم للمكونات الفردية لأنواع الفقرات وكذلك أنواع الفقرات ككل.

الآن إذا قام مستخدم غير تقني بإضافة محتوى إلى الموقع ويريد تضمين صورة كبيرة مركزية مع تسمية توضيحية ، فكل ما عليهم فعله هو تحديد حقل الفقرات هذا أثناء تحرير المقالة ، وتحميل صورة ، وإدخال النص في حقل التسمية التوضيحية. سيتم تطبيق التنسيق تلقائيًا.

الجزء رقم 8. استخدام العقد بأكملها في الفقرات

في هذه المرحلة ، رأينا بعض الأمثلة على الاستخدامات الأساسية للفقرات. الآن سنتناول مثالًا أكثر تقدمًا قليلاً: استخدام الفقرات لوضع عقدة كاملة داخل جسم جزء من المحتوى. إحدى حالات الاستخدام لذلك هي وضع جزء من المعلومات التكميلية ذات الصلة ولكن قائمة بذاتها داخل إحدى مقالاتك (على غرار شيء مثل قسم "هل تعلم؟" الذي قد تراه مصاحبًا لمقال في إحدى المجلات).

على سبيل المثال ، سنتخيل أننا نريد أن يكون لدينا خيار إضافة ما نسميه "مربعات المعلومات" إلى مقالاتنا ، وسنفعل ذلك عن طريق وضع جزء قصير من المحتوى بعنوان "A Short History of the Harp" "ضمن مقالتنا التي تم إنشاؤها مسبقًا حول تعلم العزف على آلة موسيقية.

أولاً ، نحتاج إلى إنشاء نوع محتوى لـ "مربعات المعلومات" هذه.

• انتقل إلى الهيكل> أنواع المحتوى ، وانقر على "إضافة نوع المحتوى".
• سنمنح نوع المحتوى هذا الاسم "مربع المعلومات".
• للحصول على الوصف ، اكتب "أجزاء قصيرة من المعلومات المستخدمة لتكملة المقالات".
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• انتقل إلى صفحة الأشخاص في موقعك ، وانقر فوق علامة التبويب "أذونات".
• قم بالتمرير لأسفل حتى ترى قسم "أذونات نوع الفقرات". أسفل هذا العنوان ، ابحث عن "Body text: View content" ، وحدد المربعات لـ Anonymous User و Authenticated User.
• افعل الشيء نفسه بالنسبة لإذن "عرض المحتوى" لجميع أنواع الفقرات المتبقية التي أنشأناها: صورة مركزية ، وصورة مركزية مع تسمية توضيحية ، ومربع معلومات ، وإيجابيات وسلبيات.
• انقر فوق "حفظ الأذونات".

في هذه المرحلة ، يمكن لجميع المستخدمين عرض كافة محتويات الفقرات. لا تتردد في تسجيل الخروج وعرض الموقع كزائر مجهول للتأكيد.

الآن لإنشاء دور جديد لأولئك الذين سيضيفون ويحررون المحتوى على موقعنا.

• انتقل إلى الأشخاص ، وانقر على علامة التبويب "الأدوار" ، ثم انقر على "إضافة دور".
• أطلق على هذا الدور اسم "منشئ المحتوى".
• عد إلى صفحة الأدوار ، وانقر على سهم القائمة المنسدلة بجوار دور منشئ المحتوى ، وحدد "أذونات التعديل".
• هناك عدد غير قليل من الأذونات التي سنحتاجها لمنح المستخدمين لهذا الدور. بعض هذه ليست مرتبطة بالفقرات ، لكننا نقوم بتضمينها على أي حال لتقليد سيناريو العالم الحقيقي. بالإضافة إلى ذلك ، سيكون من الصعب اختبار الدور الجديد بشكل موثوق إذا لم يكن لديه جميع الأذونات التي سيكون لديه في الممارسة العملية. لاحظ أيضًا أننا نمنح هذه الأذونات على افتراض أن منشئو المحتوى لدينا يعملون جميعًا داخليًا. وهذا يعني أنه ليس لدينا أعداد كبيرة من المستخدمين المصادق عليهم تقنيًا ولكنهم ما زالوا مجهولي الهوية الذين ينشئون محتوى على موقعنا ، لذلك نشعر أنه يمكننا منح هؤلاء المستخدمين الإذن بأمان للقيام بأشياء مثل استخدام تنسيق نص HTML الكامل ، والذي في حالات أخرى القضايا من شأنها أن تسبب بعض المخاوف الأمنية.

فيما يلي قائمة الأذونات التي يجب منحها دور منشئ المحتوى:

تعليق

• تحرير التعليقات الخاصة
• اكتب تعليقا
• تخطي الموافقة على التعليق
• تعليقات عرض

اتصل

• عرض نموذج الاتصال على مستوى الموقع
• استخدم نماذج الاتصال الشخصية للمستخدمين

منقي

• استخدم تنسيق نص HTML الأساسي
• استخدم تنسيق نص HTML كامل
• استخدم تنسيق نص HTML المقيد

العقدة

• قم بالوصول إلى صفحة نظرة عامة على المحتوى
• إدارة المحتوى
• عرض المحتوى الخاص غير المنشور
• التراجع عن كافة المراجعات
• عرض جميع المراجعات
• عرض المحتوى الخاص غير المنشور
• المقال: قم بتحرير أي محتوى
• المقال: تحرير المحتوى الخاص
• المقال: التراجع عن المراجعات
• المقال: عرض المراجعات
• مربع المعلومات: أنشئ محتوى جديدًا
• مربع المعلومات: قم بتحرير أي محتوى
• مربع المعلومات: تحرير المحتوى الخاص
• مربع المعلومات: التراجع عن المراجعات
• مربع المعلومات: عرض المراجعات

الفقرات اكتب أذونات

امنح كافة الأذونات في هذا القسم باستثناء "التحكم في الوصول إلى المحتوى من نوع الفقرات".

بحث

• استخدم البحث المتقدم
• استخدم البحث

نظام

• استخدم صفحات الإدارة والمساعدة
• استخدم الموقع في وضع الصيانة
• عرض موضوع الإدارة

التصنيف

• تحرير المصطلحات في العلامات

شريط الأدوات

• استخدم شريط أدوات الإدارة

مستخدم

• عرض معلومات المستخدم

تأكد من النقر فوق "حفظ الأذونات" عند الانتهاء.

بعض الملاحظات حول بعض الأذونات التي حصلنا عليها ولم نمنحها هنا: لم نمنح الإذن بإدارة أنواع الفقرات لأننا لا نريدهم إنشاء أنواع فقرات جديدة أو تغيير طريقة عمل أنواع الفقرات الحالية. سيقومون ببساطة بإدخال المعلومات باستخدام أنواع الفقرات التي أنشأناها لهم كمطورين. بالإضافة إلى ذلك ، على الرغم من أنه في بعض الحالات يكون من الحكمة تجنب منح الأدوار غير الإدارية القدرة على حذف المحتوى (في معظم الحالات ، يكفي أن يتمكنوا من إلغاء نشر المحتوى ، وحذف المحتوى يجعله غير قابل للاسترداد) ، فنحن بحاجة لمنحهم إذنًا لحذف محتوى أنواع الفقرات ضمن "أذونات نوع الفقرات". يعد هذا ضروريًا لأنه إذا لم يتمكنوا من حذف هذا النوع من المحتوى ، وإذا نقروا بطريق الخطأ لإضافة أي محتوى عبر نوع فقرات لا يحتاجون إليه بالفعل في مقال معين ، فلن تكون هناك طريقة لهم لإزالة تلك الوحدة من محتوى من المقال. سيكون مشابهًا لعدم السماح باستخدام مفتاح Backspace.

لاختبار أذوناتنا الجديدة ، سننشئ مستخدمًا جديدًا لدور منشئ المحتوى وسنواصل عملية إضافة مقال جديد بصفته هذا المستخدم.

• انتقل إلى الأشخاص ، وانقر على "إضافة مستخدم".
• قم بإنشاء مستخدم باسم Mary (يمكنك تخطي عنوان البريد الإلكتروني) ، بكلمة مرور يمكنك تذكرها بسهولة.
• تأكد من وضع علامة على حالة المستخدم على أنها "نشط" ، والأهم من ذلك ، تأكد من التحقق من دور "منشئ المحتوى" لهذا المستخدم.
• ثم انقر فوق "إنشاء حساب جديد".
• تسجيل الخروج ، وتسجيل الدخول مرة أخرى باسم ماري. إذا تم تعيين الأذونات بشكل صحيح ، فيجب أن يكون لديك حق الوصول إلى شريط أدوات المسؤول.
• انقر فوق "إدارة" في شريط الأدوات إذا كنت لا ترى الروابط الإدارية ("المحتوى" ، "الهيكل" ، إلخ).
• ثم انتقل إلى المحتوى ، وأضف جزءًا جديدًا من المحتوى من نوع المقالة. ص
• يمكنك عنونة هذا المقال "القرنبيط عظيم بالنسبة لك".
• أضف حقل نص أساسي ، وأدخل بعض النص.
• يجب عليك بعد ذلك الانتقال ومحاولة إضافة محتوى من كل نوع فقرات أنشأناه: صورة مركزية ، صورة مركزية مع تسمية توضيحية ، مربع معلومات ، وإيجابيات وسلبيات.
• بعد القيام بذلك ، احفظ المقال واعرضه. يجب أن تكون هذه العملية الكاملة هي نفسها عندما فعلنا ذلك كمسؤول عن الموقع ، ومن المفترض أن تتمكن بعد ذلك من عرض كل المحتوى دون أي مشكلة.

إذا لم يكن لديك خيار إضافة واحد أو أكثر من هذه ، أو إذا واجهت مشاكل أخرى أثناء محاولتك القيام بذلك ، فربما تكون قد فاتتك واحدًا أو أكثر من الأذونات الضرورية عند منحها لدور منشئ المحتوى. ارجع إلى أذونات منشئ المحتوى ، وتأكد من منحهم جميع الأذونات كما هو مذكور أعلاه - خاصة تلك الموجودة تحت عنوان "أذونات نوع الفقرات".

اختتام البرنامج التعليمي للفقرات

بمجرد تأكيد أنه يمكنك إنشاء وعرض المحتوى باستخدام محتوى فقرات كمنشئ محتوى ، تكون قد أكملت هذا البرنامج التعليمي. في هذه المرحلة ، يجب أن يكون لديك فهم لسبب وكيفية استخدام وحدة الفقرات.

للتلخيص ، تكمن فائدة هذه الوحدة في قدرتها بالنسبة لنا على تحديد مكونات محتوى خاصة داخل المقالة ، مثل مربعات المعلومات التكميلية والصور المركزة مع التسميات التوضيحية ، دون إجبار منشئي المحتوى على تجربة تصميم الأشياء بأنفسهم.

باستخدام الفقرات ، يُطلب منهم ببساطة تقديم محتوى هذه الأجزاء من مقالاتنا ، ويمكننا كمطورين كتابة قواعد على مستوى الموقع (باستخدام CSS) لكيفية عرض هذا المحتوى. هذا يجعل عملية إنشاء المحتوى أسهل للمستخدمين غير التقنيين ، ويجعل مظهر هذا المحتوى أكثر تناسقًا للمستخدمين التقنيين وغير التقنيين على حد سواء.