أشرطة Discourse: beers: 🍸 (إطار جانبي)

[merefield (Robert)]

: eyeglasses: نظرة عامة

مكون سمة (Theme Component) يسمح لك بتخطيط المكونات^[1] على أشرطة علوية وجانبية.

• حدد مجموعة من “الأدوات المصغرة” (widgets) بشكل مميز للمسار (Route) والموضع (Position).
• يدعم الإعدادات لكل من: الاكتشاف (discovery)^[2]، الموضوع (topic)، العلامة (tag)^[3]، الفئة (category)^[3:1]، الفئات (categories)^[3:2] أو تقاطع العلامات (tags-intersection)^[4].
• يمكن أن تكون “الأشرطة” (Bars) إما: علوية، يسارية، يمينية أو موقع يميني بديل.
• يمكن طي كل شريط أو إغلاقه (تحديث المتصفح لإعادة تعيين الإغلاق). يمكن تصغيرها افتراضيًا.
• يتعامل مع الشريط الجانبي الرسمي (Official Sidebar)، ولكن إذا كنت تنوي استخدام شريط جانبي أيسر (Bars Left Sidebar)، فإن وضع القائمة المنسدلة للشريط الجانبي الرسمي موصى به.
• يأتي مع إعدادات مثال موجودة تعرض بعض الأحرف الكبيرة، جزئيًا كعرض توضيحي ولتتمكن من رؤية إعدادات مثال. احذف هذه واستبدلها بأسماء المكونات الخاصة بك.
• يأتي مع مكون واحد: bars-custom-html (انظر إعدادات المثال المعبأة مسبقًا) - ولكن المكونات من العديد من مكونات السمات (Theme Components) والإضافات (Plugins) الحالية متوافقة.
• لم يتم تنفيذ دعم الهاتف المحمول بعد.

: link: روابط سريعة

: octopus: احصل على الكود	https://github.com/merefield/discourse-tc-bars
: eyes: شاهد الكود	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
: question: دليل التثبيت	Installing a theme or theme component

هل تستمتع بمكون السمة هذا؟ يرجى : star: على GitHub ! : pray:

مثال مجاني:

عند التحميل الأول:

: warning: بعض الأمور الهامة التي يجب ملاحظتها حول مكون السمة هذا!

• تم تصميم مكون السمة هذا بشكل أساسي للمطورين والمسؤولين الذين لديهم فهم تقني لتطوير السمات. إذا لم تكن تقنيًا بما فيه الكفاية وتحتاج إلى مساعدة في تنفيذ الأشرطة الجانبية باستخدام Bars، يمكنك توظيفي أو توظيف مطور في Marketplace.

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

اعتبارات المكون

• يجب عليك تحديد اسم المكون. اسم المكون هو في الواقع نفس اسم الملف في دليل السمة (theme) أو مكون السمة (tc) أو الإضافة (plugin) component بدون اللاحقة.
• اسم المكون ليس اسم مكون السمة (الذي يمكن أن يحتوي على العديد من مكونات Ember Glimmer)، بل هو اسم ملف مكون Ember الفعلي : sweat_smile: ، على سبيل المثال:

لذا layouts-tag-list

• يمكن أن تكون من مكون سمة أو إضافة موجودة. قد تعمل المكونات الحالية. الأمثلة هي:
• 🏷️ Bars Tag List Component
• Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
• Discourse AI Topic Summary 🤖 … وربما حتى:
• أداة لوحة المتصدرين: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (أخبرني إذا جربتها أدناه!)
• يتطلب بعض الخبرة لبناء المكونات
• ولكن حاول بناء مكونك الخاص في مكون سمة آخر وتأكد من تنشيط كليهما في نفس السمة.
• يجب على المكونات جلب بياناتها الخاصة (لا يمكنها استخدام نماذج تمرير مخرج الإضافة للأسف بسبب مخارج الإضافة المحددة المطلوبة لاستخدامها لوضع الأشياء بهذه الطريقة).
• بشكل افتراضي، يمكنك فقط استخدام بيانات واجهة برمجة التطبيقات (API) JSON الحالية من، على سبيل المثال، Discourse core أو تلك التي توفرها إضافة موجودة. إذا كنت بحاجة إلى بيانات مخصصة لا يمكنك الحصول عليها من واجهات برمجة التطبيقات الحالية، يمكنك توظيفي أو توظيف شخص ما في Marketplace لمساعدتك.
• قد تحتاج إلى تنسيق حدود الشريط الجانبي والمكون حسب ذوقك. (مرة أخرى، إذا كنت بحاجة إلى مساعدة، ففكر في توظيف مطور).
• الاستخدام الاستراتيجي لظلال الصندوق والحدود يمكن أن يجعل الأشياء تبدو لطيفة حقًا - كن فنيًا!

