رأس الأقسام المميزة

[manuel (Manuel Kostka)]

	ملخص	فئات الميزات في بعض العروض.
	رابط المستودع	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	جديد على سمة Discourse؟	دليل المبتدئين لاستخدام سمة Discourse

تثبيت مكون السمة هذا

عرض البطاقات

عرض القائمة

الإعدادات

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

القالب

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

شكرًا لك، هاندي تي سي.

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

[manuel (Manuel Kostka)]

@زب، منشور:2، موضوع:203779

زر تبديل للعرض فقط في الصفحة الرئيسية

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

ما هو حالة الاستخدام المقصودة لإظهار الشعار؟ في الصفحات العالمية، فأنت تقريبًا “في المنزل” على أي حال؟

ما أود إضافته فعليًا هو عرض للجوال. لم تكن لدي فكرة حول ذلك حتى الآن، لذا فهو غير معروض على الجوال. شكرًا لك على المشاركة! إذا كانت لديك فكرة حول ذلك!

[Zup]

@manuel

ما هي حالة الاستخدام لإدراج الشعار؟

جماليات مخصصة، وعند دمجها مع وصف موجز، ستوفر نظرة سريعة عن المجتمع للزوار الجدد، وتعمل كتذكير للمستخدمين الحاليين بخصوص رسالة المجتمع. يمكن وضعها فوق أو على يسار الروابط.

عرض هذا افتراضيًا على الروابط العالمية، بالإضافة إلى خيار عرضها حسب الفئة (وربما صفحات الوسوم؟)، سيؤدي إلى إنشاء قائمة تنقل مريحة للمناطق ذات الأولوية - وهذا هو الاستخدام الرئيسي المقصود. (بالمناسبة، القدرة على تضمين روابط مخصصة - وليس فقط الفئات - ستكون ميزة مرغوبة أخرى.)

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

[valsha (KingPin)]

مكون جيد،
قمنا بتثبيت اللافتة متعددة الاستخدامات، كيف يمكننا نقل هذا المكون تَحْتَ اللافتة متعددة الاستخدامات؟
بحيث يتم عرض مكون اللافتة متعددة الاستخدامات أولاً ثم المكون الخاص بكم.
شكرًا لكم.

[manuel (Manuel Kostka)]

نعم، يتم عرض كلا المكونين في نفس المخرج. لا أعرف ما الذي يسبب ترتيب العناصر في هذه الحالة؟ على موقعي، يظهر افتراضيًا أسفل اللافتة..

لكن يجب أن تتمكن من استهداف الترتيب باستخدام تعليمات CSS:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important;
}

[manuel (Manuel Kostka)]

@Zup

بالمناسبة، ستكون إضافة إمكانية تضمين روابط مخصصة — وليس فقط التصنيفات — ميزة مرغوبة أخرى

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

@Zup

أجد أن معظم مواقع Discourse تميل إلى أن تكون غامضة، خاصة عند الزيارة الأولى، وأعتقد افتراضيًا أن تنقل Discourse قد يكون محيرًا للمستخدم العادي.

أتفق مع ذلك! أعتقد أن وجود لافتات مخصصة للزوار وللمستخدمين الجدد الذين سجلوا للتو يمكن أن يكون مفيدًا ومُرحبًا به.

[JammyDodger]

يوجد خيار ‘تبديل موضع الافتراضي’ في إعدادات الشعار المتعدد، هل قد يكون ذلك مفيدًا لك؟

تبديل موضع الافتراضي

إذا كان هناك مكون آخر متعلق بالشعار نشط، استخدم هذا الخيار لتبديل موضعه مع الشعار المتعدد

[valsha (KingPin)]

جرب هذا الإعداد، لم ينجح معي

[Rhod (Rodolfo)]

لقد قمت بتثبيت مكون سمة ولكنه لا يتناسب مع المحتوى الرئيسي، مما يجعله يبدو في غير محله (قبيحًا)، أستخدم سمة air.
هل يمكنك مساعدتي من فضلك أين يمكنني جعل المكون يظهر داخل الحاوية ذات اللون الداكن؟

يبدو هكذا:

أود أن يبدو هكذا:

[AkaiBukai]

مرحباً،
أنا فقط أبدأ مع discourse والتصميم..
أريد أن يكون لدي نوع من البطاقات في الأعلى كما يمكنك رؤيته هنا: Secret World Legends - Funcom Forums
يبدو أن مكون السمة هذا يساعد في هذا الاتجاه..
لقد قمت بتثبيته وتمكنت من تحديد الفئات التي أريد أن تظهر ولكنني حصلت فقط على العناوين..
وهذا منطقي لأنني لم أقم بتعيين أي صورة بعد..

سؤالي (وهو على الأرجح سؤال غبي حيث لم يسأله أحد آخر بعد) هو كيف يمكنني تعيين صورة الفئات..؟
وكيف “أقوم بتحميلها”؟

شكراً لأي مساعدة..

[Heliosurge (Dan DeMontmorency)]

انتقل إلى إعدادات الفئات التي استخدمتها لإنشاء فئة وحدد علامة التبويب “صورة”.

تحميل صورة

[Vasan_Cannane]

مرحباً، أنا جديد على Discourse ولدي سؤال حول رأس الفئات المميزة

أحاول تحقيق هذا ولكن لا أستطيع

لقد قدموا بضعة أسطر من التعليمات البرمجية

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [رابط كل عنصر وشعاره واسمه..]
      }
    }
  }
}

كيف يمكنني تحديد رابط العنصر وشعاره واسمه؟

هل يمكن لأحد أن يوضح هذا؟

شكراً

[Arkshine]

أهلاً بك

إذا كنت ترغب في عرض صورة مثل الصورة الموجودة في المثال، فأنت بحاجة إلى تحديد الفئات ذات الصلة في إعداد مكون السمة والتأكد من تعيين صورة لكل منها (إعدادات الفئة → الصور → شعار الفئة).

[Vasan_Cannane]

هذه هي إعدادات مكون سمة الفئات المميزة ولا يمكنني العثور على أي شيء

[Arkshine]

يجب عليك تعديل إعدادات الفئة الخاصة بك:

انقر فوق علامة التبويب Images:

… وقم بتحميل صورة شعار الفئة!

[Vasan_Cannane]

لدي صف من المنتجات، كيف يمكنني تقسيم المنتجات إلى أعمدة متعددة؟

[Arkshine]

شيء كهذا؟

إذا كان الأمر كذلك، فجرب هذا الـ CSS. أضفه إلى الـ CSS الخاص بالمظهر الخاص بك أو في مكون.

بالداخل، يمكنك رؤية المتغيرات التي يمكنك التحكم فيها.
يمكنك اختيار عدد الأعمدة، والفجوة بين العناصر، وعرض كل عنصر.
العناصر تتكدس تلقائيًا.

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;
    
    display: grid !important;
    
    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

شكرا للمساعدة.

هل يمكنني طلب مساعدة أخرى؟

هذا ما أحاول تحقيقه

هل يمكنك مساعدتي في ذلك؟

[Arkshine]

جرب شيئًا كهذا:

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
     > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}