안녕하세요 — 아래 스크린샷과 같은 카테고리 배너를 만들고 있습니다:
목표
- 목업과 동일한 레이아웃: 카테고리별 배경 이미지와 오버레이된 제목/설명을 가진 큰 배너.
- 부드러운 로딩(플리커/리사이즈 없음), 완전한 반응형 지원.
- 배경은 각 카테고리에 고유한 이미지(전역 CSS 스타일이 아님)여야 합니다.
시도해 본 것
- 이미지와 텍스트를 주입하기 위한 사용자 정의 JavaScript. 동작은 하지만, 이미지가 먼저 로드된 후 리사이즈되어 어색한 전환/레이아웃 시프트가 발생합니다.
- Category Banner 컴포넌트가 근접했지만, 이 정확한 레이아웃과 카테고리별 이미지 요구사항을 충족하지 못했습니다.
요청 사항
- Discourse에서 이를 달성하기 위한 권장 접근 방식은 무엇인가요?
- 공간을 예약하여 CLS를 방지하기 위한 예시 또는 CSS/HTML 패턴(예: 고정 종횡비 래퍼/object-fit)이 있나요?
- 카테고리별 업로드 또는 테마 설정을 사용하여 배경 이미지를 깔끔하게 설정하는 팁이 있을까요?
감사합니다!
매우 초라한 데모입니다(토픽 카드를 사용하지 않고 있습니다) 하지만 내장된 카테고리 배경 이미지만으로도 쉽게 이걸 구현할 수 있다고 생각합니다:
카테고리 설정에 카테고리 배경만 추가하면
이미지가 body 태그에 배치됩니다. 그런 다음 취향에 맞게 CSS를 조정해 보세요(제 예시는 400px입니다):
`+ 텍스트 정렬을 조금만 다듬으면, 원하는 것과 비슷한 결과를 얻을 수 있을 것 같습니다. 다만 가장 큰 단점은 정말로 전체 폭(full-width)으로 표시되므로, 화면이 넓은 경우 양쪽으로 튀어나오는 것을 볼 수 있다는 점입니다.
완벽하지는 않지만, 속도는 빠르죠 
Lilly
(Lillian )
3
제가 보기에 여러분이 찾으시는 것에 가장 가까운 테마 구성 요소는 이 것입니다:
일부 아이디어를 얻기 위해 해당 구성 요소를 살펴볼 수 있지만, 맞춤형 구성 요소를 직접 만들어야 할 것 같습니다. 개발자를 고용하여 도움을 받고 싶으시다면 Marketplace 채널에 게시글을 남기실 수 있습니다.
네, 그 테마 컴포넌트가 더 나을 것 같아요. TIL(오늘 처음 알았어요)하기 전까지는 그걸 몰랐거든요.
