 |
요약 | [details] 스타일을 적용하여 클릭 가능함을 더 명확히 표시합니다 |
 |
미리보기 | Theme Creator를 통해 확인 |
 |
저장소 | Ger / Component - Better Hide Details · GitLab |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
Discourse 테마 초보자? | Discourse 테마 사용 가이드 |
이 테마 컴포넌트를 설치하세요
설명
이 컴포넌트는 [details]의 헤더가 버튼처럼 작동한다는 것을 더 명확하게 보여줍니다. 중첩된 details는 레벨이 깊어질수록 색상이 더 강하게 적용되며, 각 요소가 어디서 끝나는지 명확하게 구분됩니다.
스크린샷
Hide Details Button Style 테마 컴포넌트 사용 시
Hide Details Button Style 테마 컴포넌트 미사용 시
컴포넌트가 비활성화된 일반 설치 환경에서의 모습입니다:
예제에 사용된 소스
[details=제목 줄]
내용
[details=닫힌 중첩 제목]
중첩된 내용
[/details]
[details=중첩 제목]
더 중첩된 내용
[/details]
[/details]
[details=두 번째 details]
더 많은 내용
[/details]
텍스트
[details=추가 details]
더 많은 내용
[/details]
(↑ Discourse 메타 포맷팅의 details 숨김 기능과 관련하여, 이 설치 환경에서 테마링에 영향을 미치는 것이 무엇인지, 혹은 이것이 향후 도입될 기능인지에 대해 정확히 확신하지는 못합니다.)
기능
[details]의 시작/끝 위치와 클릭 가능함을 명확히 표시합니다.- 현재 선택된
[details]는 TAB 키를 눌렀을 때 시각적으로 강조됩니다. - 중첩, 연속된 여러
[details]등 여러 가지 예외적인 경우를 처리합니다. - 에디터 미리보기에서 실시간으로 적용됩니다.
- “최근 답변” 등의 스트림에서 기본 표시가 됩니다.
- 색상 스킴의 삼차(Tertiary) 색상을 사용합니다.
- 여러 줄로 된 요약 제목에는 별도의 화살표가 표시됩니다.
참고 사항
- 제가 참여하고 있는 Discourse 인스턴스의 모든 테마로 테스트를 수행했으며, 정상적으로 작동했습니다.
- 일부 최신 CSS 기능을 사용하므로, 오래된 브라우저에서는 색상이 올바르게 표시되지 않을 수 있습니다.
- Discourse가 향후
[details]의 구조나 스타일을 변경할 경우, 이 테마 컴포넌트는 작동하지 않을 가능성이 높습니다.
배경색 설정이 있으면 좋겠습니다.