ربط إلى عنوان داخل مشاركة أو موضوع

[Discourse]

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

مستوى المستخدم المطلوب: جميع المستخدمين

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

ملخص

يغطي هذا الدليل:

• إنشاء العناوين الفرعية باستخدام Markdown
• الربط مباشرةً بعناوين فرعية محددة في مشاركة

إنشاء العناوين الفرعية باستخدام Markdown

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

## هذا عنوان من المستوى 2
هنا فقرة قصيرة تلي ذلك.

### هذا عنوان من المستوى 3
هنا فقرة قصيرة أخرى.

عند عرضه، يبدو الأمر كالتالي:

---

هذا عنوان من المستوى 2

هنا فقرة قصيرة تلي ذلك.

هذا عنوان من المستوى 3

هنا فقرة قصيرة أخرى.

---

الربط مباشرةً بعنوان فرعي

لمشاركة رابط مباشر إلى عنوان فرعي داخل مشاركة:

1. مرر مؤشر الماوس فوق العنوان الفرعي للكشف عن أيقونة الرابط بجواره: .
2. انقر فوق أيقونة الرابط لتحديث عنوان URL في شريط عناوين متصفحك بالرابط المباشر لذلك العنوان الفرعي.
3. انسخ عنوان URL المحدَّث من شريط العناوين لمشاركته مع الآخرين.

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

فهم عناوين الإرساء (Anchor URLs)

عند النقر فوق أيقونة الرابط الخاصة بالعنوان الفرعي، يتم تحديث عنوان URL في شريط العناوين الخاص بك بـ “جزء” (fragment) بالتنسيق:

#p-{postId}-{slugified-heading}-{number}

على سبيل المثال، قد ينتج عن عنوان فرعي “البدء” في المشاركة رقم 12345 جزء عنوان URL مثل #p-12345-getting-started-1. الرقم الموجود في النهاية هو عداد تسلسلي يعتمد على موضع العنوان الفرعي في المشاركة.

أفضل الممارسات

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

الأسئلة الشائعة

هل يمكنني الربط بأي جزء من المشاركة؟
يمكنك الربط بأي عنوان فرعي مُنسَّق بشكل صحيح في Markdown، طالما أنه ليس داخل اقتباس أو كتلة اقتباس. العناوين الفرعية داخل تلك الكتل لا تُنشئ روابط إرساء.

هل تعمل الروابط إلى العناوين الفرعية عبر مشاركات مختلفة؟
نعم! ستوجه هذه الروابط إلى العنوان الفرعي في المشاركة عند استخدامها في مواضيع أخرى أو مشاركتها في أي مكان آخر.

موارد إضافية

• التنسيق المدعوم في المشاركات (markdown و BBCode و HTML)
• دليل Markdown التفاعلي

[one1]

أنا لا أرى أيقونات الروابط على هذا الموقع أو على موقعي الخاص. لا في FF ولا في Chrome.

هل هناك شيء تغير؟

[pfaffman (Jay Pfaffman)]

تحتاج إلى تحريك مؤشر الفأرة فوق العنوان لتظهر:

[one1]

عندما أحرك مؤشر الماوس، لا أرى شيئًا.

يبدو أن هناك شيئًا ما موجودًا، ولكن لا يتم عرض أي أيقونة.

سؤال للمتابعة…

أفترض أنه إذا قمت بتغيير نص العنوان، فسوف ينقطع الرابط.

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

الحل الآمن الوحيد هو وضع العناوين في وسوم a لغة HTML وإعطائها مُعرّف (id)، صحيح؟

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

[one1]

نعم، يمكنني العثور عليه في الـ DOM كـ before:

أنا على نظام التشغيل Windows 11.
الطريقة الوحيدة التي يمكنني من خلالها جعل أيقونة الرابط تظهر هي عن طريق نسخ الرابط ثم فتح هذا الرابط (مع الـ # والـ id) في علامة تبويب جديدة والانتقال إليه. عندها تظهر أيقونة الرابط بشكل دائم (بدون تحويم) ولكن لا تزال أيقونات الروابط الأخرى لا تظهر عند التحويم.

[one1]

هل يُسمح لي برفع هذا الموضوع؟ أتساءل عما إذا كنت أغفل شيئًا واضحًا بشأن الربط داخل المشاركة.

[markschmucker (Mark S)]

@one1

أمرر الماوس فوقه ولا أرى شيئًا.

يبدو أن هناك شيئًا ما هناك، ولكن لا يتم عرض أيقونة.

لدي نفس المشكلة. الأيقونة موجودة، ولكن تم تعيين شفافيتها على صفر، لذا فهي غير مرئية.

.cooked h1 a.anchor, .cooked h2 a.anchor, .cooked h3 a.anchor, .cooked h4 a.anchor, .cooked h5 a.anchor, .cooked h6 a.anchor, .d-editor-preview h1 a.anchor, .d-editor-preview h2 a.anchor, .d-editor-preview h3 a.anchor, .d-editor-preview h4 a.anchor, .d-editor-preview h5 a.anchor, .d-editor-preview h6 a.anchor

Specificity: (0,2,2)

{

opacity: 0;

transition: opacity .25s;

}

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

أنا أستخدم كروم (Chrome).

[markschmucker (Mark S)]

كمسألة منفصلة، أجد أن الرابط الذي يوفره الرمز (غير المرئي) لا يعمل من نفس الموضوع. إذا أعطاني الرمز:

https://forum.example.com/t/testing-anchors/63647#p-311503-heading-1

يجب عليّ إنشاء الرابط الخاص بي باستخدام #p-311503-heading-1 فقط، وليس الرابط الكامل. الرابط الكامل يعمل إذا قمت بلصقه في المتصفح.