استخدام عناوين H1 مقابل H2 في المحرر

عند استخدام عنوان ماركداون من المستوى الأول (#) في موضوع، هل سيؤدي ذلك إلى إنتاج h1 أم h2 في مخرجات HTML؟

إعجاب واحد (1)

سيُخرج <h1> :slight_smile:

إعجاب واحد (1)

إذًا هل هذا يعني أن ديسكورس يفترض أنه من الجيد وجود علامات <h1> متعددة في الصفحة؟ ألا يبدو أنه إذا كان عنوان الموضوع هو h1، فيجب أن تكون العناوين من المستوى الأول داخل هذا الموضوع h2 افتراضيًا، أليس كذلك؟

إعجاب واحد (1)

لا يفترض Discourse أي شيء، بل سيُخرج ما تطلبه منه أن يخرجه.
من الأفضل من الناحية العملية استخدام ## استخدام ### كعناوين رئيسية داخل منشور بالتأكيد :slight_smile:

تعديل: انظر Use of H1 vs. H2 headings in composer - #16 by Canapin

إعجابَين (2)

هذا بالتأكيد بعض “تثقيف المستخدم” الذي أعتقد أنه يمكننا توفيره على أنفسنا بعدم جعل # عنوانًا من المستوى الأول… :anxious_face_with_sweat:

هل تعرف ما إذا كانت هناك أي طريقة لتغيير ذلك؟ أو على الأقل إخفاء العناوين من المستوى الأول في شريط الأدوات؟ (أفترض أن الأشخاص الذين يكتبون مباشرةً في Markdown هم هدف تعليمي واقعي…)

إعجاب واحد (1)

نعم، الأمر بسيط للغاية. يحتوي عنصر القائمة على السمة data-name="heading-1" التي يمكنك استهدافها باستخدام CSS :slight_smile:

إعجاب واحد (1)

هه - كنت أبحث في الأمر للتو أيضًا. في اختبار سريع، يخفي هذا خيار H1 في كل من محرر النصوص العادي ومحرر النصوص المنسق:

button[data-name="heading-1"] {
  display: none;
}

(قد أحتفظ بهذا! لا أرى سببًا كبيرًا لتقديم H1 في المحرر.)

إعجابَين (2)

أفهم وجهة نظرك، ولكن هذا ليس شيئًا قرره Discourse بشكل قاطع. يتبع Discourse اصطلاحًا خاصًا بلغة ماركداون يسمى CommonMark، وهو يحدد أنه يجب تحويل # إلى H1. أعتقد أن هذا الاصطلاح لكيفية تحويل عناوين ماركداون إلى علامات HTML هو أمر قياسي جدًا عبر مواصفات ماركداون الرئيسية.

إعجابَين (2)

حسنًا، وجود عنوانين <h1> ليس سؤالًا كبيرًا في الواقع. إنها نكتة قديمة في مجال تحسين محركات البحث (SEO) لم تعد مشكلة منذ فترة طويلة. جوجل وما شابه سيستخدمون الأول أو ما يعتقدون أنه الأنسب.

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

ومع ذلك، من الأنسب استخدام ##/<h2> في المشاركات. ولكن بما أنه لا يلعب أي دور فعلي، فإن رأيي هو أنه من الأفضل للمستخدمين استخدام بعض العناوين التي يتجنبون فيها تلك العناوين لأنهم يخشون استخدام العناوين “الخاطئة” :man_shrugging:

إعجابَين (2)

قد تكون العناوين مجرد إشارة صغيرة لتحسين محركات البحث (SEO) اليوم - لكني ما زلت أكره وجود عناوين H1 متعددة لأنني مهووس بالتفاصيل. :nerd_face:

أفكر أيضًا في كيفية إنشاء ستيف لوثائق قابلة للطباعة لنشر الصفحات، حيث يتم عرض عناوين H1 في المنشور بحجم أكبر حتى من عنوان H1 العلوي للصفحة:

صورة

جعلها H2 سيحافظ على حجمها أصغر قليلاً من عنوان H1 العلوي:

صورة

إعجاب واحد (1)

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

(ملاحظة جانبية: هل تعرض لك الوثيقة باللغة الإنجليزية دون أي تدخل منك؟!؟)

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

(واستخدمت أداة الترجمة في متصفح الويب للحصول على اللغة الإنجليزية.)

إعجاب واحد (1)

أنا أتفق. ولكن لا ينبغي أن نتوقع من أعضاء المجتمع أن يعرفوا ذلك، في رأيي.

نعم – ولا أرى أي سلبيات في مجرد إخفاء خيار H1.

على الرغم من أنني لا أرى استخدامًا كبيرًا للعناوين من قبل معظم المستخدمين الذين ينشرون منشورات نموذجية. من المحتمل أن يكون لدى الأشخاص الذين ينشئون مواضيع توثيق أطول (أو سيحصلون على ذلك قريبًا) القليل من الخبرة مع ## وأيقونة “TT” تلك.

(أيضًا: لاحظت للتو هذا النقاش القديم المثير للاهتمام حيث يُقترح أنه يجب استخدام العناوين في المواضيع فقط، ومنعها في الردود: تعطيل الرؤوس في الردود مثل h1 و h2)

إعجابَين (2)

أيضًا: لاحظت للتو هذا النقاش القديم المثير للاهتمام حيث يُقترح أن تُستخدم العناوين فقط في المواضيع، ويُحظر استخدامها في الردود: تعطيل العناوين في الردود مثل h1 و h2

إذا كان هذا يثير اهتمام أي شخص، فإن هذه المقتطفة الصغيرة تخفي تمامًا أيقونة العنوان “TT” في مُنشئ الرد فقط عند الرد على:

.composer-action-reply button.heading {
  display: none;
}
إعجاب واحد (1)

العناوين ليست فقط لأغراض تحسين محركات البحث (SEO) ولكن أيضًا لأمور إمكانية الوصول.

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

تحتوي المواضيع على عناوينها <h1>، ولكن تتم إضافة كل رد مسبوقًا بعنوان <h2> مخفي خاص به، ويكون مرئيًا لقارئات الشاشة:

<h2 aria-hidden="false" class="sr-only" id="post-heading-9">
  post by Jagster 4 hours ago
</h2>

لذا، في أي حال، عندما تنشر عنوانًا <h1> أو <h2> في المحتوى الخاص بك، فسيكون دائمًا تابعًا لعنوان <h2> موجود مسبقًا :upside_down_face:

أعتقد أن استخدام العناوين التي تزيد عن <h3> في المشاركة قد يجعل التنقل عبر قراءة الشاشة غريبًا بعض الشيء.

على الرغم من أنه ليس متسقًا تمامًا بين المواضيع الحالية، إلا أن قوالب المشاركات من Customization > Plugin تستخدم <h3> كعناوين عليا:

| | | |
| - | - | - |
| :information_source: | **Summary** | In a few words, what does this plugin do? |
| :hammer_and_wrench: | **Repository Link** | <> |
| :open_book: | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

<br>  

### Features
 
Describe the major features of the plugin
 
### Configuration

Include detailed steps on how to configure the plugin (include screenshots where necessary)

### Settings 

Include a table of settings and setting descriptions

| Name | Description
|-|-|
|

ومن المثير للاهتمام أن هذا ليس هو الحال بالنسبة لقوالب Customization > Theme و #customization:theme-component، ولكن قوالبها لا تحتوي على أي عناوين. ربما ينبغي تغيير ذلك.

4 إعجابات

أتفق. أنا أيضاً مهووس قليلاً وأحب أن يكون تسلسل العناوين لدي نظيفاً.
لذا في الواقع، في المنشور يجب أن نستخدم فقط h3 h4 h5 إذا أردنا القيام بالأشياء بشكل صحيح - قد يكون من المثير للاهتمام أن يكون لدينا نوع من مكون السمة الذي “يصلح” ذلك، مما يعني إزالة مستويات العناوين الأعلى من الأزرار و “ترجمة” التنسيق لـ h3 وما دونها في المواضيع لتبدو صحيحة عندما نستخدمها…؟

هناك أيضًا h6 في حال احتجت إلى مستوى آخر في المنشورات، ولكنه صغير جدًا

H5 أصغر أيضًا من النص العادي في المنشور، لذلك لست متأكدًا مما إذا كنت سأستخدمه

هذا هو h5
إعجابَين (2)

آه، لم أكن أدرك ذلك! ربما يفسر تعليق Pfaffman بأن “المستوى الأول من العنوان في المشاركة يجب أن يكون h3” [1]
إذًا، يصبح الحل البديل لـ CSS:

button[data-name="heading-1"], button[data-name="heading-2"] {
  display: none;
}

شكرًا لاهتمامك بإمكانية الوصول – أنا أعمل على أخذ ذلك في الاعتبار.


  1. المصدر ↩︎

3 إعجابات

يمكنك بالتأكيد تعديل الأنماط لـ H3-5… أو قد تكون جيدة كما هي:

إعجابَين (2)