تخصيص الترويسة بالروابط أو الأيقونات أو القوائم

[Discourse]

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

مستوى المستخدم المطلوب: المسؤول (Administrator)

الطريقة السهلة (مكونات السمة)

يختلف كل مكون سمة، لذا اقرأ الموضوعات المتعلقة بالمكونات المختلفة قبل اختيار الأنسب لموقعك.

1. Custom Header Links ينشئ قائمة داخل الترويسة، بجوار أيقونة العدسة المكبرة
   

   

2. Custom Header Links (icons) ينشئ أيقونات قابلة للنقر بجوار أيقونة العدسة المكبرة
   

   

3. Brand Header ينشئ قائمة فوق الترويسة
   

   

4. Header Submenus ينشئ قائمة فوق الترويسة مع قوائم فرعية
   

   

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

ميزة هذه الحلول هي أن فريق Discourse يدير ويحافظ ويحدث جميع هذه المكونات، وهي تعمل بالفعل للجوال.

الطريقة الصعبة

قم ببناء تخصيصاتك الخاصة.

للقيام بذلك، ستحتاج إلى قراءة ما لا يقل عن Beginner's guide to using Discourse Themes و Developing Discourse Themes & Theme Components.

بمجرد أن تصبح على دراية بسمات Discourse، يمكنك البدء في بناء سمتك.

جربها

حدد علامة التبويب common ثم أضف HTML المخصص الخاص بك في علامة التبويب Before Header. تتوفر أيضًا علامات التبويب desktop و mobile ضمن مفتاح “Show Advanced” (إظهار المتقدم) إذا كنت بحاجة إلى تخصيصات خاصة بالمنصة، ولكن يوصى باستخدام common كنقطة انطلاق.

على سبيل المثال، يمكنك البدء في إضافة جزء HTML من القائمة في علامة التبويب Before Header

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com">Home</a>
     <a href="http://example.com/about/">About</a>
     <a href="http://example.com/news/">News</a>
     <a href="http://example.com/products/">Products</a>
     <a href="http://blog.example.com/blog">Blog</a>
     <a href="http://forums.example.com/">Forums</a> 
   </span>
 </div>

سيؤدي هذا إلى إنشاء القائمة الأساسية الخاصة بك:

الآن يمكنك إضافة CSS المناسب لتنسيق الترويسة.

أضف CSS الخاص بك في علامة التبويب CSS، على سبيل المثال

//قم بمحاذاة القائمة مع شعار الموقع
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //يمكنك نقل القائمة إلى اليسار أو إلى المنتصف أو إلى اليمين
    text-align: center; 
}

وابدأ في تخصيص القائمة الخاصة بك:

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //وإلى آخره
}

نصائح وحيل

عرض قائمتك للزوار فقط (أو للمستخدمين المسجلين فقط)

يمكنك عرض القائمة للزوار غير المسجلين فقط وإخفائها عن المستخدمين المسجلين.
فقط أضف display: none; داخل CSS الخاص بك

#top-navbar {
    [...]
    display: none;
}

وأضف قاعدة جديدة:

.anon #top-navbar {
    display: block;
}

يمكنك فعل العكس عن طريق عكس قواعد خاصية display:

#top-navbar {
    [...]
    display: block;
}

.anon #top-navbar {
    display: none;
}

بهذه الطريقة سيراها المستخدمون المسجلون فقط.

عرض قائمتك لأعضاء مجموعة معينة فقط

سيعمل هذا فقط للمجموعات الأساسية!

body:not(.primary-group-GROUP-NAME) #top-navbar {
  display: none;
}

قم بتغيير GROUP-NAME باسم المجموعة التي ستتمكن من رؤية القائمة.

فتح الروابط في علامة تبويب خارجية

في كود HTML الخاص بك أضف الخاصية

target="_blank"

على سبيل المثال:

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com" target="_blank">Home</a>
     [...]
   </span>
 </div>

تذكر أن الروابط الداخلية مسموح بها (حتى باستخدام مسارات نسبية) وأنه يمكن فتحها في علامات تبويب خارجية أيضًا.

 <div>
   <span id="top-navbar-links">
     [...]
     <a href="/c/site-feedback" target="_blank">Forums</a> 
   </span>
 </div>

---

مواضيع ذات صلة:

• Add a custom header with a dropdown menu