모든 게시글(그리고 작은 액션)에 대해 nth-child를 사용하여 번갈아 가며 색상을 설정하고 있으며, 그 설정은 다음과 같습니다:
그러나 2.8에서 새로 도입된 “마지막 방문” 표시가 작은 액션으로 취급되어, 이 번갈아 가며 적용되는 게시글 색상 설정에 포함되어 버립니다:
가장 원하는 것은 다음과 같은 형태입니다:
즉, “마지막 방문” 바가 nth-child가 배경색을 결정할 때 자식으로 계산되지 않도록 하는 것입니다.
제 첫 번째 생각은 JavaScript를 사용하여 마지막 방문 바 뒤에 새로운 div를 추가하는 것이었고, 실제로 이렇게 하면 원하는 대로 동작합니다:
구현 코드는 다음과 같습니다:
<script type="text/discourse-plugin" version="0.8">
var addedElement;
api.onPageChange(() =>{
addedElement = false;
//window.onload = lastPostFix();
});
async function lastPostFix()
{
var elements = document.getElementsByClassName('topic-post-visited');
var newElement = document.createElement("div");
newElement.classList.add('small-action');
while(elements.length > 0 && !addedElement)
{
elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
addedElement = true;
}
}
</script>
하지만 위아래로 스크롤하면 게시글이 단순히 로딩되지 않는 것부터, 거대한 빈 공간이 생기는 것, 그리고 세 번째 사진에서 무슨 일이 일어나고 있는지까지, 여러 문제가 발생하는 것 같습니다:
이 문제를 해결할 더 나은 방법이 있을까요?
Don
1월 30, 2022, 8:14오후
2
다음과 같이 시도해 보세요.
.small-action.topic-post-visited {
height: 0;
}
그렇게 하면 더 얇아지긴 하지만, 여기서는 그게 핵심 문제가 아닙니다. 제가 이상적인 예시로 제시한 것은 CSS를 직접 편집해서 만든 것이었는데, 이건 사실상 자명한 작업입니다. 실제 문제는 게시글 배경색이 nth-child 셀렉터로 처리되는데, .small-action.topic-post-visited 요소가 자식으로 계산되어 원치 않는 상황에서 nth-child를 토글시키기 때문입니다.
시각적으로는 다음과 같은 결과가 나타납니다:
밝은 색상이 마지막 방문 요소의 배경으로 사용되면서, 바로 위와 아래 게시글이 모두 더 어두운 색상이 됩니다.
이 새로운 요소를 무시하고 색상이 교차되는 우리의 이상적인 경우와 비교해 보세요:
그래서 바가 언로드될 정도로 충분히 스크롤하면 재미있는 동작이 나타납니다. “마지막 방문” 바가 사라질 때 사이트가 어떤 항목을 어떤 색으로 칠해야 할지 다시 결정하는 과정에서 게시물이 앞뒤로 색을 깜빡입니다.
이는 매우 이상적인 상태가 아니며, 교차 색상 표시가 마지막 방문 지표보다 우리에게 더 중요하므로 이 문제를 제대로 해결하거나 해당 기능을 완전히 비활성화하는 방법이 매우 필요합니다.
응답이 없으니 이게 불가능한 것 같네요.
이 기능을 완전히 비활성화하는 방법은 무엇인가요?
임시 바를 위해 모든 게시물이 색으로 깜빡이는 건 가치가 없어요.
네, :nth-child나 :nth-of-type로는 작동하지 않습니다. 이들은 단순히 자식 요소의 개수를 세기 때문에 클래스를 구분하지 않으며, 클래스로 필터링할 수도 없습니다.
실제로 필요한 것은 :nth-child(2n of .topic-post)이지만, 이는 현재 Safari에서만 지원됩니다.
하지만 다음과 같은 방법을 시도해 볼 수 있습니다.
헤더 .every-second 클래스를 추가합니다. 그러면 CSS로 쉽게 해당 요소를 지정할 수 있습니다.
<script type="text/discourse-plugin" version="0.8">
api.addPostClassesCallback((attrs) => {
const postNum = attrs.post_number;
if (postNum % 2 === 0) {
return ['every-second']
}
});
</script>
CSS
.topic-post {
background: var(--primary-very-low);
&.every-second {
background: var(--primary-low);
}
}
.small-action.topic-post-visited {
height: 0;
}
방문한 토픽 게시물 라인
스크롤링
Falco
2월 2, 2022, 11:04오후
7
순수 CSS 솔루션을 유지하기 위해 여기에서 더 구체적인 선택자를 사용할 수 있지 않나요?
현재 CSS 규칙의 스니펫을 공유해 주시겠습니까?
saquetim
2월 3, 2022, 3:13오전
8
CSS만으로 동일한 효과를 낼 수는 있지만, 약간 해킹적인 방식이며 포스트 스트림에서만 작동합니다. 토픽 목록에서는 작동하지 않습니다. 왜냐하면 :nth-child( of <selector> syntax) 문법을 선택하는 브라우저는 Safari뿐이며, 이 효과를 적용할 수 있는 대상 속성이 없다는 점을 제가 확인한 바로는 알 수 없기 때문입니다. 따라서 자바스크립트가 필요합니다.
@orangeandblack5 , 포스트 내부의 article 요소를 대상으로 해야 합니다. id 속성은 id=post_N 패턴을 따르며, 여기서 N은 스트림 내 포스트의 번호입니다.
따라서 아래 CSS와 같이 짝수인 것만 대상으로 삼을 수 있습니다:
.topic-post {
article[id$="0"], article[id$="2"], article[id$="4"], article[id$="6"], article[id$="8"] {
background-color: peachpuff;
}
}
그걸 시도해 볼 수는 있지만, 이번 주에는 작은 액션을 포함해야 합니다. 가능하면 순수 CSS 솔루션을 원했지만, 그것도 별다른 성과를 내지 못했네요.
재미있는 사실 - 모든 작은 동작이 동등하게 생성되는 것은 아닙니다!
순수 CSS 아이디어를 시도해 보기로 했는데, 불행히도 스레드 잠금, 잠금 해제, 고정과 같은 일부 작은 동작은 전체 게시물로 집계되어 고유한 ID를 부여받지만, 모든 동작이 그렇지는 않습니다.
참고로 이 문제는 @Don 님이 제시한 JS 수정안에도 영향을 미칩니다. 우회 방법을 찾아보겠지만, 제 JS 지식은 CSS만큼은 아닙니다.
