아, 이제 이해했습니다. embedMaxHeight의 목적이 댓글을 더 네이티브한 스타일로 렌더링하여 스크롤을 최대한 줄이는 것(다만 방대한 스레드는 여전히 스크롤이 필요함)이라고 생각했기 때문에 15000px로 설정했습니다. 이제 이를 다소 줄이겠습니다.
그 경우 embedMinHeight가 의도된 대로 작동하지 않는 것 같습니다. 400px로 설정해 두었는데도 임베드는 여전히 최소 600px의 높이를 가지며, 끝에 작은 간격이 남아 있습니다.
안녕하세요!
새로 디자인된 댓글 양식이 훨씬 우수합니다. 특히 모바일 경험에서 그렇습니다! 하지만 두 가지 사소한 문제를 발견했습니다:
맞아요! @keegan 님이 모바일을 핵심 사용 사례로 삼아 만들었으며, 마음에 드신다니 기쁩니다. 다만 몇 시간 전에야 병합(Merge)을 마쳤기 때문에, 툴바 폭 깨짐 문제나 Enter 키로 전송하는 동작과 같은 후속 작업은 아직 진행 중입니다.
이 양식을 스레드(Discourse)에서도 직접 표시하는 것이 좋은 아이디어가 아닐까 싶네요. 양식이 바로 열려 있으면 기술에 익숙하지 않은 사용자들에게 훨씬 친근하고 사용하기 편합니다. 참여도를 높일 수 있을지 테스트해 볼 가치가 있지 않을까요?
사실 버그였고, 방금 다음 링크에서 수정했습니다:
이제 수정되었습니다. 업데이트해 주세요!
사이트에서 또 다른 문제를 발견했습니다. 블로그의 다크모드/라이트모드 시스템을 새로운 Discourse 임베드와 통합하여 블로그의 모드를 변경하면 임베드의 모드도 자동으로 변경되도록 설정한 것을 확인했습니다. 그러나 이 통합은 Firefox와 Chrome에서는 잘 작동하지만, Safari에서는 작동하지 않습니다. “접근 허용” 팝업이 Safari에만 관련이 있고, 스크롤바가 올바르게 작동하지 않는 다른 문제도 Safari에만 영향을 미치기 때문에, 이것이 Discourse의 문제일 것 같습니다.
이 모든 것이 다소 부수적인 이야기이지만, 다크모드/라이트모드 통합을 어떻게 구현하셨는지 궁금합니다. 몇 년 전에 임베드된 댓글의 자동 다크 모드라는 게시글을 시작했고, 이를 통해 누군가가 postMessage를 사용하여 두 시스템을 함께 작동하게 하는 스크립트를 작성하도록 할 수 있었습니다. 하지만 Discourse의 새로운 전체 댓글 시스템 임베드에서는 해당 스크립트가 깨진 것 같습니다(기본값이 이상하게도 Discourse 테마의 다크모드로 설정되어 있습니다). 따라서 질문은 이렇습니다: 이전에 작성된 postMessage 스크립트가 있었고, Discourse의 새로운 임베드 시스템에 맞게 업데이트하셨나요? 그리고 만약 그렇다면(또한 저는 WordPress를 사용하지만 질문자님은 Ghost를 사용하시므로), 코드를 공유해 주실 수 있을까요? 제 코드와 질문자님의 코드를 비교하여 Ghost와 제 블로그의 다크모드 설정에서 문제를 해결해 볼 수 있을지도 모르겠습니다.
블로그와 Discourse 모두 시스템 설정에 따라 자동으로 다크모드가 전환되도록 되어 있다면, 두 곳의 설정이 동기화됩니다.
Discourse에 자동 다크모드 기능을 추가한 내용은 Automatic Dark Mode color scheme switching 에서 확인하실 수 있습니다.
네, 하지만 제가 이해하고 기억하기로는, 해당 기능은 운영체제가 다크 모드를 사용 중인지 감지하고 그에 따라 Discourse를 조정하는 것입니다. 제가 시작한 해당 게시물은 (그리고 그 게시물도 이 게시물과 상호 링크되어 있었습니다) 운영체제 모드와 무관하게 블로그에서 라이트 모드와 다크 모드를 수동으로 전환하는 토글/버튼에 관한 것이었습니다. 제 이해가 맞나요? (그렇다면 제 이전 질문도 여전히 유효한 것이죠?)
정리하자면, 이는 제 블로그에서 사용하도록 누군가 작성해 준 스크립트이며, 이제 일부 조정이 필요한 것 같습니다 (아마도 몇 가지 클래스만 변경하면 될 수도 있지만, 확실하지는 않습니다).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Update elements after domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
방금 Discourse를 최신 버전으로 업데이트했는데 두 가지 문제가 보입니다:
네, 물론입니다.
Discourse에서 제가 사용하는 CSS입니다.
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* Iframe의 주요 배경 */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* Iframe의 주요 배경 */
html, body {
background-color: #1e2021 !important; /* 당신의 --bg */
color: #f7f7f7 !important; /* 당신의 --body-color */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* 주요 텍스트 색상 */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* 블록의 배경, 예를 들어 임베드의 푸터(응답 옵션) */
.embedded-footer {
background: #27292b !important; /* 당신의 --bg-2 */
border-top: 1px solid #27292b !important;
}
/* 테두리 색상 (밝은 테두리가 보이도록 방지) */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* 링크/버튼이 올바른 색상을 갖도록 보장 */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* 당신의 --link-color */
// }
}
이 경우, 모든 태그를 실행하지 않고 모니터링 이벤트만 트리거하는 것이 올바른 접근 방식이라고 생각합니다. 현재 설정은 page_view 이벤트를 트리거하여 사이트 전체 통계가 인위적으로 부풀려져 분석 데이터가 왜곡되고 있습니다.
하룻밤 사이에 페이지뷰가 급증했지만, 이 수치는 인위적인 것입니다. 상업적으로 합리적인 의미를 갖지 않습니다.
게다가 현재 스크립트의 로딩과 처리가 중복되고 있습니다.
**GTM(Google Tag Manager)**의 경우 상황이 더 심각합니다: 계정 내의 모든 스크립트가 두 번 주입되고 있으며, 여기에는 Google 및 Meta Ads 픽셀, 제3자 광고 네트워크 스크립트 등이 포함됩니다.
디스코urs 네이티브 분석에 대해서는 한 가지 추가 조정을 제안합니다: 임베드 트래픽을 별도의 카테고리로 분리하는 것입니다. 이를 통해 커뮤니티 트래픽과 임베드 트래픽을 별도로 확인할 수 있습니다.
정말 감사합니다. 다만, 여전히 조금 혼란스럽습니다. Ghost 기반 블로그에서 다크 모드 토글을 Discourse 임베드와 함께 작동하도록 하려고 했을 때(기본적으로 작동하지 않았기 때문), 결국 postMessage를 사용하는 코드를 구현해야 한다는 답변을 받았습니다(누군가에게 개발을 의뢰했고, 실제로 잘 작동했습니다). 그런데 제공해 주신 코드에는 JS가 전혀 포함되어 있지 않아 이해가 가지 않고, WordPress를 사용한다는 이유만으로 모든 것이 그대로 작동할 수 있는 이유도 알 수 없습니다. 어쨌든 감사합니다.
안녕하세요, 혹시 이 문제를 확인해 보신 분이 계신지 문의드립니다.
사용자들이 텍스트 필드 문제 때문에 양식을 전혀 사용할 수 없다고 보고하고 있어, 커뮤니티 운영에 상당한 장애 요인이 되고 있습니다.
LucasMiller: 기사 하단의 댓글 인터페이스에 버그가 있습니다. 게시물을 작성하기 위해 아무것도 입력할 수 없습니다(iPhone과 Android/Xiaomi 모두에서 테스트). 텍스트 필드를 클릭하여 입력을 시도하지만, 입력이 전혀 인식되지 않습니다. 가능할 때 확인해 주십시오!
이는 첫 번째 댓글이 달리는 기사에서만 발생하는 문제입니다.
LucasMiller: 텍스트를 추가하지 않은 채 인용(quote)을 생성하는 방식으로만 게시에 성공했습니다. 커뮤니티 인터페이스로 리다이렉트된 후(기사 하단에 머무르지 않고) 비로소 댓글을 추가할 수 있었습니다.
Markdown으로 우회하는 방법은 도움이 되지만, 일반 사용자들에게는 이상적이지 않습니다. 통찰이나 임시 해결책이 있다면 정말 감사하겠습니다. 도움 주셔서 다시 한번 감사합니다.
cc @Falco
이것으로 수정될 것입니다. 오늘 늦게 배포될 예정입니다.
@renato 감사합니다
@renato, 고마워! 수정됐어!
참고로, 모바일에서 가로 스크롤이 아직 표시되고 있어. 시간이 나면 확인해 줄 수 있을까?
