تنسيق منشورات المدونة

[Discourse]

	ملخص	يتيح لك مكون “تنسيق منشورات المدونة” تحديد فئة مدونة، مما يغير مظهر المواضيع ضمن هذه الفئة لتبدو أشبه بمنشورات المدونات التقليدية.
	معاينة	معاينة على theme-creator.discourse.org
	المستودع	github.com/discourse/discourse-blog-post-styling
	جديد في قوالب Discourse؟	دليل المبتدئين لاستخدام قوالب Discourse

تثبيت مكون القالب هذا

يحوّل مكون قالب “تنسيق منشورات المدونة” مواضيع Discourse إلى تخطيط تقليدي لمنشورات المدونات. عند تطبيقه على فئة معينة، يتم ترقية الصورة الأولى في كل موضوع لتصبح صورة رئيسية بعرض كامل فوق العنوان، ويتم تنسيق المحتوى بخطوط وعرض بيانات وصفية مناسبة للمدونات.

الإعدادات

إليك الإعدادات المختلفة المرتبطة بمكون القالب هذا:

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

• وسم المدونة: اختر وسمًا واحدًا أو أكثر، وعند تطبيقه على موضوع ما، سيتم تطبيق تنسيق منشورات المدونة عليه.

• حجم الصورة: حدد كيفية ملء الصورة الرئيسية لمنطقة الرأس:

  • بدون صورة: إخفاء الصورة المميزة.
  • عرض كامل (الافتراضي): تمتد الصورة على كامل منطقة المحتوى.
  • مركّزة: تحافظ الصورة على نسبة أبعادها وتُوسّط في منطقة المحتوى.

• موضع الصورة: حدد مكان عرض الصورة بالنسبة للعنوان:

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

• تمكين الحرف الأول الكبير (Dropcap): عند التفعيل، سيظهر الحرف الأول في منشور المدونة بتنسيق مكبر، على النحو التالي:
  
  
• تمكين للجوال: عند التفعيل، يتم تطبيق تنسيق منشورات المدونة عند قراءة الموضوع على أجهزة الجوال.

كتابة منشور مدونة

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

الصورة المميزة

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

