사이트 링크를 올려 주실 수 있나요? 테마의 스타일링 때문에 문제가 발생한 것 같습니다.
2개의 좋아요
여기 제 링크입니다:
https://whois.nhachinhchu.org/t/bang-gia-xem-data-nha-chinh-chu/63389
1개의 좋아요
2개의 좋아요
이 업데이트 이후, 목차가 있는 discourse-docs 페이지에서 오류가 발생하고 있습니다. 예를 들어, 메타의 이 페이지에서는 목차가 표시되지 않고 브라우저 개발자 도구에서 오류가 확인됩니다:
제 사이트에서는 또한 페이지 상단에 "사이트의 게시물 콘텐츠 데코레이터 중 하나가 오류를 발생시켰기 때문에 게시물이 올바르게 표시되지 않을 수 있습니다. 자세한 정보는 브라우저 개발자 도구를 확인하세요."라는 배너가 표시됩니다.
3개의 좋아요
@simonk 님, 감사합니다. 방금(2분 전!) 해당 문제에 대한 수정 사항을 병합했습니다. 사이트의 구성 요소를 업데이트해 주시고, 본인 사이트에서 배너가 여전히 표시되는지 알려주세요.
3개의 좋아요
답변 감사합니다! 에러는 사라졌지만, discourse-docs 버전의 페이지에서 목차(ToC)가 표시되지 않습니다. 어제의 업데이트 이전에는 discourse-docs 버전과 “일반” 버전 페이지 모두에서 목차가 표시되었습니다.
(저에게는 긴급하지 않습니다. 업데이트를 프로덕션이 아닌 스테이징 사이트에 배포했기 때문에 제대로 작동하지 않는 것이 문제가 되지 않습니다)
수정: 2.8.0.beta11 (42c71789f9)을 실행 중인데, 이것이 차이를 만드는지 궁금합니다.
2개의 좋아요
네, 말씀하신 말씀이 뭔지 알겠어요. 불행히도 제 TOC 변경 사항은 문서에서 누락된 토픽 뷰의 아웃렛을 사용하고 있습니다. 확인해 보겠습니다.
3개의 좋아요
오늘 컴포넌트에 몇 가지 더 변경 사항을 적용했는데, @mentalstring과 @simonk가 제기한 문제를 해결할 수 있을 것입니다. 시몬, 님의 경우 문서 플러그인 업데이트도 받아야 하므로 전체 재빌드가 필요합니다.
@thaidb 님, 컴포넌트를 업데이트하면 문제가 해결될 가능성이 매우 높습니다.
4개의 좋아요
정말 많이 감사해요. 너무 기뻐요. 제 문제가 해결되었어요.
다시 한번 감사드립니다..
1개의 좋아요
완전한 재빌드 후 discourse-docs 페이지에서 목차(ToC)가 올바르게 표시되는 것을 확인했습니다. 정말 감사합니다 
또한 이제 목차를 2단계로 제한한 것도 확인했습니다. 가로 공간에 비하면 합리적인 조치라고 생각하지만, 이로 인해 3단계 제목이 부모 요소와 동일한 중첩 수준으로 목차에 표시됩니다.
즉, 현재 이 텍스트:
# First Heading
## First Subheading
### Child of First Subheading
### Child of First Subheading
## Second Subheading
### Child of Second Subheading
### Child of Second Subheading
# Second Heading
다음과 같은 목차를 생성합니다:
3단계 이하의 제목은 아예 목차에서 제외하는 것이 더 나은 것 같습니다.
또한 DOM 구조가 정확하지 않아 보입니다. 각 2단계 항목은 내부에 <li>가 하나만 포함된 <ul>로 구성되어 있습니다:
4개의 좋아요
좋은 지적입니다. 3단계 이상의 헤딩을 얼마나 자주 사용하는지는 확실하지 않지만, 이를 다시 도입하는 것은 가능할 것이며 그리 복잡하지 않을 것입니다.
다시 한번 좋은 지적입니다. 이것은 작은 실수였으며, 이 PR이 병합되면 수정될 것입니다.
3개의 좋아요
기능 요청을 하고 싶으시다면, 최대 깊이를 설정으로 제어할 수 있도록 하면 어떨까요… 
5개의 좋아요
제 경험상, 목차(ToC) 기능은 첫 게시글에서는 작동하지만 이후 게시글에서는 작동하지 않습니다. 맞습니까? 그렇다면 제 언급을 기능 요청으로 간주할 수 있을까요? 참고로, 첫 게시글에서는 목차가 정말 훌륭한 추가 기능입니다. R
안녕하세요, 여러분. 이 훌륭한 테마 컴포넌트의 최근 업데이트 이후로 모바일에서만 문제가 발생하고 있습니다. 목차 버튼을 클릭하면 전체 목차가 포함된 슬라이더가 열리지 않습니다.
데스크톱에서 매우 작은 창 크기를 사용하면 해당 버튼과 슬라이더가 정상적으로 작동합니다. 따라서 안드로이드에서만 발생하는 문제일 수 있습니다.
최신 상태(Discourse 및 TOC)의 제 포럼에서 확인한 로그는 다음과 같습니다:
Message
Uncaught TypeError: Cannot read properties of null (reading 'classList')
Url: https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr
Line: 36
Column: 49
Window Location: https://iunctis.fr/t/le-mensuel-01-decembre-2021/9591
Backtrace
TypeError: Cannot read properties of null (reading 'classList')
at n.showTOCOverlay (https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr:36:49)
at e.n._join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:412333)
at e.n.join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:409358)
at h (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:273784)
at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65110
at a (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:260923)
at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65054
at n._triggerAction (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254524)
at n.click (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254160)
Env
HTTP HOSTS: iunctis.fr
데스크톱용 Firefox에서 안드로이드 사용자 에이전트를 사용했을 때, 이 포럼에서 버튼을 클릭하면 다음과 같은 오류가 발생합니다:
Uncaught TypeError: document.querySelector(...) is null
showTOCOverlay 4916e6ed2a984e00537fe797b799637f1a801ffe.js:374
_join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
_triggerAction _application-2646ad3bbed41e42bb77806dc41fbea2.js:489
click _application-2646ad3bbed41e42bb77806dc41fbea2.js:488
trigger _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2560
n _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2422
_run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
_join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2499
setupHandler _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2524
dispatch _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:347
handle _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
add _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:123
each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:116
Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
on _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:358
initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:3354
initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:62
runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4074
walk _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4064
each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
topsort _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
_runInitializer _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2733
runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
_bootSync _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2604
didBecomeReady _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2623
invoke _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3963
flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3955
flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3969
_end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4032
end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3988
_run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
_join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
bind _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2873
u _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:272
c _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:273
setTimeout handler*a/< _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:274
l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
fire _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
ready _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
z _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
EventListener.handleEvent* _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
<anonymous> _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
<anonymous> _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
4916e6ed2a984e00537fe797b799637f1a801ffe.js:374:18
참고로 제 폰에서는 Chrome 버전 97.0.4692를 사용하고 있습니다.
이 문제를 겪고 있는 사람이 저뿐일까요?
2개의 좋아요
코어 변경으로 인해 최근 발생한 회귀(regression) 문제입니다. FIX: Restore outlet in mobile views - Pull Request #15683 - discourse/discourse - GitHub 에 수정안이 준비되어 있으며, 해당 PR이 병합되면 사이트를 다시 빌드하면 문제가 해결될 것입니다. 불편을 드려 죄송합니다.
지난 주에는 위에서 Simon이 언급한 대로, 컴포넌트에서 제목의 세 번째 들여쓰기 수준을 다시 추가했습니다.
여기에 설정 항목을 추가하는 것은 망설여집니다. 압도적인 다수의 사용 사례에서는 이것이 필요하지 않기 때문입니다. 또한, 컴포넌트에는 각 수준별로 클래스가 제공되므로, 4단계와 5단계 제목을 숨기고 싶다면 다음 CSS를 사용할 수 있습니다:
li.d-toc-h4, li.d-toc-h5 {
display:none;
}
7개의 좋아요
병합되었고 정상적으로 작동합니다. 감사합니다!
5개의 좋아요
토픽 상단의 <div data-theme-toc="true"> </div> 요소가 여분의 마진을 발생시킨다는 것을 발견했습니다. 예를 들어:
제 테마에 다음 코드를 추가했는데, 이로 인해 문제가 해결되는 것 같습니다:
// 게시글 상단의 ToC(목차) 요소는 원치 않는 공간을 발생시킵니다.
// Discourse는 게시글의 첫 번째 자식 요소의 상단 마진을 0으로 설정하지만,
// ToC가 첫 번째 자식인 경우에는 이 설정이 적용되지 않습니다.
// 대신 ToC 바로 다음 요소의 상단 마진을 0으로 설정하겠습니다.
div[data-theme-toc="true"] + * {
margin-top: 0px;
}
컴포넌트에 이와 유사한 코드가 추가되어야 하지 않을까요?
7개의 좋아요
좋은 지적이에요. 이 PR에 해당 CSS 규칙을 추가했습니다: UX: Keep core's top margin for first item in OP - Pull Request #30 - discourse/DiscoTOC - GitHub
4개의 좋아요
과거에는 이 문제를 해결하기 위해 임베드 코드를 게시글 하단으로 옮겼습니다. 약간 해킹처럼 느껴지지만, 효과가 있습니다.
1개의 좋아요
본문에 추가적인 DIV가 있는 게시글이 있습니다. 예를 들어, On Storytelling - Workbench - Podtalk Community
TOC 생성을 트리거하는 DIV가 다른 DIV 안에 있습니다… TOC는 이를 감지합니다. 그러나 DIV 안에 있는 다른 헤딩은 TOC에 의해 감지되지 않는 것 같습니다.
…최고의 스크린샷은 아닙니다. 스타일링을 위해 임의로 사용된 DIV 안에 있는 H2인데, TOC에 표시되지 않습니다.
…표시되지 않은 것은 TOC를 트리거하는 <div 입니다. 이 DIV는 이상한 속성/값 쌍을 가진 DIV 안에 있습니다…
몇 시간 후 업데이트하여 추가합니다: 헤딩이 스코프의 직접적인 자식이어야 하는 대신, “:scope h1,” 등을 사용하는 것이 더 나을까요?
…또한, 이 문제는 2021년 3월에 언급되었습니다. DiscoTOC - automatic table of contents - #255
3개의 좋아요