المتطلبات
لكي تتمكن من استخدام هذه النصائح والحيل، يجب أن تكون مديرًا إما لنسخة Discourse مُستضافة ذاتيًا أو لباقة Discourse-hosted أعلى من Basic.
مقدمة
يدعم Discourse عدة طرق لتنسيق وتخصيص محتوى المنشور. يمكنك العثور على القائمة هنا:
لكن أحيانًا، قد ترغب في شيء أكثر تحديدًا، على سبيل المثال، رابط يبدو كزر.
هذا هو نوع التعديل الذي سنتعلمه هنا.
المنطق
سأشرح بإيجاز المنطق وراء ذلك، لكن يمكنك الانتقال إلى الخطوة التالية والقفز إلى مثال عملي 
يتيح Discourse أي سمة HTML تبدأ بـ data- في محتوى المنشور.
هذه هي السمات التي سنستهدفها باستخدام CSS لتخصيص المحتوى الخاص بنا.
سأسميها سمات data- في هذا الدرس
واحدة من الطرق لإنشاء عناصر بهذه السمات هي وسم يشبه BBcode: [wrap]، سنضيف إليه قيمة من اختيارنا. هنا نختار “button” (يمكن أن يكون أي شيء آخر، حتى اسم قطتك 
):
[wrap=button]some text[/wrap]
سيؤدي هذا إلى إخراج عنصر HTML يحمل السمة التالية: data-wrap="button".
المثال الأول: خلفية وردية
لنبدأ بمثال عملي. سنقوم بإنشاء نص بخلفية وردية.
كعنصر كتلة (Block)
في منشورك، على سطر فارغ، اكتب:
[wrap=pink]pink text[/wrap]
سيؤدي هذا إلى إنشاء عنصر div يحمل السمة data-wrap="pink".
ثم، أضف كود CSS التالي إلى سمتك.
اذهب إلى لوحة الإدارة → التخصيص → السمات → سمتك → تحرير CSS/HTML → CSS.
ضع كود CSS التالي داخله:
[data-wrap="pink"] {
background: pink;
}
ثم انقر على زر الحفظ.
عد إلى منشورك، وشاهد النتيجة:
نعم، إنها جميلة بالفعل 
ستلاحظ أن الخلفية تغطي عرض المنشور بالكامل. لأن الـ wrap الخاص بنا هو العنصر الوحيد في سطره، فإنه يُخرج عنصر كتلة (block).
يمكنك معرفة المزيد عن الفرق بين عناصر HTML الكتلة (blocks) والمضمّنة (inline) هنا: HTML Block and Inline Elements.
إذا كنت ترغب في الحصول على خلفية وردية على عدة أسطر (لا تزال كعنصر كتلة)، فستحتاج إلى أن تكون وسوم [wrap] الخاصة بك بلا أي محتوى أو نص آخر في نفس السطر:
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
سيبدو الأمر هكذا:
كعنصر مضمّن (Inline)
الآن، لنقم بإضافة بعض النص قبل [wrap]، أو بعده، أو كليهما 
. على سبيل المثال:
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
إليك النتيجة:
إذا كان هناك نص أو عناصر أخرى في نفس السطر مع أحد وسوم [wrap] الخاصة بك، فسيُخرج عنصر مضمّن (inline).
المثال الثاني: رابط بمظهر الزر.
يمكن أن يؤدي العبث بوسم [wrap] أحيانًا إلى نتائج غير مرغوبة لعدة أسباب، أحدها أنه يمكن أن يكون عنصر كتلة أو عنصر مضمّن اعتمادًا على السياق.
لذلك، سنصف طريقتين مختلفتين تحققان نفس النتيجة، لكنك ستتمكن من اختيار الطريقة التي تناسبك أكثر 
رابط زر مضمّن باستخدام [wrap]
الترميز لإنشاء رابط باستخدام Markdown هو: [some text](https://some-link.etc).
لتخصيص النص وجعله يبدو كزر، سنقوم بإدراج الـ wrap داخل الأقواس المربعة. إليك مثالًا:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
لنعلّق على ما يُخرجه هذا الكود. أنت تعرف ذلك لأنك كتبت [wrap=button]، وبالتالي سيتعين عليك استهداف [data-wrap="button"] في CSS الخاص بك.
إذن، لنبدأ، لنضيف بعض CSS أنيق لجعله جميلًا! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
لننفصل قواعد CSS هنا بالتفصيل. هناك العديد من موارد CSS على الإنترنت، لذا إذا كنت ترغب في إجراء تعديلات أكثر تحديدًا، فستحتاج إلى التعلم عنها أولاً.
النتيجة 
:
يبدو هذا جيدًا، أليس كذلك؟
رابط زر مضمّن باستخدام محتوى HTML عادي
بما أن Discourse يقبل كود HTML، يمكننا أن نقرر عدم استخدام وسوم [wrap] واستخدام HTML مع سمة data-. في هذا المثال، سنستخدم ترميز Markdown العادي للرابط ونحيطه بوسوم <span>.
لا يمكننا استخدام وسم الرابط <a> مباشرة لأنه استثناء ولن يسمح بأي سمة data-.
اكتب:
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
سيؤدي هذا إلى إخراج رابط داخل وسم <span> يحمل سمة data-button، مما يعني أن CSS سيكون أكثر تعقيدًا قليلاً. سنضطر إلى استهداف كل من data-button والرابط:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
وإليك النتيجة!
للمضي قدمًا
قائمة مخصصة باستخدام [wrap]
يمكن استخدام وسوم [wrap] وسمات data- في العديد من السياقات، ويمكنك تخصيص محتوى أكثر تقدمًا. الحد الأقصى يعتمد بشكل رئيسي على معرفتك بـ CSS (وHTML إلى حد أقل).
سأعطي مثالًا واحدًا بدون شرح من خلال تخصيص قائمة حيث سيُضاف رمز قط (cat emoji) قبل كل عنصر:
النص:
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
النتيجة:
استخدام متغيرات الألوان في سمتك الخاصة
إذا سمحت للمستخدمين باستخدام سمات أو ألوان مختلفة، فقد لا تبدو تعديلاتك جيدة لكل منهم، خاصة إذا كان لديهم خيارات بين مخططات الألوان الفاتحة والداكنة.
الممارسة الجيدة هي استخدام متغيرات الألوان في Discourse بدلاً من الألوان “المُثبّتة” مثل red أو #FF0000 أو rgb(255,0,0).
إليك مثالًا حيث ستستخدم خلفية الزر اللون الأساسي للوحة الألوان الحالية، وسيستخدم النص اللون الثانوي:
النص:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
إليك كيف سيبدو ذلك لمستخدم يستخدم مخطط ألوان Solarized Light:
وإذا استخدموا مخطط ألوان Solarized Dark:
الخاتمة
لديك الآن الأساسيات لإنشاء عناصر مخصصة باستخدام عنصر [wrap] وسمات data-.
للقيام بتخصيصات أكثر تقدمًا، فإن تعلم CSS أمر أساسي. ستجد العديد من الدروس على الإنترنت.
يمكن أن يكون دليل Discourse التالي مفيدًا أيضًا: Making custom CSS changes on your site.
سيُظهر لك أيضًا أدوات المطور في متصفح الإنترنت الخاص بك بسهولة قائمة متغيرات الألوان في Discourse ومظهر كل منها:
لا تتردد في اقتراح أي تعديل لهذا الدليل!
هذا المستند مُتحكم فيه بإصداراته - اقترح تغييرات على github.
