مفيد جدا، شكرا جزيلا لك!
لقد حاولت استخدام هذا الرمز ولكنه لا يبدو أنه يعمل.
يمكنني رؤية breadcrumbsContainer وخلفيته البيضاء ولكنها لا تنشئ مسارات التنقل بداخلها.
لقد جربتها كمكون وكموضوع مباشر ضمن “CSS/HTML مخصص”.
هل لديك أي فكرة عما قد أفعله بشكل خاطئ؟
نعم @DogBite الحل هو إضافة علامات Script في أعلى وأسفل ملف header.html…
في الأعلى:
<script type="text/discourse-plugin" version="0.8">
في الأسفل:
<script>
هكذا…
<script type="text/discourse-plugin" version="0.8">
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"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item active">
Community
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">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);
}
});
}
}
<script>
إعجاب واحد (1)
هنا قمت بإنشاء مكون سمة بسيط جدًا للفتات (كرابط) (حيث لا تظهر صفحة البداية أي فتات)… نرحب بطلبات السحب (PRs)!
أيضًا (وهو أمر مهم) يعمل هذا حاليًا بشكل صحيح مع الفئات فقط - فهو لا يتعامل مع الفئات الفرعية!
كيف يبدو على صفحة قائمة الفئات…
كيف يبدو على صفحة الموضوع…
3 إعجابات
إعجاب واحد (1)
بالنظر إلى هذا الأمر بشكل أعمق، تمت إضافة مكون “breadcrumbs” (مسارات التنقل) إلى Discourse في وقت سابق من هذا العام: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. يتم عرضه حاليًا فقط في صفحات إدارية محددة.
لذلك، قمت بإنشاء مكون اختباري لعرض مسارات التنقل: Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. القالب الحالي هو:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<ul class="breadcrumbs {{concat '--' settings.plugin_outlet}}">
<li class="breadcrumbs__item --home">
{{#if this.homePage}}
{{i18n "js.home"}}
{{else}}
<a href="/">{{i18n "js.home"}}</a>
{{/if}}
</li>
{{#if this.parentCategory}}
<li class="breadcrumbs__item --parent">
<a href="/c/{{this.parentCategoryLink}}">
{{this.parentCategoryName}}</a>
</li>
{{/if}}
{{#unless this.homePage}}
<li class="breadcrumbs__item --current">
{{this.currentPage}}
</li>
{{/unless}}
</ul>
{{/if}}
</template>
لقد قمت الآن بإنشاء فرع يستخدم مكون DBreadcrumbs الجديد: Files · dbreadcrumbs · Manuel Kostka / Discourse / Components / Breadcrumbs · GitLab. سيؤدي ذلك إلى جعل القالب أكثر إيجازًا وأعتقد أنه سيوفر بشكل عام تناسقًا وإمكانية وصول أفضل:
<template>
{{#if this.currentPage}}
{{bodyClass "has-breadcrumbs"}}
<DBreadcrumbsContainer class="{{concat '--' settings.plugin_outlet}}" />
<DBreadcrumbsItem @path="/" @label={{i18n "js.home"}} />
{{#if this.parentCategory}}
<DBreadcrumbsItem
@path="/c/{{this.parentCategoryLink}}"
@label={{this.parentCategoryName}}
/>
{{/if}}
{{#unless this.homePage}}
<DBreadcrumbsItem @path="" @label={{this.currentPage}} />
{{/unless}}
{{/if}}
</template>
ومع ذلك، عند استخدام DBreadcrumbsItem، يتم خلط ترتيب الفئة الأصلية والفئة الفرعية في المكون المعروض. يتم إدراج الفئة الحالية أولاً:
أتساءل عما إذا كان ذلك بسبب هذا السلوك، المذكور في رسالة الالتزام؟
- DBreadcrumbsItem - المكون الذي يسجل LinkTo لمسار التنقل. سيظهر مسار التنقل بناءً على ترتيب عرض هذه العناصر في الصفحة.