المشكلة هنا هي محدودية المساحة وليست محدودية تقنية.
كما هو موضح هنا
تخيل تجربتك كمستخدم؛ إذا فتحت قائمة على موقع ويب، ستبدو هكذا.
ستشعر بالارتباك، إن لم نقل أكثر من ذلك. خاصةً أن هذه القائمة لا تحتوي على وظيفة بحث لمساعدتك في تضييق نطاق النتائج.
لذا، دعنا نحاول إيجاد نقطة وسط بين ما تريد فعله وما يريده المستخدمون من تجربة. كيف نفعل ذلك؟ نعرض عددًا محدودًا من مجموعات الوسوم ونشير إلى وجود المزيد للنظر فيها. إذن، شيء مثل هذا:
إذن، كيف تفعل ذلك؟
إليك الكود:
<script type="text/discourse-plugin" version="0.8">
const MAX_TAGS_TO_SHOW = 20;
const Category = require("discourse/models/category").default;
const siteSettings = api.container.lookup("site-settings:main");
const tagStyle = siteSettings.tag_style;
const getNumberOfTags = (tags, categoryTagsGroups) => {
let count = 0;
count = tags.length;
for (const categoryTagsGroup of categoryTagsGroups) {
count = count + categoryTagsGroup.tags.length;
}
return count;
};
fetch("/tags.json")
.then(response => response.json())
.then(data => {
try {
const tags = data.tags;
const hasCategoryTagGroups = data.extras?.categories;
if (hasCategoryTagGroups) {
const categoryTagsGroups = data.extras.categories;
let moreCount = getNumberOfTags(tags, categoryTagsGroups);
let visibleCount = 0;
const content = [];
for (const categoryTagsGroup of categoryTagsGroups) {
const category = Category.findById(categoryTagsGroup.id);
const name = category.name;
const childTags = categoryTagsGroup.tags;
const childTagNodes = [];
childTags.forEach((tag, index) => {
if (visibleCount <= MAX_TAGS_TO_SHOW) {
childTagNodes.push(
api.h(
"li.tag-link-item",
api.h(
`a.discourse-tag.tag-link.${tagStyle}`,
{ href: `/tag/${tag.text}` },
tag.text
)
)
);
moreCount--;
visibleCount++;
}
});
if (childTagNodes.length) {
content.push([
api.h("li.heading", api.h("span", name)),
childTagNodes
]);
}
}
api.decorateWidget("menu-links:after", helper => {
if (helper.attrs.name !== "general-links") return;
return api.h("div.clearfix", [
api.h("ul.tag-links", [
api.h("a.categories-link", { href: "/tags" }, [
"وسوم ",
moreCount ? `(${moreCount} المزيد)...` : ""
]),
content
]),
api.h("hr")
]);
});
}
} catch (error) {
console.error("هناك مشكلة في مكون سمة وسوم قائمة الهامبرغر");
console.error(error);
}
})
.catch(console.error);
</script>
يتم وضع هذا في تبويب header من سمتك. يمكنك تغيير
const MAX_TAGS_TO_SHOW = 20;
في الأعلى إلى عدد الوسوم التي تريد عرضها.
ثم كل ما تحتاج إلى إضافته هو بعض CSS لتنسيق الروابط. إليك شيئًا أساسيًا لتبدأ به.
.tag-links {
.heading {
padding: 0.25em 0.5em;
}
.tag-link-item {
background-color: transparent;
display: inline-flex;
align-items: center;
padding: 0.25em 0.5em;
width: 50%;
box-sizing: border-box;
.tag-link {
display: inline-flex;
width: 100%;
&:hover {
color: var(--primary);
}
}
}
}
لاحظ أن الجافا سكريبت أعلاه تحترم نمط الوسوم المحدد في إعدادات موقعك. أيضًا، إذا اعتمد موقعك بشكل كبير على الوسوم، فقد لا تحتاج إلى إظهار الفئات في تلك القائمة. إخفاؤها سيساعد في تقليل ارتباك المستخدم.
أيضًا، إذا أضفت قسم وسوم موسعًا، فإن هذا الرابط يصبح زائدًا عن الحاجة.
لذا، دعنا نخفيها بشيء مثل هذا.
.panel-body {
.category-links,
.categories-separator,
.widget-link[href="/tags"] {
display: none;
}
}
أخيرًا، كما هو موضح هنا:
لا يتم تمرير هذه البيانات إلى العميل افتراضيًا إلا إذا قمت بزيارة /tags، لذا فإن الكود أعلاه يضيف طلبًا إضافيًا على الصفحة الرئيسية (يعمل مرة واحدة فقط لكل زيارة). تحاول ديسكورد إبقاء الأشياء بسيطة جدًا، لذا، ما لم تكن البيانات ضرورية، فلن يتم تحميلها افتراضيًا.
لا أرى أن هذا سيتم إضافته إلى نواة ديسكورد في أي وقت قريب. لذا فإن طلبًا إضافيًا هو خيارك الوحيد تقريبًا هنا ما لم ترغب في كتابة مكون إضافي يعمل على الخادم.
