المتطلبات
لاستخدام هذه النصائح والحيل، يجب أن تكون مسؤولًا عن مثيل Discourse مستضاف ذاتيًا أو أن تكون مشتركًا في خطة مستضافة من Discourse أعلى من الأساسية.
المقدمة
يدعم Discourse عدة طرق لتنسيق وتخصيص محتوى المنشور. يمكنك العثور على القائمة هنا:
ولكن في بعض الأحيان، قد ترغب في شيء أكثر تحديدًا، مثل رابط يبدو كزر.
هذا هو نوع التعديل الذي سنتعلمه هنا.
المنطق
سأشرح باختصار المنطق وراء ذلك، لكن يمكنك الانتقال إلى الخطوة التالية والانتقال مباشرة إلى مثال عملي 
يسمح Discourse بأي سمة HTML تبدأ بـ data- في محتوى المنشور.
هذه هي السمات التي سنستهدفها باستخدام CSS لتخصيص محتوانا.
سأسميها سمات data- في هذا الدرس
إحدى طرق إنشاء عناصر بهذه السمات هي استخدام وسم يشبه BBcode: [wrap]، سنضيف إليه قيمة من اختيارنا. هنا نختار “button” (يمكن أن يكون أي شيء آخر، حتى اسم كلبك 
):
[wrap=button]بعض النص[/wrap]
سيؤدي هذا إلى إخراج عنصر HTML يحمل السمة التالية: data-wrap="button".
المثال الأول: خلفية وردية
لنبدأ بمثال عملي. سننشئ نصًا بخلفية وردية.
كعنصر كتلة
في منشورك، على سطر فارغ، اكتب:
[wrap=pink]نص وردي[/wrap]
سيؤدي هذا إلى إنشاء عنصر div يحمل السمة data-wrap="pink".
ثم أضف كود CSS التالي إلى نسقك.
انتقل إلى لوحة المسؤول → تخصيص → النسق → نسقك → تحرير CSS/HTML → CSS.
ضع كود CSS التالي داخله:
[data-wrap="pink"] {
background: pink;
}
ثم انقر على زر الحفظ.
عد إلى منشورك، ولاحظ النتيجة:
نعم، إنها جميلة بالفعل 
ستلاحظ أن الخلفية تغطي عرض المنشور بالكامل. لأن الـ wrap لدينا هو العنصر الوحيد على سطره، فإنه يُخرج عنصر كتلة.
يمكنك معرفة المزيد حول الفرق بين عناصر HTML الكتل والسطرية هنا: HTML Block and Inline Elements.
إذا كنت تريد الخلفية الوردية على عدة أسطر (لا تزال كـ كتلة)، فستحتاج إلى أن تكون وسوم [wrap] الخاصة بك خالية من أي محتوى أو نص آخر على نفس السطر:
[wrap=pink]
نص وردي
نص وردي
نص وردي
نص وردي
[/wrap]
سيظهر هذا على النحو التالي:
كعنصر سطري
الآن، لنضف بعض النص قبل [wrap]، أو بعده، أو كلاهما 
. على سبيل المثال:
إليك بعض [wrap=pink]النص الوردي[/wrap] وهو رائع ✨
إليك النتيجة:
إذا كان هناك نص أو عناصر أخرى على نفس السطر مع أحد وسوم [wrap] الخاصة بك، فسيتم إخراج عنصر سطري.
المثال الثاني: رابط بمظهر زر.
التلاعب بوسم [wrap] قد يؤدي أحيانًا إلى نتائج غير مرغوب فيها لأسباب مختلفة، منها أنه يمكن أن يكون عنصر كتلة أو سطرًا اعتمادًا على السياق.
لذلك، سنصف طريقتين مختلفتين تحققان نفس النتيجة، ولكن يمكنك اختيار الطريقة التي تناسبك أكثر 
رابط زر سطري باستخدام [wrap]
الصيغة لإنشاء رابط باستخدام Markdown هي: [بعض النص](https://some-link.etc).
لتخصيص النص وجعله يظهر كزر، سنقوم بإدراج wrap داخل الأقواس المربعة. إليك مثال:
هذا [[wrap=button]رابط رائع[/wrap]](https://discourse.org/) هو زر أزرق 🐳 !
لن نتطرق إلى ما ينتج عنه هذا الكود. أنت تعرف ذلك لأنك كتبت [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-.
اكتب:
هذا <span data-button>[رابط](https://discourse.org/)</span> هو زر أخضر 🐸 !
سيؤدي هذا إلى إخراج رابط داخل وسم <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 إلى حد أقل).
سأعطي مثالًا واحدًا بدون شرح من خلال تخصيص قائمة سيتم إضافة رمز تعبيري لقط في بداية كل عنصر:
النص:
[wrap=cat]
- فيليكس
- غارفيلد
- قطة نات
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
النتيجة:
استخدام متغيرات الألوان الخاصة بنسقك
إذا سمحت للمستخدمين باستخدام نسق أو ألوان مختلفة، فقد لا تبدو تعديلاتك جيدة لكل منهم، خاصة إذا كان لديهم خيارات بين مخططات ألوان فاتحة وداكنة.
من الممارسات الجيدة استخدام متغيرات ألوان Discourse بدلاً من الألوان “المشفرة يدويًا” مثل red، #FF0000 أو rgb(255,0,0).
إليك مثال حيث سيتم استخدام اللون الأساسي للمجموعة الحالية لخلفية الزر، وسيتم استخدام اللون الثانوي للنص:
النص:
هذا [[wrap=button]رابط رائع[/wrap]](https://discourse.org/) هو زر 🌈 !
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.
