이 주제에 대해 검색해 보았지만 작동하는 해결책을 찾을 수 없습니다.
카테고리와 하위 카테고리를 표시하는 간단한 기본 브레드크럼을 추가하는 방법은 무엇인가요?
예:
홈 / Tech Talks / WordPress
상단 내비게이션 바로 아래에 추가하고 싶습니다.
안녕하세요 @asugar. 
말씀하신 내용을 좀 더 자세히 설명해 주시겠어요? 우리는 카테고리나 태그를 탐색 보조 도구로 사용하는 것을 "브레드크럼(breadcrumbs)"이라고 부릅니다. @Canapin 님은 스크린샷에서 이를 강조해 표시해 주셨어요.
보통은 스크린샷을 보여주시고 표시하고 싶은 위치를 지정해 주시면, 거기에 맞춰서 작업해 드리는 방식이지만, 먼저 다른 관점에 대해 말씀드릴게요:
이것을 각 페이지에 추가하시면, 사실상 동일한 내비게이션 메뉴가 여러 개 표시되고 서로 매우 가까운 거리에 놓이게 될 것 같습니다.
대안으로, 기존 브레드크럼 내비게이션을 조정해서 사용자의 사이트에 맞게 작동하도록 할 수 있는 방법이 있을까요? 
"브레드크럼"이라는 용어의 의미를 명확히 할 필요도 있습니다. 여러 대화에서 양측이 서로 다른 것을 의미하는 경우가 많았거든요:
- 사이트 구조(카테고리/하위 카테고리/태그, 또는 책/제목/챕터)를 반영하는 계층적 브레드크럼
- 방문한 페이지의 이력을 추적하는 브레드크럼 (제 예로 드는 것은 https://www.dokuwiki.org/dokuwiki 입니다. 랜덤한 링크를 몇 개 클릭해 보고 헤더를 확인해 보세요)
@asugar 님, 어떤 유형의 브레드크럼을 말씀하시는 건가요?
@asugar 님이 기대하는 것을 추측할 수는 없지만, 아마도 다른 모든 웹페이지와 비슷할 것이며 — WordPress가 주로 사용하는 방식이기도 합니다: 카테고리를 기반으로 구축된 내비게이션용 브레드크럼이죠.
하지만 Discourse는 최대 2단계 깊이로만 구성되므로, 브레드크럼은 홈 - 카테고리 - 하위 카테고리 형식만 가능합니다 (물론 페이지 번호를 포함할 수도 있지만, 이는 쓸모없을 뿐만 아니라 구현하기가 거의 불가능할 것입니다).
따라서 브레드크럼은 공간을 차지하는 것 외에는 아무런 이점을 제공하지 못합니다.
여러분 안녕하세요. @Jagster 님의 말씀이 정확합니다. 저는 카테고리 및 하위 카테고리로 바로 이동할 수 있는 링크를 원했습니다. 예를 들어 다음과 같은 구조입니다.
홈 - 카테고리 - 하위 카테고리 - 하위 하위 카테고리 - …
Discourse의 기존 내비게이션은 확인할 수 있지만, 클릭 시 카테고리/하위 카테고리로 바로 이동하지 않습니다. 클릭하면 드롭다운 메뉴가 표시됩니다.
제가 원하는 것처럼 단순한 내비게이션을 추가하는 것이 정말 불가능한가요?
가능합니다. 모든 분들이 말씀드리고자 하신 것은, 질문하신 것과 다른 대안 솔루션이 있을 수 있다는 점이며, 그것이 관심 있는지 궁금해하신 것입니다. 그렇다고 해서 불가능한 것은 아니지만, 기본 제공 기능으로는 아닙니다. 이를 위해 맞춤형으로 디자인하거나 만들어야 합니다. 유사한 것이 만들어졌던 예시는 다음과 같습니다:
Custom top navigation links - theme - Discourse Meta 및 Custom Header Links - theme - Discourse Meta
그건 내비게이션/메뉴이고, 이미 가지고 있습니다. 브레드크럼은 내비게이션/메뉴가 아닙니다. 브레드크럼이 필요합니다.
알겠습니다. 그래서 저는 "비슷하다"라는 단어를 사용했습니다. 정확히 동일하거나 유사하거나 심지어 가깝다는 의미보다는, 구현이나 개발 방식이 비슷하다는 의미, 즉 비교할 수 있다는 뜻입니다.
Discourse에서 기술적으로 비슷한 것이 가능하다는 것을 보여주는 것이 도움이 될 수 있다고 느껴서, 두 가지가 비슷하다고 언급했습니다.
Discourse에서 커스텀 작업 없이 현재 이것이 불가능하다는 것이 확인되었으므로, 이를 위해 Marketplace 토픽을 생성해야 할 수도 있습니다.
이것은 어떤 포럼 소프트웨어에서나 흔히 볼 수 있는 전형적인 브레드크럼(breadcrumb)입니다. 위 이미지는 vBulletin에서 가져온 것입니다. 제가 말씀드린 것이 바로 이것입니다.
메뉴는 사실상 브레드크럼(카테고리 및 하위 카테고리 페이지에서 카테고리와 하위 카테고리를 표시) 역할을 하므로, 드롭다운 메뉴를 현재 카테고리나 하위 카테고리로 이동하는 단순한 하이퍼링크로 변경할 수 있을 것 같습니다. 플러그인을 작성하는 방법을 아는 사람이라면 누구나 할 수 있을 거라고 생각합니다.
토픽 페이지 상단은 아래로 스크롤하면 이미 카테고리와 하위 카테고리(및 태그)가 표시되므로, 현재 상태로 만족스러울 수도 있습니다. 플러그인 개발자가 이를 화면의 다른 위치로 이동시켜 줄 수 있을 것 같습니다.
이것을 유료로 제공하고 자유롭게 사용할 수 있게 해준다면, 저도 사용해 볼지도 모르겠습니다…
이미 그런 플러그인이 있는지 궁금한데, 아시는 분 계신가요?
페이지에서 클래식 브레드크럼 표시 문제를 해결하신 분이 계신가요?
가장 좋은 방법은 아닐 수 있지만, 저희에게는 이 방식이 잘 작동했습니다:
header.html 또는 별도 플러그인:
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);
}
});
}
}
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>
매우 좋습니다. 몇 번의 업그레이드 이후 코어에 포함되기를 바랍니다.
이 기능이 정말 있으면 좋겠어요!
이 기능을 사용할 수 있는 옵션이 있나요, 아니면 개발자를 불러와야 하나요?
신뢰할 수 있는 컴포넌트를 원한다면 개발자의 노력이 필요합니다.
이 주제에서 공유된 것을 사용하는 것은 권장하지 않습니다.
답변 주셔서 감사합니다!
개발자를 투입해서 도움을 받기로 했지만, 해당 코드에 있는 주요 문제가 무엇인지 알려 주실 수 있을까요?
정말 감사하겠습니다!
저는 개발자가 아니라서, 만약 저보다 Discourse의 구성 요소를 더 잘 아는 분이 계시다면 저보다 더 나은 답변을 주실 수 있을 거라고 생각합니다.
제가 파악한 주요한 두 가지 포인트는 다음과 같습니다.
- 데이터를 반환하기 위한 AJAX 호출이 매우 비효율적입니다. 이러한 요청을 전혀 하지 않고도 해당 구성 요소를 구현할 수 있다고 확신합니다. 이렇게 하면 전체 동작이 둔해지고, 브레드크럼이 지연되어 표시됩니다.
- 이 구성 요소는 Discourse JS API를 거의 사용하지 않습니다. 이 API는 필요한 데이터를 반환하고, 수동으로 DOM에 HTML 코드를 주입하는 대신 템플릿을 올바르게 장식/삽입할 수 있습니다.