업데이트 감사합니다! 
CSS 해킹을 통해 카드 모드에서 아바타를 썸네일 위에 겹쳐서 배치했습니다:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
아바타는 계속 표시하면서 (보라색) 토픽 작성자 div의 높이를 0으로 줄여 간격을 효과적으로 제거하는 방법은 무엇일까요?
1개의 좋아요
커스텀 CSS를 작성하고 있다면, 미리 설정된 레이아웃 중 하나를 덮어쓰는 코드를 추가하는 것보다 테마 설정에서 레이아웃 옵션으로 None(없음)을 선택하고 스타일을 처음부터 선언하는 것을 실제로 권장합니다.
예를 들어, 기본 Cards 스타일시트를 복사하고 featured-topics__topic-details 컨테이너를 그리드로 선언할 수 있습니다. 그러면 절대 위치 지정(absolute declarations)으로 요소를 여기저기 이동하는 대신, 원하시는 대로 요소를 정확히 배치할 수 있습니다.
2개의 좋아요
좋은 아이디어입니다!
지금은 템플릿에 만족하고 있으며, 처음 테스트할 때를 위해 CSS를 살짝 조정하는 정도만 하겠습니다. CTR 최적화 단계에 도달하면 아마도 조언을 따를 것 같습니다. 
2개의 좋아요
이것이 의도된 동작인지 버그로 간주될 수 있는지 확실하지 않습니다:
설정에서 세 개의 토픽이 설정되어 있지만 실제로는 두 개만 표시될 때, 세 번째 토픽이 있어야 할 위치에 공백이 생깁니다. 이러한 경우 카드가 전체 너비를 채우도록 조정되면 이상적일 것입니다.
모바일에서 가로 스크롤을 사용하고 싶으신 분들을 위해 제가 (AI의 도움으로) 직접 작성한 CSS를 공유합니다. 또한 우리의 사용 사례에 더 적합하다고 판단하여 스크롤 스냅과 크기 조정도 함께 포함했습니다.
P.S. HTML을 추가하지 않고 내비게이션 필을 만들어 보려고도 했는데, 그건 정말 무리한 시도가었습니다.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* 인접 카드 가시성을 위한 측면 패딩 */
gap: 1rem; /* 카드 간 일관된 간격 */
overscroll-behavior-x: contain; /* 오버스크롤 간섭 방지 */
scroll-behavior: smooth; /* 부드러운 스크롤 */
scrollbar-width: none; /* 스크롤바 숨기기 */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* WebKit 브라우저에서 스크롤바 숨기기 */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* 측면 가시성을 위한 더 좁은 카드 */
min-width: 280px; /* 작은 화면을 위한 최소 너비 */
scroll-snap-align: center; /* 스크롤 시 각 카드를 중앙 정렬 */
height: unset !important; /* 일관된 높이 */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
안녕하세요, 이 컴포넌트를 만들어 주셔서 정말 감사합니다. 정말 마음에 듭니다!
혹시 타이틀 크기를 조정하는 법을 알려주실 수 있을까요? 지금은 너무 큽니다.
이 컴포넌트가 향후 디스코어 코어 변경 사항과 호환되도록 업데이트가 필요하다는 오류 메시지가 표시되었습니다. 업데이트가 예정되어 있는지 아시는 분 계신가요?
올해早些에 이 구성 요소를 업데이트했습니다. 새 버전을 사용하려면 다시 설치해야 합니다. 관련 링크: 
Featured Topics - #38 by manuel
1개의 좋아요
오, 정말 감사합니다. 작동했어요!
다만 제가 해결하지 못하는 것(아마도 1시간 동안 Chat GPT를 괴롭혔나 봐요…)은 카드의 높이입니다 — 높이를 줄이거나 제거하는 방법에 대한 팁이 있을까요?
마누엘 씨, 안녕하세요. 멋진 테마 컴포넌트에서 이미지를 무시하게 하는 방법이 있을까요? (즉, 이미지 대신 발췌문만 보이게 하는 것)
이미지가 없는 주요 주제들이 꽤 있는데, 이 주제들을 강조하고 싶은데 이미지 있는 주제들과 나란히 놓이면 보기 좋지 않습니다. 또한 이미지보다는 텍스트에 더 관심이 있습니다.
컴포넌트 템플릿은 주제에 사용 가능한 다양한 콘텐츠를 렌더링합니다. 최종 외관은 스타일 규칙으로 조정됩니다. 예를 들어 레이아웃으로 "카드"를 선택하면, 대표 이미지가 있으면 주제 발췌문이 숨겨지고, 대표 이미지가 없으면 표시됩니다:
항상 발췌문만 표시하고 이미지를 표시하지 않으려면 레이아웃으로 "없음"을 선택하고 자체 스타일시트를 추가하거나, 이미지를 표시하고 발췌문을 숨기는 카드 레이아웃의 규칙을 재정의할 수 있습니다.
1개의 좋아요
이것은 정말 훌륭한 컴포넌트인 것 같습니다!
솔직히 말하면, 이 컴포넌트가 하는 것과 똑같은 일을 하는 테마 컴포넌트를 만들려고 2~3일을 보냈습니다. 많은 것을 배울 수 있었기 때문에 그 시간이 낭비되었다고 느끼지는 않지만, ask.discourse의 조언을 더 일찍 듣고 이 컴포넌트를 확인해 보았더라면 좋았을 것 같다는 생각은 듭니다.
아직도 해결하지 못한 문제가 하나 있습니다.
카드 레이아웃을 좋아하지만, 카드 레이아웃에 썸네일과 발췌문(excerpt)을 함께 표시하고 싶습니다. 힌트가 있다면 감사하겠습니다.
대신 현재는 리스트 레이아웃을 사용하고 있지만, 몇 가지를 변경하고 싶었습니다. 저는 그것들을 common.css 탭에 추가했습니다. 다른 분들에게 도움이 될 수도 있을 것 같습니다.
토픽 태그를 제거하려면
.featured-topics__topic-tag {
display: none;
}
저자 아바타를 제거하려면
.featured-topics__wrapper .topic-author {
display: none;
}
카테고리 링크를 제거하려면
.featured-topics__wrapper .category-link {
display: none;
}
수정하여 추가할 내용:
위 원본 게시글은 그대로 두되, 추가하고 싶은 내용이 있습니다.
카드 뷰에서 발췌문이 표시되도록 만드는 방법
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
또한, 데스크톱에서는 카드 레이아웃보다 리스트 뷰 레이아웃이 더 마음에 들지만, 모바일에서는 보기 흉합니다. 썸네일이 왼쪽에 있고, 제목과 발췌문이 오른쪽의 좁은 열에 배치되어 있습니다. 텍스트가 썸네일 주위로 감기도록 하거나 모든 것을 단일 열로 쌓아 올리는 방법을 아직 찾지 못했습니다.
카드 레이아웃에서 썸네일과 발췌문이 표시되도록 하는 방법을 알아냈고, 이는 모바일에서도 꽤 괜찮게 보이므로, 대부분의 사용자가 휴대폰으로 사이트를 보고 있을 것으로 생각되어 해당 레이아웃으로 전환했습니다.
훌륭한 컴포넌트와 플러그인입니다. 수고해주셔서 감사합니다!
다만, F5 키를 눌러 전체 페이지를 새로고침하지 않는 한 콘텐츠가 갱신되지 않는 문제가 있는 것 같습니다.
예를 들어:
추천 태그가 있는 토픽을 생성한 후,
웹사이트 배너를 클릭하여 홈페이에 이동합니다.
해당 토픽은 ‘추천 토픽’ 섹션에 표시되어야 하지만, 실제로는 표시되지 않습니다.
F5 키로 페이지를 새로고침해야만 표시됩니다. 배너를 다시 클릭해도 여전히 표시되지 않습니다.
추천 게시물을 삭제할 때도 마찬가지입니다. F5 키로 페이지를 새로고침하거나 탭을 닫고 다시 열어야만 사라집니다.
이런 현상이 발생하는 이유가 무엇일지 혹시 아이디어가 있으신가요?
1개의 좋아요
이는 의도된 동작입니다. 콘텐츠는 동적으로 업데이트되지 않으며, 페이지 로드 시점의 상태를 반영합니다. 일반적으로 이는 문제가 되지 않습니다. 왜냐하면 사이트를 새로 방문하는 사용자에게는 항상 최신 콘텐츠가 표시되므로요.
3개의 좋아요
방금 이 컴포넌트를 살펴봤습니다. 우리의 몇 가지 요구 사항을 잘 충족시켜 줄 것 같습니다. 감사합니다. 테스트를 해보던 중, 파빌리온 드롭다운 헤더 컴포넌트와 충돌이 발생할 수 있음을 확인했습니다.
컴포넌트를 테스트하면서 미리보기(preview)를 사용했을 때 파빌리온 드롭다운 헤더가 사라지는 현상이 발생했습니다. 이는 알려진 문제인가요? 'Featured Topics’가 제공하는 강화된 뷰와 함께 드롭다운 메뉴를 유지하면서 이 문제를 해결할 방법이 있을까요?
안녕하세요 @manuel. 피드백을 남기는 곳이 아닌가요? 더 적절한 곳이 있다면 알려주세요.
안녕하세요 @TestingRico. 이 곳은 해당 컴포넌트에 대한 피드백을 남기는 올바른 장소입니다. 다만, 컴포넌트 자체에는 문제가 없는 것으로 보입니다. 구체적인 오류 메시지가 있으시면 확인해 드릴 수 있지만, 사용자의 사이트에서 실행 중인 다른 코드나 컴포넌트와의 호환성 문제는 디버깅해 드리기 어렵습니다.
Manuel, 안녕하세요 - 또 다른 훌륭한 컴포넌트네요!
각 이미지 우측 상단에 /tag/undefined로 연결되는 이상한 깨진 링크가 있는 것 같습니다. spokes.nz에서 이를 확인할 수 있습니다.
또한, 태그로 이동하는 “모든 추천 항목 보기” 링크를 추가하는 것에 대해 어떻게 생각하시는지 궁금합니다. (아니면 원래 의도가 그거였을까요?)
마지막으로, 커스텀 홈페이지 프레임워크의 유사 항목 블록 레이아웃을 정말 마음에 들어 합니다. 같은 줄에 더 컴팩트한 사용자 아이콘과 사용자 이름이 사용되는 방식이죠. 이 TC에도 이 방식이 잘 어울릴 것 같아 궁금합니다:
1개의 좋아요
@nathank, 태그 버그를 수정하고 컴포넌트를 최신 패턴 및 도구로 전반적으로 업데이트했습니다.
이 컴포넌트는 여러 태그를 선택할 수 있기 때문에 “모두 보기” 링크를 추가하지 않았습니다.