لماذا

• مع تحديث Discourse core إلى Ember 5، فإن الحيلة التي استخدمتها إضافات Pavilion Layouts لتوفير طريقة ممتازة لمعالجة تخطيط Discourse توقفت عن العمل. لم يعد هناك طريقة سهلة لعرض شريط جانبي على مسار الموضوع عبر واجهة مستخدم سهلة نسبيًا للمستخدم النهائي.

• بالإضافة إلى ذلك، قدمت Ember مكونات Glimmer التي كانت أفضل بكثير للعمل معها. (استخدمت Layouts واجهة برمجة تطبيقات الأدوات (Widgets API) التي تم إيقافها لصالح مكونات Glimmer).

• أخيرًا، قدم فريق Discourse core محرر JSON جديد لإعدادات مكونات السمة مما جعل نشر إعداد أكثر تعقيدًا ممكنًا : rocket:

• بدلاً من إصلاح إضافة Layouts (لم تكن مكونات السمة موجودة في أيام Layouts)، كان من المنطقي إعادة البناء كمكون سمة، لأننا نستطيع تحقيق معظم الأشياء التي نحتاجها في الواجهة الأمامية فقط.

• أدخل “Bars” : cocktail: تحياتي!!

مشاكل معروفة

• الشريط العلوي لا يلتصق (قد أزيل الإعداد المقابل إذا لم أتمكن من حله).

شكر وتقدير

• خليفة روحي لإضافة Layouts Plugin المكسورة الآن والتي بناها @angus (تحياتي!) والتي خدمت بشكل جيد لسنوات عديدة.
• يستخدم نظام المعلمات من Right Side Blocks (شكرًا @pmusaraj!).

---

1. يشير مصطلح “الاكتشاف” (المسار) إلى صفحات قائمة الموضوعات الرئيسية (مثل “الأحدث”، “جديد”) التي تسمح لك بتصفح الموضوعات المتاحة قبل النقر والغوص في موضوع معين. ↩︎

2. تقنيًا هو أيضًا مسار “اكتشاف” ولكننا نقسمها إلى أسماء مميزة حتى تتمكن من التعامل معها بشكل مختلف إذا اخترت ذلك. ↩︎

3. انظر هنا لمزيد من التفاصيل. لكي يظل هذا اختياريًا (لن يرغب جميع مثبتي Bars في صفحة رئيسية مخصصة) لا يضيف Bars المعدل المطلوب في about.json لذلك يجب عليك إضافته في السمة الأصلية أو مكون سمة آخر لتفعيله. ↩︎ ↩︎ ↩︎

4. انظر إضافة تقاطع العلامات. ↩︎

[Lilly (Lillian Louis)]

رائع، هذا رائع! عمل جيد يا روبرت. شكراً لك على القيام بذلك وجعله متاحاً!

تم النسخ!

[thoka (Thomas Kalka)]

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

[merefield (Robert)]

لا توجد خطط لإضافة “أشرطة” إضافية في هذه المرحلة ولكن ربما بمجرد استقرار الأمور واستقرار TC بوضوح …

… نرحب دائمًا بطلبات السحب أو الرعاية أيضًا

[denvergeeks]

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

على سبيل المثال، بناءً على التعليمات، يبدو أن هذا يجب أن يعمل…

لكن الشريط الجانبي الأيسر لا يزال يعرض فقط الحرف الكبير “أ”…

[merefield (Robert)]

شيئان:\n\nأولاً، إليك إعدادات مشابهة من StarZen:\n\n

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

[denvergeeks]

@merefield

ثانيًا، هذا سخيف حقًا، ولكن عليك الضغط على حفظ و الضغط على علامة الصح بعد الضغط على حفظ.

إنه حفظ مزدوج!

نعم، لقد قمت بالحفظ المزدوج

ومع ذلك، لا بد أنني أفتقد شيئًا ما لأن النتيجة هي نفسها. هل هناك أي شيء آخر يمكنني تقديمه للمساعدة؟

