사이드바 커스터마이징 기능이 조만간 추가될 것으로 예상하지만, 당장은 “배지” 링크를 제거하거나, 최소한 “더 보기…” 안에 숨기고 싶습니다.
지금은 CSS로 임시로 숨기는 것이 좋을까요?
CSS를 정확히 작성하는 방법을 모르겠습니다. 링크를 포함하는 div 요소들은 sidebar-section-link-wrapper 클래스를 가지고 있으며 id가 없습니다. a.sidebar-section-link-badges { display: none; }로 a 태그를 숨기려고 해도 아무것도 숨겨지지 않습니다.
nth-child은 많은 상황에서 매우 유용하지만, 이 경우에는 위험할 수 있다고 생각합니다. 숫자만 기반으로 하기 때문에, 이 방식을 사용하려면 배지가 항상 동일한 위치에 유지된다는 보장이 필요합니다.
배지 앞에 다른 요소가 추가되거나 삭제되거나 이동되면 배지의 위치가 바뀌게 되며, 이로 인해 배지가 노출되거나 다른 요소가 숨겨지는 문제가 발생할 수 있고, 이는 쉽게 발견되지 않을 수 있습니다.
:has()는 이 용도에 이상적이지만, 안타깝게도 아직 지원 범위가 제한적입니다. 특히 Firefox에서는 기본적으로 비활성화되어 있으며, 많은 모바일 브라우저에서는 지원하지 않습니다.
숨기는 것이 결정적으로 중요하지 않다면, 즉 :has()를 아직 지원하지 않는 브라우저에서는 표시되더라도 가능한 한 최고의 경험을 위해 숨길 수 있는 곳에서는 숨기는 것이 허용된다면, 다음 선택자를 사용할 수 있습니다:
sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }
아이디어 감사합니다. 당분간 그렇게 할 것 같습니다. 하지만 id가 추가되기를 바랍니다.
Don
10월 2, 2022, 1:02오후
5
안녕하세요,
이렇게 숨길 수 있습니다.
.sidebar-section-link-wrapper {
.sidebar-section-link.sidebar-section-link-badges {
display: none;
}
}
이 내용을 기존 테마 컴포넌트에 그대로 복사해서 붙여넣었는데(기존 햄버거 메뉴에서도 같은 방식으로 작동했었거든요), 바로 작동했어요! 정말 감사합니다. 다른 분들에게도 다시 한번 감사드립니다.
불행히도 이 CSS가 2.9.0beta12에서 작동하지 않는 것 같습니다… 혹시 아이디어가 있으신가요?
Don
11월 20, 2022, 5:38오후
10
이 방법 은 최신 버전에서도 여전히 나에게 잘 작동합니다.
코드를 공유해 주시겠어요?
죄송합니다. 실제로는 작동합니다. ‘더 보기’ 링크 관련 버그 때문에 주석 처리해 두었던 것이었습니다.
해당 버그는 ‘더 보기’ 메뉴 옵션이 없는데도 링크가 표시되는 문제입니다. 제 포럼의 옵션 수를 고려하면, 제가 원하지 않아도 ‘배지’ 옵션이 존재 하기 때문에, 적어도 '더 보기’에는 할 일이 있는 셈이죠! (문제는 여전히 남아 있습니다… 배지 페이지 자체에 있을 때, 쓸모없는 ‘더 보기’ 링크가 여전히 표시되거든요.) "More..." shows in sidebar when there is nothing more
어떤 이유인지 모르겠지만, 이 게시물을 수정할 때 ‘텍스트 위에 URL을 붙여넣어 하이퍼링크 생성’ 기능이 작동하지 않았습니다.
Don
11월 21, 2022, 9:08오전
12
알겠습니다. 사실 이것은 버그가 아니라고 생각합니다. More 메뉴 옵션들이 존재하지만 숨겨져 있으므로 비어 있지 않기 때문입니다. 제 이해가 맞다면 More 메뉴 안의 모든 것을 숨기는 건가요? 그렇다면 More 섹션 전체를 숨기는 것이 더 나을 것 같습니다?
모든 페이지에서 More 메뉴 드롭다운을 숨기는 방법:
// 모든 페이지에서 More 메뉴 숨기기
.sidebar-more-section-links-details {
display: none;
}
특정 페이지에서만 숨기고 싶다면 body 클래스를 사용하여 타겟팅할 수 있습니다.
여기에서 찾을 수 있습니다.
예를 들어 배지(badges) 페이지에서는 다음과 같이 보입니다:
// 특정 페이지(배지)에서 More 메뉴 숨기기
body.badges-page {
.sidebar-more-section-links-details {
display: none;
}
}
이렇게 하면 More 드롭다운은 숨겨지지만 사이드바의 Badges 는 표시됩니다.
하지만 이전 코드를 사용하여 Badges를 숨기면 그것도 표시되지 않습니다.
// 배지 More 메뉴 항목 숨기기
.sidebar-section-link-wrapper {
.sidebar-section-link.sidebar-section-link-badges {
display: none;
}
}
// 특정 페이지(배지)에서 More 메뉴 숨기기
body.badges-page {
.sidebar-more-section-links-details {
display: none;
}
}
더 많은 항목이 실제로 존재할 때만 “더 보기” 옵션이 표시되어야 하며, 따라서 "더 보기"를 클릭했을 때 어떤 효과가 있어야 한다고 생각합니다. 그래서 저는 이것을 버그로 보고 있습니다. 버그 보고서는 여기에 있습니다: "More..." shows in sidebar when there is nothing more