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

[Discourse]

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

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

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

الإعدادات

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

• فئة المدونة: جزء عنوان URL الخاص بالفئة التي يجب أن تستخدم تنسيق منشور المدونة. لإضافتها إلى أكثر من فئة واحدة، استخدم قائمة مفصولة بفواصل بدون مسافات (على سبيل المثال: blog,announcements). للعثور على الجزء:

  • بالنسبة للفئات، خذ مسار عنوان URL بعد /c/ - لذا بالنسبة لـ /c/blog/، يكون الجزء هو blog.
  • بالنسبة للفئات الفرعية، خذ مسار عنوان URL بعد /c/ واستبدل أي / بـ -. على سبيل المثال، الفئة الموجودة في /c/blog/tutorials تصبح blog-tutorials.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الملخصات

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

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

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

اقتباسات منسقة

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

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

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

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

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

ملاحظة: مكون الصور المصغرة لقائمة المواضيع غير متوافق مع سمة 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)]

Update

If you can believe it

I have started refactoring/cleaning up the component to use the plugin-style file structure and make use of the new topic thumbnails.

https://github.com/discourse/discourse/pull/9215

I’ve added a couple new features as well:

• New settings

  • image_display_style - there are two options with this. The default should be the behavior the component has had all along. The alternative will ensure there is no cropping and the full image is displayed. It’s hard to say which one is “better” so you’ll want to do some experimentation and see what works best for your workflow and blog images.

    

  • mobile_enabled - this is a first pass on the mobile blog post style. I’m interested to hear any bug reports or ideas for improvements on this!

    

I still want to continue refactoring and cleaning up the code, but this should be a good start.

https://github.com/tshenry/discourse-blog-post-styling/commit/eba3c52fc1f9b273d34e9d673567410e4566372e

---

@Varhall

It would be cool to add schema.org markup for this type of topic. There is in the plans?

No plans at this point, I’m afraid!

[torstensson (Per Torstensson)]

Thank you for a really inspiring and nice component @tshenry

In my evaluation I have identified two issues;

1. No blog image in sub categories - after quite extensive troubleshooting with different themes and enabling/disabling both plugins and other components, I think I can state with near certainty that blog images won’t render for sub categories. The first image/the intended blog image is however still hidden.

2. First image not hidden inline with DiscoTOC - When Blog Post Styling is used together with DiscoTOC, the blog image get rendered above the title correctly - however, it is rendered twice as it is still rendered in its original position as well.

[tshenry (Taylor)]

Thanks so much for the feedback @torstensson! Both points were indeed bugs and should now be fixed:

Bug fixes

Please let me know if you continue to have any issues.

---

To everyone using this component:

If you are not currently including a featured image at the top of all blog posts, this is for you!

This component was created with the intention of having an image display above every blog post topic. With that said, it was possible to create a blog post without displaying a featured image by simply not including an image on the first line of the post. This behavior has changed.

The newer implementation greatly improves performance, but it uses a predefined value rather than looking at the post contents itself. The predefined value is generated from the first image found in the post. Unlike before, it is not necessarily limited to an image appearing as the first line of the post. This means if you create a post without an image on the first line, but you include a single image at the bottom of the post, that image at the bottom will now also be displayed above the topic.

I have included an all-or-nothing setting that can toggle on/off the “featured image,” allowing you to have all of the styling except for the featured image if that is your preference.

I am going to update the OP with all of the new considerations and recommendations, but the short of it is to make sure to include an image on the first line of the post (this positioning is still used to make sure the image is not repeated). You may find it is helpful to use a placeholder image in the category’s topic template that can be used as a default if no image is provided.

[torstensson (Per Torstensson)]

@tshenry

Thanks so much for the feedback @torstensson! Both points were indeed bugs and should now be fixed. Please let me know if you continue to have any issues.

Awesome, thank you @tshenry I can gladly confirm that both issues have been resolved with the update and again - thank you for a really great component, not only in function but inspiration as well

[core]

A recently announced feature may work as an alternative to this theme-component. Leaving it here for those interested.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff/Admin 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: Admin Publishing static pages on Discourse Page Publishing allows Admin users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy P…