[merefield (Robert)]

شارك ملف JSON الخاص بالإعدادات (زر في أسفل TC).

[denvergeeks]

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

لا يزال component_name الخاص بك خاطئًا، انظر إلى مثالي وقد ترغب في حذف الباقي.

[denvergeeks]

حسنًا… لقد حذفت كل شيء باستثناء الأول، وغيرت الاسم ليتطابق مع اسمك (على الرغم من أن اسم المكون يأتي من TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - أين أجد أن اسم المكون الصحيح هو layouts-tag-list؟)

ومع ذلك، فإن تغيير اسم المكون في النافذة المنبثقة لا يبدو أنه يغيره في إعدادات JSON، أو يزيل العناصر الأخرى، حتى بعد الحفظ المزدوج…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

كما أوضحت أعلاه (وقد فصلت الآن في المنشور الأصلي)، فإن اسم المكون ليس اسم مكون السمة (الذي يمكن أن يحتوي على العديد من مكونات Ember Glimmer)، إنه اسم مكون Ember الفعلي:

لذا layouts-tag-list

هذا سوء فهم مفيد، سأوضح المزيد في المنشور الأصلي، باستخدام هذا المثال.

لست متأكدًا من سبب بقاء إعداداتك عالقة

حاول حذف مكون السمة وإعادة إضافته والقيام بنفس العملية.

أو فقط قم بتحديث متصفحك؟

[ckshen]

شكراً على العمل @merefield!

من الناحية الوظيفية، كيف تختلف “أشرطة Discourse” عن “كتل الشريط الجانبي الأيمن” مع HTML مخصص، بخلاف حقيقة أن الموقع لا يجب أن يكون على اليمين فقط؟

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[merefield (Robert)]

Bars هو الخليفة الروحي لـ Pavilions Layouts الذي جاء قبل RSB.

ولكن مقارنة بـ RSB، فإن الدعم متعدد المسارات ومتعدد المواقع بشكل أساسي (هدف Bars هو إعادة إنتاج فائدة ومرونة Layouts)، والإضافة الحاسمة هي دعم مسار الموضوع. بالإضافة إلى ذلك، أنا لا أدعم حاليًا params … لم أصادف حالة استخدام بعد. أنا أيضًا لا أقوم بتضمين أي مكونات باستثناء الأحرف الكبيرة الكبيرة في العرض التوضيحي - هذا متعمد وهذا من المفترض أن يكون إطار عمل للمسؤولين/المطورين (مثل Layouts).

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

[denvergeeks]

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

[merefield (Robert)]

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

[denvergeeks]

شكراً على وقتك الذي قضيته في المحاولة – سأجربها على بعض مثيلات Discourse الأخرى الخاصة بي لاحقًا اليوم وسأبلغك مرة أخرى.

[denvergeeks]

لقد قمت الآن أيضًا بإزالة جميع الإضافات، وأعدت البناء (وليس لدي أي TCs أو سمات أخرى مثبتة)، وهي تثبيت جديد من الليلة الماضية.

في حال كان ذلك مفيدًا، اكتشفت أنه مع نفس الإعدادات المذكورة أعلاه، بينما الشريط الجانبي الأيسر لا يظهر في أي مكان آخر، فإنه يظهر على المسار /latest (وإن كان فقط العنوان “Tags”، دون إظهار أي علامات).

---

---

---

---

وهنا ملف JSON للإعدادات…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

سيتعين عليك تصحيح ذلك بنفسك - تحقق من وحدة التحكم الخاصة بك، وملفات CSS الخاصة بالقالب، وما إلى ذلك.

يعمل لدي:

لا أتذكر ما إذا كانت قائمة علامات التخطيط تتطلب مجموعات علامات … قد تفعل!

[denvergeeks]

@merefield

لا أتذكر ما إذا كانت قائمة علامات التخطيط تتطلب مجموعات علامات…

نعم، تم تمكين مجموعات العلامات في الإعدادات (ثم إنشاء بعض مجموعات العلامات) مما أدى إلى ظهور العلامات.

ومع ذلك، فإن تعيين المسار لعنصر المكون إلى discovery لا يزال يعرض الشريط الأيسر فقط في قوائم /latest, /new و /top.

هل يمكنك التكرم بتوجيهي إلى قائمة بجميع “المسارات” المتاحة التي يمكن استخدامها هنا؟

شكراً لك مرة أخرى!