테마에서 ERB 스플래시 템플릿을 직접 편집할 수 없으며, 스플래시가 코어 CSS/JS보다 먼저 로드되므로 커스터마이징이 까다롭습니다.
테마의 일반 CSS/SCSS 탭에서 작성한 CSS는 컴파일되어 스플래시 로더가 표시된 후에만 로드됩니다. 따라서 해당 CSS가 정상 작동하더라도, 로드 시점에 원래의 점들이 잠시 표시됩니다.
그럼에도 불구하고, 테마의 head_tag 안에 인라인 CSS를 주입하여 스플래시 애니메이션을 오버라이드할 수 있습니다. 이렇게 하면 스타일이 즉시 적용되어 기본 점들의 깜빡임 현상을 방지할 수 있습니다.
아래는 기본 점 애니메이션을 Codepen의 것과 유사한 Pulser 효과로 대체하는 예시입니다:
<style>
:root {
--pulser-color-1: #ffcc00;
--pulser-color-2: #ff6347;
}
#d-splash .dots {
all: unset;
position: absolute;
width: 1.6em;
height: 1.6em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
#d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
#d-splash .dots[style*="--n:0"] { transform: translate(0%, -50%); }
#d-splash .dots[style*="--n:1"] { transform: translate(150%, -50%); }
#d-splash .dots[style*="--n:2"] { transform: translate(300%, -50%); }
#d-splash .dots::before,
#d-splash .dots::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--pulser-color-1);
top: 0;
left: 0;
opacity: 0;
animation: pulse 1s ease-out infinite;
}
#d-splash .dots::before {
border-color: var(--pulser-color-2);
animation-delay: 0.3s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
</style>
참고: 브라우저는 <style> 태그 내에서 SCSS를 파싱할 수 없습니다. 따라서 SCSS를 그대로 인라인으로 넣을 수 없으며, SCSS 대신 CSS를 사용해야 합니다.
결과:
새로운 테마 컴포넌트를 생성하고, 코드 편집(Edit Code)을 클릭한 후 Head 태그에 들어가서 위의 블록을 붙여넣어야 합니다.
저장 후 하드 리로드로 사이트를 새로고침하면 스플래시 화면에서 업데이트된 펄스 애니메이션이 즉시 표시됩니다.
이것은 Discourse가 계획된 v2 업데이트에서 더 커스터마이징 가능한 스플래시 화면을 구현할 때까지 유용한 우회 방법입니다.