[nityeshaga (Nityesh Agarwal)]

@tshenry Thanks so much for this component! We are using it along side the Topic List Previews plugin to create an Articles section for students in the Dataquest Community.

I have a feature request for you to consider in future iterations of this component - Can you please add the ability to add Canonical URLs to the articles?

Search engines use canonical links to determine and prioritize the ultimate source of content, removing confusion when there are multiple copies of the same document in different locations.

Thanks!

[sebastianh (Rebastion)]

So I think this is a great component. In fact I am now trying it out on a live Discourse and I am playing around with it. Without any kind of order, I want to provide my initial thoughts and feedback, hope it helps - forgive me if some of them might be more of a question:

• The way the author is displayed is a bit out of place and could maybe be solved more space-efficient, to tie it in closer with the title, or category tag etc… there is also rather much white space between the line that ends the author info and the beginning of the text
• It is hard for a vistor sent directly to a blog post to realize where you are, as there is no clear breadcrumb or anything. The main reason is, that the title bar seems to be turned inactive, whereas on normal topics they transform and include the title, category etc.
• Would be great if the category view could have more of a blog look, with small preview images and such, would that be hard to do?
• I don’t see a category description in the category view?

[sebastianh (Rebastion)]

@nityeshaga

an Articles section for students in the Dataquest Community .

wow what theme component is used for that category view? Looks cool

[tshenry (Taylor)]

Thanks for the feedback

@sebastianh

• The way the author is displayed is a bit out of place and could maybe be solved more space-efficient, to tie it in closer with the title, or category tag etc… there is also rather much white space between the line that ends the author info and the beginning of the text

I do agree there is a lot of white space around the author/title area. I’ll keep this feedback in mind next time I work on the component and see if I can come up with something.

@sebastianh

It is hard for a vistor sent directly to a blog post to realize where you are, as there is no clear breadcrumb or anything. The main reason is, that the title bar seems to be turned inactive, whereas on normal topics they transform and include the title, category etc.

I’m not 100% sure what you mean here. The header will switch to include the title/breadcrumbs once you scroll down past the image and blog title. You are correct that at the top of the page, it’s not especially obvious, though. I’ll keep this in mind as well.

@sebastianh

• Would be great if the category view could have more of a blog look, with small preview images and such, would that be hard to do?
• I don’t see a category description in the category view?

These would be out of scope for this component. For the category view, you might want to take a look at: Topic List Thumbnails

[sebastianh (Rebastion)]

Thanks for the feedback I think most of it is cleared up, and I also do see the category description now, not sure why it wasn’t visible earlier, I thought it had something to do with the component. I will keep trying this out and post more feedback later. Excellent work!

[sebastianh (Rebastion)]

I think the excess space at the top comes from space remaining after the picture is “moved” to the header of the blogpost, resulting not in space below gained, but being empty.

But I noticed an actual problem: If I post links to such a blog post in other topics, there is no thumbnail, see here

[sebastianh (Rebastion)]

@sebastianh

I think the excess space at the top comes from space remaining after the picture is “moved” to the header of the blogpost, resulting not in space below gained, but being empty.

Here is a screenshot of what I mean:

[tshenry (Taylor)]

I’m fairly sure this is due to you excluding a line break between the image upload link and the first paragraph. Can you try editing it to match the following:

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

<big>While</big> there is ample space around the web to post and blog and share and tweet and all that, my favorite place to exchange ideas with all of you on the spaghetti western is this forum. Some of you might remember an effort dating back several years ago, it was called "Planet Spaghetti Western", and the idea was to have a blog, that would automatically aggregate posts from all the spaghetti western blogs around the internet, and present them sort of as a digest. It was rather complicated from a technical perspective and in the end more work than it was worth so I had to shut that down.

If that works, I’ll add a note in the OP about that requirement.

[sebastianh (Rebastion)]

Hi. That reduces the margin a bit, indeed, thank you. I had done the exact opposite in the editor: leave as little space between the image and the beginning of the text