لقد بحثت في هذا الموضوع ولكني لم أجد أي حل فعال.
كيف يمكنني إضافة فتات خبز بسيط أساسي يعرض الفئات والفئات الفرعية.
على سبيل المثال
الصفحة الرئيسية / محادثات تقنية / ووردبريس
أريد إضافته أسفل شريط التنقل العلوي مباشرة.
5 إعجابات
هذا على الأرجح ما كان @asugar يفكر فيه.
إعجابَين (2)
مرحباً @asugar. 
هل تمانع في تقديم المزيد من التفاصيل حول ما تقصده؟ نحن نسمي المساعدات التنقلية للفئات والعلامات “فتات الخبز” (breadcrumbs)؛ @Canapin يسلط الضوء عليها في لقطة الشاشة الخاصة به.
عادةً ما أذكر عرض لقطة شاشة وتحديد المكان الذي تريده فيها، ثم نعمل من هناك، ولكن لدي ملاحظة أخرى أولاً:
أعتقد أنه إذا قمت بإضافة ذلك إلى كل صفحة، فسوف يعرض في الأساس قوائم تنقل متعددة متطابقة، وبقرب بعضها البعض.
كبديل، هل هناك شيء يمكننا القيام به مع التنقل الحالي لفتات الخبز لجعله يعمل لموقعك؟ 
يجدر أيضاً توضيح معنى “فتات الخبز” (breadcrumbs). لقد كنت في العديد من المحادثات حيث كان الطرفان يقصدان أشياء مختلفة:
- فتات الخبز الهرمي ك انعكاس لهيكل الموقع (فئات/فئات فرعية/علامات، أو كتب/عنوان/فصل)
- فتات الخبز التتبع كتاريخ للصفحات التي تمت زيارتها (مثالي المفضل هو dokuwiki [DokuWiki] انقر على بعض الروابط العشوائية وتحقق من الرأس)
@asugar، أي نوع من فتات الخبز تشير إليه؟
3 إعجابات
لا ينبغي لي أن أخمن ما يأمله @asugar، ولكن ربما يشبه الأمر جميع صفحات الويب الأخرى - ووردبريس يستخدم في الغالب: فتات التنقل المبني باستخدام الفئات.
ولكن ديسكورس لديه بنية ذات مستويين فقط، لذا يمكن أن تكون فقط الصفحة الرئيسية - الفئة - الفئة الفرعية (بالتأكيد، يمكن أن يكون هناك رقم صفحة أيضًا، ولكن هذا عديم الفائدة وأعتقد أنه يكاد يكون من المستحيل بناؤه).
لذلك، فإن فتات التنقل لا يقدم شيئًا آخر سوى استهلاك المساحة.
إعجاب واحد (1)
مرحباً بالجميع. @Jagster على حق في تحديد الأمر. أردت روابط للفئات والفئات الفرعية. مثل
الصفحة الرئيسية - الفئة - الفئة الفرعية - الفئة الفرعية الفرعية - …
أرى التنقل الحالي في discourse ولكنه ليس نقرًا وانتقالًا إلى الفئة/الفئات الفرعية. عند النقر، يعرض قائمة منسدلة.
هل من المستحيل حقًا إضافة تنقل بسيط كما أريد؟
3 إعجابات
إنه ممكن، ما كان يحاول الجميع قوله هو أنه قد يكون هناك حل بديل يختلف عما تطلبه، وكانوا يتساءلون عما إذا كنت مهتمًا به. ومع ذلك، فإنه ممكن ولكن ليس جاهزًا للاستخدام. ستحتاج إلى تصميم أو إنشاء شيء مخصص له. الأمثلة، حيث تم إنشاء شيء مشابه، هي:
روابط التنقل العلوية المخصصة - سمة - Discourse Meta و روابط الرأس المخصصة - سمة - Discourse Meta
إعجاب واحد (1)
هذه هي قائمة التنقل/القائمة ولديها بالفعل. فتات الخبز ليس قائمة تنقل/قائمة. أريد فتات الخبز.
إعجاب واحد (1)
أفهم، لهذا السبب استخدمت كلمة “مشابهة”، فهي متشابهة من حيث أن التنفيذ أو التطوير متشابه، وليس متطابقًا تمامًا أو متشابهًا أو قريبًا جدًا من بعضها البعض، بل متشابهًا أو يمكن القول إنه قابل للمقارنة.\n\nشاركت ذلك أو ذكرت أنها متشابهة لأنني شعرت أنه قد يكون من المفيد رؤية أن شيئًا مشابهًا تقنيًا ممكن في Discourse.\n\nبالنظر إلى أنه تم تأسيس أنه غير ممكن حاليًا في Discourse بدون شيء مخصص، فقد تحتاج إلى إنشاء موضوع Marketplace له.
هذا هو فتات الخبز النموذجي الموجود في أي برنامج منتديات، أعلاه من vBulletin. هذا ما كنت أتحدث عنه.
إعجابَين (2)
القائمة هي في الأساس فتات خبز (كما هو الحال في أنها تعرض الفئة والفئة الفرعية، في صفحات الفئة والفئة الفرعية) لذا أعتقد أنه يمكنك تغييرها من استخدام القوائم المنسدلة إلى استخدام الارتباطات التشعبية العادية للفئة الحالية أو الفئة الفرعية. أراهن أن أي شخص يعرف كيفية كتابة إضافة يمكنه القيام بذلك.
في أعلى صفحات الموضوع، عند التمرير لأسفل، تعرض بالفعل الفئة والفئة الفرعية (والعلامات) لذا ربما تكون سعيدًا بذلك بالفعل. أتخيل أن مؤلف إضافة يمكنه نقلها إلى جزء مختلف من الشاشة لك.
إذا دفعت مقابل هذا وسمحت بتوفيره مجانًا، فقد أستخدمه …
3 إعجابات
أتمنى لو كانت هناك إضافة متاحة بالفعل، هل يعرفها أحد؟
إعجابَين (2)
هل تمكن أي شخص من حل مشكلة عرض فتات الخبز الكلاسيكي على الصفحة؟
قد لا تكون هذه هي أفضل طريقة للقيام بذلك، ولكنها نجحت معنا:
header.html أو مكون إضافي منفصل:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Helper function to reset the breadcrumbs container
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// If on the homepage
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME">HOME<i class="home"></i></a>
</li>
<li class="breadcrumb-item active">
Community
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME">HOME<i class="home"></i></a>
</li>
<li class="breadcrumb-item">
<a href="/">Community</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// If on a category page
const categorySlugOrId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/c/${categorySlugOrId}/show.json`,
success: function(response) {
if (response && response.category && response.category.name) {
const categoryTitle = response.category.name;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item active">
${categoryTitle}
</li>
`);
}
},
error: function(error) {
console.error("Error fetching category details", error);
}
});
} else if (url.includes('/t/')) {
// If on a topic page
const topicId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/t/${topicId}.json`,
success: function(response) {
if (response && response.title) {
const topicTitle = response.title;
const categoryId = response.category_id;
// Now, fetch the category name using the category ID
$.ajax({
type: "GET",
url: `/c/${categoryId}/show.json`,
success: function(categoryResponse) {
if (categoryResponse && categoryResponse.category) {
const categoryTitle = categoryResponse.category.name;
const categoryURL = `/c/${categoryResponse.category.slug}`;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="${categoryURL}">${categoryTitle}</a>
</li>
<li class="breadcrumb-item active">
${topicTitle}
</li>
`);
}
},
error: function(error) {
console.error("Error fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
SCSS:
#breadcrumbsContainer {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: #FFFFFF;
border-radius: 0.25rem;
.breadcrumb-item {
display: flex;
align-items: center;
padding-left: 0;
& + .breadcrumb-item::before {
content: ">";
display: inline-block;
padding: 0 0.5rem;
color: #6c757d;
}
.home {
position: relative;
padding-left: 2.3rem;
font-size: 0;
visibility: hidden;
&::before {
content: "";
position: absolute;
display: block;
background-image: url('HOME SVG');;
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('HOME HOVER SVG');;
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
في قالب after_header.html الخاص بنا:
<div id="breadcrumbsContainer"></div>
3 إعجابات
لمن يريد أن يرى كيف يبدو:\n\n
\n\n(الصفحة الرئيسية سيتم استبدالها بـ SVG افتراضيًا، لقد قمت بتعديل CSS)\n\nبعض أجزاء فتات الخبز يتم إنشاؤها ببطء بعد استعلام ajax.\n\nأيضًا، عندما نفتح موضوعًا، لا يتم تمرير المحتوى إلى الأعلى افتراضيًا.\n\n
3 إعجابات
جيد جداً. آمل أن يتم دمجه في النواة بعد بضعة ترقيات
أود الحصول على هذا!
هل هناك خيار لهذا، أم أحتاج إلى إشراك مبرمجين؟
إذا كنت تريد مكونًا موثوقًا به، فهو بحاجة إلى عمل المطور.
لا أوصي باستخدام المكون المشترك في هذا الموضوع.
شكرا على ردك!
سأقوم بإشراك مطور للمساعدة في هذا الأمر، ولكن هل يمكنك إخباري بالمشكلة (المشاكل) الرئيسية في هذا الكود؟
أقدر ذلك كثيرا!
لست مطورًا، وإذا كان شخص ما يعرف مكونات Discourse أفضل مني، فسيؤدي ذلك إلى إجابات أفضل مني
نقطتان رئيسيتان أراهما:
-
استدعاءات AJAX لإرجاع البيانات غير محسّنة للغاية، للغاية. أنا متأكد من أنه يمكنك إنشاء مثل هذا المكون دون إجراء أي طلبات كهذه. إنها تجعل كل شيء بطيئًا وتجعل فتات الخبز يظهر بتأخير.
-
المكون بالكاد يستخدم واجهة برمجة تطبيقات JavaScript الخاصة بـ Discourse، والتي يمكنها على الأرجح إرجاع البيانات التي نحتاجها، وتزيين/إدراج قالب بالطريقة الصحيحة بدلاً من حقن كود HTML يدويًا في DOM.
3 إعجابات