![وصف الصورة|1100x440](upload://your-image-hash.jpg)

يبدأ محتوى منشورك هنا...

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

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

نصائح حول حجم الصورة

حاوية الصورة ارتفاعها 440 بكسل وعرضها 100%. للحصول على أفضل النتائج عند ضبط إعداد حجم الصورة على عرض كامل:

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

الملخصات

عند ضبط إعداد موضع الصورة على تحت العنوان، يمكنك إضافة ملخص اختياري لمنشور المدونة الخاص بك، سيظهر بين العنوان والصورة المميزة.

للقيام بذلك، قم بتغليف المحتوى الذي تريد أن يظهر في ملخصك على النحو التالي:

[summary] هذا هو المحتوى الذي سيكون ملخصك. [/summary]

اقتباسات بتنسيق خاص

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

إعداد الفئة الموصى به

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

تنسيق منشورات المدونة + صور مصغرة لقائمة المواضيع

هذا المكون متوافق مع صور مصغرة لقائمة المواضيع، والذي يسلط الضوء على الصورة المميزة لمنشور المدونة الخاص بك في قائمة المواضيع:

ملاحظة: مكون صور مصغرة لقائمة المواضيع غير متوافق مع قالب Horizon. تم استخدام لقطة الشاشة أعلاه مع قالب Foundation.

[amotl (Andreas Motl)]

@amotl

After bumping the defined sizes manually just slightly in the markup, the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.

---

JeeLink

[ohellno]

Hello, and thank you very much for dedicating the time to create this and release it for free.

I was just wondering if it would be at all possible to change this somehow to use a specific tag instead of a particular category?

I just setup a new discourse website but I’ve been writing a lot of “blog posts” but I would still like these to show up in the appropriate other categories in order to make it seem a little more integrated.

Currently I have been posting them in their own blog-posts category, which I limited to just me being able to post in there, but I just setup a tag group and made that only accessible to staff.

Thanks again!

[Howaids (Martin)]

Thanks very much @tshenry. Your theme components have all been spot on.And to @sam and @codinghorror for sharing an incredible app!! Your generosity including the support in meta is heartfelt. Discourse is indeed made for the more caring internet of the future.

[LoganRTW (Ward)]

Is there a way to make this work with a video as the featured content rather than the image? I would delete my wordpress site if I could just post the YouTube/Vimeo etc. and have that be the top content. Any ideas?

[Howaids (Martin)]

Totally! Great suggestion @LoganRTW. It’s got my vote @tshenry. Can it be done?

[tshenry (Taylor)]

تحديث

إذا كنت تستطيع تصديق ذلك

لقد بدأت في إعادة هيكلة وتنظيف المكون لاستخدام هيكل ملفات بأسلوب الإضافات والاستفادة من الصور المصغرة الجديدة للمواضيع.

FEATURE: Include optimized thumbnails for topics (#9215)

كما أضفت ميزات جديدة أيضًا:

• إعدادات جديدة

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

    

  • mobile_enabled - هذا هو المسودة الأولى لأسلوب منشورات المدونة على الأجهزة المحمولة. أنا مهتم جدًا لاستقبال أي تقارير عن أخطاء أو أفكار لتحسينات في هذا الصدد!

    

ما زلت أرغب في مواصلة إعادة الهيكلة وتنظيف الكود، لكن هذا يجب أن يكون بداية جيدة.

Introduce mobile, image display options, and refactor

---

@Varhall

سيكون رائعًا إضافة ترميز schema.org لهذا النوع من المواضيع. هل هو ضمن الخطط؟

لا توجد خطط في الوقت الحالي، للأسف!

[torstensson (Per Torstensson)]

شكرًا لك على هذا المكون المُلهم والرائع @tshenry

في تقييمي، حددت مشكلتين:

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

2. الصورة الأولى غير مخفية بما يتوافق مع DiscoTOC - عند استخدام تنسيق منشورات المدونة مع DiscoTOC، تظهر صورة المدونة فوق العنوان بشكل صحيح - ومع ذلك، يتم عرضها مرتين لأنها تُعرض أيضًا في موقعها الأصلي.

[tshenry (Taylor)]

شكرًا جزيلاً لك على الملاحظات @torstensson! كانت كلتا النقطتين بالفعل أخطاءً، ويجب أن تكون قد تم إصلاحهما الآن:

Bug fixes

يرجى إخباري إذا استمرت لديك أي مشاكل.

---

لجميع المستخدمين لهذا المكون:

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

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

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

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

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

[torstensson (Per Torstensson)]

@tshenry

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

رائع، شكرًا لك يا @tshenry يمكنني بالتأكيد تأكيد أن كلا المشكلتين قد تم حلهما مع التحديث ومرة أخرى - شكرًا لك على مكون رائع حقًا، ليس فقط من حيث الوظيفة ولكن أيضًا من حيث الإلهام

[core]

قد تعمل ميزة أُعلن عنها مؤخرًا كبديل لهذا المكون من السمات. نتركها هنا لمن يهتم بذلك.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry شكرًا جزيلاً لك على هذا المكون! نحن نستخدمه جنبًا إلى جنب مع إضافة معاينات قائمة المواضيع لإنشاء قسم مقالات للطلاب في مجتمع Dataquest.

لدي طلب ميزة أود أن تنظر فيه في الإصدارات المستقبلية من هذا المكون: هل يمكنك إضافة إمكانية إضافة عناوين URL الأساسية للمقالات؟

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

شكرًا لك!

[sebastianh (Rebastion)]

لذا أعتقد أن هذا مكون رائع. في الواقع، أنا الآن أجربه على موقع Discourse مباشر وأقوم بتجربته. دون أي ترتيب محدد، أود تقديم أفكاري الأولية وملاحظاتي، آمل أن تكون مفيدة - سامحني إذا كانت بعضها أكثر من مجرد أسئلة:

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

[sebastianh (Rebastion)]

@nityeshaga

في قسم المقالات لطلاب مجتمع Dataquest.

واو، ما هو مكون المظهر المستخدم لعرض هذه الفئة؟ يبدو رائعًا

[tshenry (Taylor)]

شكرًا على ملاحظاتك

@sebastianh

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

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

@sebastianh

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

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

@sebastianh

• سيكون رائعًا لو كانت عرض الفئات يملك مظهرًا يشبه المدونات أكثر، مع صور معاينة صغيرة وما شابه، هل سيكون ذلك صعب التنفيذ؟
• لا أرى وصفًا للفئة في عرض الفئات؟

هذه الميزات ستكون خارج نطاق هذا المكون. بخصوص عرض الفئات، قد ترغب في إلقاء نظرة على: Topic List Thumbnails

[sebastianh (Rebastion)]

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

[sebastianh (Rebastion)]

أعتقد أن المساحة الزائدة في الأعلى ناتجة عن المساحة المتبقية بعد “نقل” الصورة إلى رأس منشور المدونة، مما لا يؤدي إلى اكتساب مساحة في الأسفل، بل يتركها فارغة.

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

[sebastianh (Rebastion)]

@sebastianh

أعتقد أن المساحة الزائدة في الأعلى ناتجة عن المساحة المتبقية بعد “نقل” الصورة إلى رأس تدوينة المدونة، مما لا يؤدي إلى كسب مساحة في الأسفل، بل يتركها فارغة.

إليك لقطة شاشة لما أعنيه:

[tshenry (Taylor)]

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

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<big>بينما</big> يتوفر مساحة واسعة على الويب للنشر والكتابة والمشاركة والتغريد وكل ذلك، فإن مكاني المفضل لتبادل الأفكار معكم جميعًا حول السباغيتي الغربي هو هذا المنتدى. قد يتذكر بعضكم جهدًا يعود إلى عدة سنوات مضت، كان يُسمى "كوكب السباغيتي الغربي"، وكانت الفكرة هي إنشاء مدونة تقوم تلقائيًا بتجميع المنشورات من جميع مدونات السباغيتي الغربي حول الإنترنت، وتقديمها بشكل موجز. كان الأمر معقدًا إلى حد ما من الناحية التقنية، وفي النهاية كان أكثر جهدًا مما يستحق، لذا اضطررت إلى إيقافه.

إذا نجح ذلك، سأضيف ملاحظة في المنشور الأصلي (OP) حول هذا الشرط.

[sebastianh (Rebastion)]

مرحباً. هذا يقلل الهامش قليلاً بالفعل، شكرًا لك. لقد قمت بالعكس تمامًا في المحرر: ترك مساحة قليلة بين الصورة وبداية النص