숨겨진 디렉터리 기능이 추가되었으면 좋겠습니다.
사용자 정의 플러그인
이 플러그인은 기존 플러그인을 참고하여 제작되었으며, 주로 버튼 하나를 추가하고 JavaScript를 사용하여 동적 렌더링을 수행합니다.
discourse-----------------------hide-toc (1).zip (3.3 KB)
CSS / JavaScript
css
// 에디터에서 표시되는 목차 관련 스타일
// 에디터 미리보기에서 목차를 표시하기 위한 스타일 정의
.edit-title .d-editor-preview [data-theme-toc="false"],
body.toc-for-replies-enabled .d-editor-preview [data-theme-toc="false"] {
// 배경색을 테마의 세 번째 색상으로 설정
background: var(--tertiary);
// 텍스트 색상을 테마의 두 번째 색상으로 설정
color: var(--secondary);
// 요소를 스티키 위치로 설정하여 스크롤 시 뷰포트 상단에 유지되도록 함
position: sticky;
// z-index를 1로 설정하여 다른 요소 위에 표시되도록 보장
z-index: 1;
// 뷰포트 상단으로부터의 거리를 0으로 설정
top: 0;
// 요소의 높이를 30픽셀로 설정
height: 30px;
// 요소의 표시 방식을 flexbox로 설정하여 콘텐츠 정렬 용이
display: flex;
// flexbox 항목을 수직 중앙 정렬
align-items: center;
// flexbox 항목을 수평 중앙 정렬
justify-content: center;
// 의사 요소 :before를 사용하여 요소 앞에 콘텐츠 삽입
&:before {
// 삽입할 콘텐츠를 변수 $composer_toc_text의 값으로 설정
// content: "#{$composer_toc_text}";
content: "이 게시물은 목차를 표시하지 않습니다";
}
}
JavaScript
<script>
// 요소의 스타일을 설정하기 위한 함수 정의
function setStyle(selector, styles) {
// 지정된 선택자의 요소를 찾음
const element = document.querySelector(selector);
// 요소를 찾으면 스타일 적용
if (element) {
Object.assign(element.style, styles);
}
}
// 페이지 콘텐츠가 특정 TOC 마크업을 포함하는지 확인하기 위한 함수 정의
function checkForTOCMarkup() {
// 페이지 콘텐츠가 특정 문자열을 포함하는지 확인
if (document.body.innerHTML.includes('<div data-theme-toc="false">')) {
// 타임라인 요소 숨김
setStyle('.with-timeline', { display: 'none' });
// 게시물 컨테이너의 컬럼 스타일을 100%로 수정
setStyle('.container.posts', { gridTemplateColumns: '100%' });
// 주제 콘텐츠의 너비를 100%로 설정
setStyle('.topic-body', { width: '100%' });
// 주제 맵의 최대 너비와 왼쪽 패딩 설정
setStyle('.topic-map', { maxWidth: '100%', paddingLeft: '0px' });
// 주제 아바타 요소 숨김
setStyle('.topic-avatar', { display: 'none' });
// 갭 요소의 최대 너비와 왼쪽 패딩 설정
setStyle('.gap', { maxWidth: '100%', paddingLeft: '0px' });
// 주제 푸터 버튼의 최대 너비와 왼쪽 패딩 설정
setStyle('#topic-footer-buttons', { maxWidth: '100%', paddingLeft: '0px' });
} else {
// 수정 전 기본 코드를 절대 사용하지 마세요. 모바일에 영향을 미치므로 시스템이 자동으로 처리하도록 두세요
// setStyle('.topic-body', { width: 'calc(var(--topic-body-width) + var(--topic-body-width-padding)*2)' }); // 기본 너비로 복원
setStyle('.with-timeline', { display: '' }); // 기본 스타일로 복원
setStyle('.container.posts', { gridTemplateColumns: '' }); // 기본 컬럼 스타일로 복원
setStyle('.topic-body', { width: '' }); // 기본 너비로 복원
setStyle('.topic-map', { maxWidth: '', paddingLeft: '' }); // 기본 스타일로 복원
setStyle('.topic-avatar', { display: '' }); // 기본 표시로 복원
setStyle('.gap', { maxWidth: '', paddingLeft: '' }); // 기본 스타일로 복원
setStyle('#topic-footer-buttons', { maxWidth: '', paddingLeft: '' }); // 기본 스타일로 복원
}
}
// DOM 변경 사항을 모니터링하기 위한 옵저버 인스턴스 생성
const observer = new MutationObserver(checkForTOCMarkup);
// 옵저버 옵션 구성: 자식 노드 변경 및 모든 후손 노드 모니터링
const config = { childList: true, subtree: true };
// 문서 변경 사항 관찰 시작
observer.observe(document.body, config);
// 페이지 로드 시 즉시 한 번 검사 실행
checkForTOCMarkup();
</script>
