Fma965
5월 9, 2022, 8:17오후
1
여러분 안녕하세요,
특정 CSS를 사용 중입니다.
body[class^="category-documentation"] {
.topic-list .topic-list-header .posts,
.topic-list .topic-list-header .views,
.topic-list .topic-list-body .posts,
.topic-list .topic-list-body .views,
.topic-list .topic-list-body .posters,
.topic-list .topic-list-header .posters
{
display: none !important;
}
.topic-list .topic-list-body .main-link,
.topic-list .topic-list-header .topic-list-data
{
width: 90% !important;
}
.topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
width: 10% !important;
}
.topic-list .topic-excerpt {
display: none !important;
}
}
이 CSS는 “documentation”(문서) 카테고리에서 많은 요소를 숨기는 데 잘 작동합니다. (문서 플러그인이 있다는 건 알고 있지만, 네이티브 레이아웃이 더 좋다고 생각해서요.) 문제는 예를 들어 "Ford"에서 "Documentation"으로 클릭할 때 CSS가 새로고장되지 않아서, F5 또는 Ctrl + R로 전체 페이지를 새로고장하지 않는 한 요소들이 숨겨지지 않는다는 점입니다.
이 문제를 해결하기 위해 제가 놓치고 있는 부분이 있을까요?
반대 방향(Documentation에서 다른 카테고리로 이동)에도 같은 문제가 발생합니다.
https://community.cyanlabs.net 의 어떤 카테고리를 방문한 뒤 documentation으로 이동하면, 숨겨져야 할 CSS 요소들이 여전히 표시되는 것을 확인할 수 있습니다.
1개의 좋아요
Air 테마를 사용 중인 것으로 보이는데, 이 테마에는 Discourse 로딩 슬라이더 테마 컴포넌트가 포함되어 있습니다.
admin > customize > themes > components에서 해당 컴포넌트를 비활성화한 후 다시 시도해 보시면 어떻게 될까요? 때때로 이 컴포넌트가 페이지 전환 시 클래스가 새로고침할 때까지 남아 있는 문제를 일으킬 수 있습니다.
4개의 좋아요
Fma965
5월 9, 2022, 8:43오후
3
답장 주셔서 감사합니다.
방금 테스트해 봤는데, 불행히도 이 경우 아무런 차이가 없었습니다.
간단한 해결책이 없다면, api.onPageChange(()를 사용하여 JavaScript로 body 클래스를 확인해 보겠습니다. 다만, 그렇게 해야 한다는 것이 좀 이상하게 느껴지긴 합니다.
1개의 좋아요
아, 그렇군요… 자세히 살펴보니 테마가 body 태그에 동적으로 클래스를 추가하고 있는 것 같습니다. 예를 들어 category-documentation-21이나 category-ford-5 같은 클래스 말이죠… 페이지 전환 시 이러한 클래스가 제대로 제거되지 않는 것 같습니다.
1개의 좋아요
Fma965
5월 9, 2022, 8:55오후
5
수정: 이제 무슨 말씀인지 알겠네요. 뭔가 이유로 그 클래스가 body 요소에 남아 있는 것 같습니다
수정2: 컴포넌트가 없는 테마의 복사본을 만들어 보았는데도 동일한 문제가 계속되네요. 따라서 플러그인이나 코어에 원인이 있을 것 같습니다.
가장 엉성한 해결책 상은 저에게로 갑니다
<script type="text/discourse-plugin" version="0.8.19">
api.onPageChange((url) => {
if (url.indexOf("/c/documentation/") >= 0) {
$( "<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>" ).appendTo( "head" )
} else {
$( "#documentationworkaround").remove();
}
});
</script>
하지만 원인을 아는 분이 계시다면 알려주세요
1개의 좋아요
코어 버그인 것으로 보이므로 카테고리를 다시 분류합니다.
재현 방법:
https://meta.discourse.org/c/support/6와 같은 카테고리를 방문합니다.페이지를 새로고침합니다.
다른 카테고리로 전환합니다.
body 태그의 클래스를 확인해 보면, 이전 카테고리가 남아 있는 것을 볼 수 있습니다.
서버 측에서 추가되는 것 같으며, 엔지니어의 도움을 받아 문제를 조사한 결과, 구체적으로 다음 위치에서 발생하는 것으로 보입니다:
<link rel="modulepreload" href="#{script_asset_path script}" nonce="#{csp_nonce_placeholder}">
HTML
modulepreload_tags.join("\n").html_safe
end
def preload_script_url(url, entrypoint: nil, type_module: false, attrs: nil)
entrypoint_attribute = entrypoint ? "data-discourse-entrypoint=\"#{entrypoint}\"" : ""
nonce_attribute = "nonce=\"#{csp_nonce_placeholder}\""
extra_attrs =
attrs&.map { |k, v| "#{ERB::Util.html_escape(k)}=\"#{ERB::Util.html_escape(v)}\"" }&.join(" ")
extra_attrs = " #{extra_attrs}" if extra_attrs.present?
add_resource_preload_list(url, "script")
<<~HTML.html_safe
<script #{type_module ? 'type="module"' : "defer"} src="#{url}" #{entrypoint_attribute}#{extra_attrs} #{nonce_attribute}></script>
HTML
end
3개의 좋아요
Fma965
5월 10, 2022, 6:53오후
7
업데이트 감사합니다. 지금은 제 엉성하게 짠 자바스크립트로 문제를 우회하고 있는데, 이 버그의 진행 상황을 어떻게 추적할 수 있을까요?
이 문제가 수정되면(또는 관련 내용이 업데이트되면) 이 주제를 업데이트하겠습니다. 주제 하단의 드롭다운에서 추적 수준을 "감시 중"으로 변경하면 새 게시글에 대해 알림을 받을 수 있습니다.
Fma965
5월 10, 2022, 6:57오후
9
좋아요, GitHub 이슈가 있는지 몰랐거든요. 이미 이 주제를 지켜보고 있으니 업데이트되는 대로 확인하겠습니다.
도움 주셔서 다시 한번 감사합니다.
이 커밋에서 수정되어야 하므로, 다음에 Discourse를 업데이트하면 카테고리 클래스가 예상대로 추가/제거되어야 합니다.
committed 05:18PM - 01 Jun 22 UTC
The server-side implementation had unintentionally changed to include `-{id}` at… the end of the body class name. This change meant that the JS client was unaware of the class, and didn't remove it when navigating away from the category page.
This commit fixes the server-side implementation to match the client
4개의 좋아요
Fma965
6월 2, 2022, 4:04오후
14
감사합니다. 이제 클래스는 올바르게 업데이트되었지만, 카테고리를 전환할 때 CSS가 여전히 적용되지 않습니다.
body[class^="category-documentation"] {
.topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
display: none !important
}
}
카테고리를 이동해 보시면 올바르게 작동하지 않습니다.
1개의 좋아요
음, 예상치 못한 일이네요… JS로 추가된 CSS인가요?
Fma965
6월 2, 2022, 4:28오후
16
아니요, common 또는 desktop.css 파일에 CSS를 계획해 봤는데, 두 가지 모두 시도해 봤습니다.
아, 이제야 깨달았습니다… class^=는 클래스의 시작 부분을 확인하는데, 카테고리 클래스가 항상 목록의 첫 번째 클래스인 것은 아닙니다.
body[class*="category-documentation"]로 변경하면 작동할 것입니다. 이렇게 하면 목록 어디에 위치하든 해당 클래스 이름을 확인합니다.
5개의 좋아요
Fma965
6월 18, 2022, 4:51오후
20
이거 + 핵심 수정 사항이 함께 적용되면 동작하는 것 같습니다. 감사합니다
3개의 좋아요
