안녕하세요 
DiscoTOC 스타일은 .with-topic-progress 클래스와 연결되어 있으며, 이 클래스는 주제에 게시물이 1개 이상 있을 때 .topic-navigation에 추가됩니다. 따라서 답글이 없는 경우 DiscoTOC 스타일이 깨집니다.
TOC는 답글 수와 관련이 없으므로, 주제에 답글이 없더라도 활성화되어야 한다고 생각합니다. 데스크톱에서는 답글이 없는 주제에서도 정상적으로 작동합니다.
테스트용 주제입니다: Customizing the topic list
이 동작을 변경하는 것이 적절할 것이라고 생각합니다.
아마도 새로운 문제는 아닐 수 있지만, 아직까지 알아차리지 못했습니다. 이제 더 적극적으로 사용하면서 알게 되었습니다.
감사합니다 
여기서도 같은 문제를 겪고 있습니다. 
(iPhone/Safari) 이 문제가 해결되면 좋겠습니다. 긴 문서에서 목차로 가려면 맨 아래까지 스크롤해야 해서 조금 번거롭습니다.
제 기본적인 코딩 실력과 ChatGPT와의 대화를 통해 작동하게 만든 것 같습니다.
커스텀 컴포넌트를 생성하고 CSS 탭에 다음을 넣었습니다:
@media (max-width: 767px) {
#topic-progress-wrapper.sticky-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
}
그리고 JS 탭에는 다음을 넣었습니다
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.onPageChange(() => {
const observer = new MutationObserver(() => {
const wrapper = document.getElementById("topic-progress-wrapper");
const tocButton = wrapper?.querySelector(".d-toc-mini button");
if (wrapper) {
if (tocButton) {
wrapper.classList.add("sticky-bottom");
} else {
wrapper.classList.remove("sticky-bottom");
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
});
답변이 없어도 이 방식이 잘 작동하는 것 같습니다.
다시 한번 말하지만, 저는 전문가가 아닙니다. 저는 그저 좋은 "질문자"일 뿐이며, 적절한 질문과 도전으로 ChatGPT와 조금씩 "대화"를 나누니 작동하는 것 같습니다.
JavaScript와 CSS에 정통한 전문가가 이를 개선하고 싶으시다면, 공유해 주십시오.
원하시는 사항:
/* 목차 사이드바의 모든 제목을 확장합니다 */
#d-toc li.d-toc-item > ul {
max-height: 500em !important;
overflow: visible !important;
opacity: 1 !important;
}
@media screen and (max-width: 767px) {
/* 목차 버튼을 포함한 래퍼를 하단에 고정(sticky)합니다 */
#topic-progress-wrapper.sticky-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* 아이콘 뒤에 버튼에 "목차"를 추가합니다 */
.d-toc-mini button::after {
content: "Table of Contents";
margin-left: 5px;
font-size: 14px;
vertical-align: middle;
}
}
JavaScript는 변경 사항이 없습니다.
안녕하세요
정말 감사합니다. 하지만 CSS만으로 구현할 수도 있다고 생각합니다. 
.with-topic-progress에 사용된 동일한 CSS를 .topic-navigation에 적용하기만 하면 됩니다. 주제에 답글이 없을 때 누락되는 .with-topic-progress 클래스가 스타일을 가로막고 있습니다.
다음과 같은 방식으로 작동해야 합니다.
모바일 CSS
// Sticky Topic Navigation
.container.posts .topic-navigation:not(.with-topic-progress) {
position: sticky;
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
z-index: z("timeline");
pointer-events: none; // the wrapper can block mobile controls
> * {
pointer-events: auto; // this unsets the above rule so the child elements are interactive
}
// Add TOC Style
.d-toc-wrapper {
position: fixed;
margin-top: 0.25em;
height: calc(100vh - 50px - var(--header-offset));
opacity: 0.5;
right: -100vw;
top: var(--header-offset);
width: 75vw;
max-width: 350px;
background-color: var(--secondary);
box-shadow: var(--shadow-dropdown);
z-index: z("modal", "overlay");
transition: all 0.2s ease-in-out;
.d-toc-main {
width: 100%;
padding: 0.5em;
height: 100%;
#d-toc {
max-height: calc(100% - 3em);
}
}
&.overlay {
right: 0;
width: 75vw;
opacity: 1;
.d-toc-main #d-toc li.d-toc-item ul {
transition: none;
}
}
a.scroll-to-bottom,
a.d-toc-close {
display: inline-block;
padding: 0.5em;
}
.d-toc-icons {
text-align: right;
}
}
}
// RTL Support
.rtl {
.topic-navigation .d-toc-wrapper {
right: unset;
left: -100vw;
&.overlay {
right: unset;
left: 0;
}
}
}
다음으로 수정되어야 합니다
이 주제는 마지막 답변 후 7일이 경과하여 자동으로 닫혔습니다. 더 이상 답변이 허용되지 않습니다.