@manuel 님, 정말 감사합니다 – 님의 코드(그리고 추가적인 코드 조각들)를 사용하여 이 컴포넌트를 업데이트하여 몇 가지 추가 기능을 활성화했습니다:
- 이제 브레드크럼에서 하위 카테고리를 지원합니다.
- 이제 브레드크럼이 토픽 페이지 외에도 모든 카테고리 및 하위 카테고리 목록 페이지에 표시됩니다.
- 모바일에서 활성화하거나 비활성화할 수 있는 설정이 추가되었습니다.
2개의 좋아요
안녕하세요! 이 컴포넌트가 정말 좋습니다!
다만, 어떻게 해결할 수 있을지 아시는 한 가지 세부 사항이 있습니다.
스크롤을 내리면 뒤로 가기 버튼이 사라집니다(첨부된 영상을 참고해 주세요)… 스크롤을 해도 항상 보이도록 화면 상단에 고정/부유하는 방식으로 뒤로 가기 버튼을 설정할 수 있을까요?
배경: 커뮤니티는 모바일 앱에 웹뷰로 임베드되어 있습니다.
2개의 좋아요
1개의 좋아요
네, 왜냐하면 이건 홈 버튼이지 뒤로 버튼이 아니니까요!
1개의 좋아요
죄송합니다! 화살표 때문에 뒤로 가기 버튼인 줄 알았어요.
@denvergeeks 설명해 주셔서 감사합니다! 혹시 뒤로 가기 버튼을 제공하는 컴포넌트가 있는지 혹시 알고 계신가요?
1개의 좋아요
아니요, 적절하게 동작하는 뒤로가기 버튼이 포함된(또는 포함하는) 기존 TC가 있는지 제가 알지 못합니다. 뒤로가기 버튼을 포함하는 기존 기능이 있을 수도 있습니다.
다만, 사이트 내비게이션에 뒤로가기 버튼이 있는 것이 유용하다는 점은 인정합니다. 따라서 이를 제공하는 별도의 TC를 작성하겠습니다.
혹시 뒤로가기 버튼이 포함된 기존 테마나 테마 구성 요소가 있는지 확인해 주실 수 있을까요? 그런 것을 찾으면 제 작업 속도를 높이는 데 도움이 될 것입니다.
2개의 좋아요
완벽해요! 조사해서 결과를 알려드릴게요.
감사합니다!
2개의 좋아요
@denvergeeks 유용할 만한 주제를 찾았습니다:
아직까지 뒤로 가기 버튼이 포함된 기존 테마나 컴포넌트를 찾지 못했습니다.
2개의 좋아요
불행히도 iPhone 16 Pro Max에서도 동일한 문제를 겪고 있습니다.
2개의 좋아요
네, 업데이트 이후에 나타났다는 것을 확인했습니다. 안드로이드 폰에서 이 문제가 발생하고 있습니다.
2개의 좋아요
보고해 주셔서 감사합니다 @Aaron_Walsh, @cristo! 지금 바로 업데이트를 진행해 주시고 결과를 알려주세요!
4개의 좋아요
Android 쪽에서 해당 문제를 확인했습니다. 이제 수정되어 제거되었습니다.
2개의 좋아요
아이폰에서 수정했습니다!
2개의 좋아요
@denvergeeks 멋집니다! 안드로이드에서 뒤로 가기 버튼이 정상 작동합니다.
정말 감사합니다!
2개의 좋아요
브레드크럼의 위치를 결정할 방법이 없다는 것을 알게 되었습니다. 이 기능이 있으면 좋겠습니다. 예를 들어, 저는 카테고리 배너를 사용 중인데 브레드크럼이 그 위에 위치했으면 합니다.
아래에 위치하면 다소 가려 보입니다.
이 부분을 변경할 가능성이 있을까요?
감사합니다
수정할 수 있거나(최소한 켜고 끌 수 있는 옵션이 있으면) 적어도 개선할 수 있는 부분이 하나 있음을 방금 발견했습니다. 마지막 /는 필요 없다고 생각합니다.
따라서 Home / General Discussion / 대신 Home / General Discussion으로 표시되면 좋겠습니다.
수정:
방금 CSS를 사용하여 이를 처리했지만, 이것이 기본값이 되어야 한다고 생각합니다. 만약 누군가 이 설정을 원한다면:
/* 마지막 브레드크럼 항목에서 구분선(::after 콘텐츠) 제거 */
.breadcrumbs li:last-child::after {
content: none;
}
사소한 조정이지만, 제 눈에는 더 좋아 보입니다. margin-bottom을 1rem으로 증가시켜 더 많은 공간을 확보하고 '호흡’할 수 있게 했습니다. 또한 배너가 있을 때(페이지에서 그 위치를 유지해야 하는 경우) 중앙 정렬되도록 합니다. 제 이전 이미지(기본 0.5rem)와 1rem을 사용한 경우를 비교해 보세요:
제가 만든 모든 CSS 조정 후 최종 결과물:
CSS:
/* 브레드크럼 - 배경 제거 및 margin-bottom 증가 */
.breadcrumbs {
background-color: transparent !important;
margin-bottom: 1rem;
}
/* 브레드크럼 - 홈 링크의 뒤로 화살표 숨기기 */
.breadcrumbs__title .d-icon {
display: none;
}
/* 마지막 브레드크럼 항목에서 구분선(::after 콘텐츠) 제거 */
.breadcrumbs li:last-child::after {
content: none;
}
1개의 좋아요
안녕하세요. Discourse 코어에 예정된 변경 사항으로 인해 포럼에 경고가 표시되고 있습니다:
[관리자 알림] 사용 중인 테마 또는 플러그인 중 하나가 Discourse 코어의 예정된 변경 사항을 지원하도록 업데이트가 필요합니다. (id:discourse.script-tag-discourse-plugin) 식별된 문제: “Breadcrumb Links”.
저는 Discourse 클라우드를 사용 중인데, 이 문제를 제가 해결할 수 있나요, 아니면 플러그인 업데이트를 기다려야 하나요?
@manuel GitHub에서 이 컴포넌트의 기여자 중 한 분이라는 걸 확인했습니다. 그래서 여기서 언급해도 괜찮을지 모르겠네요.
아마 많은 분들이 같은 메시지를 보고 계실 겁니다:
[관리자 알림] 'Breadcrumb Links' 테마에 업데이트가 필요한 코드가 포함되어 있습니다. (id:discourse.script-tag-discourse-plugin) (자세히 보기)
그리고 자세히 보기 링크는 다음 페이지로 이동합니다:
이 컴포넌트가 업데이트될 가능성이 있을까요?
감사합니다!
1개의 좋아요
방금 이 문제를 수정하는 PR을 열었습니다. 기여자들이 검토하고 병합해 주시길 바랍니다.
2개의 좋아요
공유해 주셔서 감사합니다! 이제 경고 메시지가 없이 잘 작동합니다.
여기서 언급했던 다른 문제가 하나 더 있습니다:
이 문제에 대해 ChatGPT에게 물어보았는데 (저는 개발자가 아니므로) 다음과 같이 답변했습니다:
ChatGPT 메시지 보기
이 문제는 URL에서 topicId를 추출하는 방식에서 비롯된 것일 가능성이 높습니다:
const topicId = url.split('/')[2];
URL에 더 복잡한 패턴(공백, 특수 문자, 비표준 슬러그가 포함된 제목 등)이 포함된 경우, 이 단순한 split 메서드는 올바른 토픽 ID를 신뢰할 수 있게 가져올 수 없습니다.
왜 문제가 되는가:
/t/3ple-2015-2019-title/12345와 같은 URL은 숫자 토픽 ID가 마지막에 위치하지만, 현재 코드는 토픽 ID가 항상 세 번째 세그먼트라고 가정하고 있습니다.- URL 구조가 다양하다면, ID 대신 슬러그나 제목의 일부가 추출될 수 있습니다.
- 이로 인해 AJAX 요청(
/t/${topicId}.json)이 무효한 토픽 ID나 슬러그를 전송하게 되어 잘못된 정보나 기본 카테고리 정보(예: “General”)가 반환됩니다.
해결 방법:
URL에서 토픽 ID를 더 신뢰할 수 있는 방식으로 추출하세요:
- URL의 마지막 숫자 세그먼트에서 토픽 ID를 추출합니다.
Discourse 토픽 URL은 보통 /t/{slug}/{id} 형태를 띱니다. 예를 들어:
/t/3ple-2015-2019-title/12345
여기서 12345가 토픽 ID입니다.
다음 코드를:
const topicId = url.split('/')[2];
이렇게 교체하세요:
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // 마지막 세그먼트, 숫자 ID로 예상
더 안전하도록 topicId가 숫자인지 검증하세요:
if (!/^\d+$/.test(topicId)) {
console.error("URL에서 추출한 잘못된 토픽 ID:", topicId);
return; // 실행 중지
}
요약: updateBreadcrumbs의 코드 스니펫을 다음과 같이 업데이트하세요:
if (url.includes('/t/')) {
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1];
if (!/^\d+$/.test(topicId)) {
console.error("URL에서 추출한 잘못된 토픽 ID:", topicId);
return;
}
// 이제 topicId를 사용하여 AJAX 호출을 계속 진행
}
이렇게 하면 URL에 복잡한 제목이나 공백이 포함되어 있더라도 항상 숫자 토픽 ID를 가져올 수 있으며, 브레드크럼 카테고리 및 경로 조회 문제를 해결할 수 있습니다.
이 문제를 수정해 주실 수 있을까요?
미리 감사드립니다 