정말 많이 도움이 되었습니다, 정말 감사합니다!
이 코드를 사용해 보았지만 작동하지 않는 것 같습니다.
breadcrumbsContainer와 흰색 배경은 보이지만, 그 안에 브레드크럼이 생성되지 않습니다.
컴포넌트로 사용해보고, 테마의 “Custom CSS/HTML” 섹션에 직접 추가해서도 시도해 보았습니다.
무엇을 잘못하고 있는지 아이디어가 있을까요?
네, @DogBite 해결 방법은 header.html의 상단과 하단에 Script 태그를 추가하는 것입니다…
상단에:
<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) => {
// 브레드크럼 컨테이너를 초기화하는 헬퍼 함수
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// 홈페이지에 있는 경우
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/')) {
// 카테고리 페이지에 있는 경우
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/')) {
// 토픽 페이지에 있는 경우
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;
// 이제 카테고리 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>
조금 더 살펴본 결과, 올해早些에 Discourse에 breadcrumbs 컴포넌트가 추가되었습니다: FEATURE: Introduce DBreadcrumbs components (#27049) · discourse/discourse@1239178 · GitHub. 현재는 일부 관리자 페이지에서만 렌더링됩니다.
저는 breadcrumbs를 렌더링하기 위한 테스트 컴포넌트를 작성했습니다: 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을 사용하면 렌더링된 컴포넌트에서 상위 카테고리(parent-category)와 하위 카테고리(sub-category)의 순서가 뒤섞입니다. 현재 카테고리가 먼저 삽입됩니다:
이것이 커밋 메시지에 명시된 동작 때문일까요?
- DBreadcrumbsItem - LinkTo를 등록하는 컴포넌트입니다.
breadcrumb trail은 페이지에서 이러한 항목들이 렌더링되는 순서에 따라
표시됩니다.