아니요, 직접적으로는 불가능합니다. 카테고리를 선택할 수는 있지만, 이는 주제 선택 범위를 제한하는 용도로만 사용할 수 있습니다. 이 옵션을 활성화하기 위해 더 많은 로직을 추가하고 싶지는 않습니다.
대안으로 와일드카드를 사용하여 모든 새 주제에 자동으로 태그를 부여하는 방법을 사용할 수 있습니다:
또는 다른 구성 요소를 사용할 수도 있습니다. 원하시는 화면 구성을 조금 더 자세히 설명해 주시면, 적합한 구성 요소를 추천해 드릴 수 있을 것입니다.
답변해 주셔서 감사합니다.
만약 나중에 이 컴포넌트를 제거하기로 결정하게 되면, 컴포넌트에 특정 태그를 추가하는 것은 장기적으로 불필요한 복잡성을 더하게 됩니다.
따라서 컴포넌트에서 가장 합리적인 로직은 태그가 지정되지 않은 경우 최신 게시글을 자동으로 선택하는 것입니다.
만약 이 컴포넌트를 제거하게 되면, “featured” 태그를 사용한 모든 스레드를 찾아서 태그를 해제해야 하기 때문입니다.
태그 필터링과 일괄 작업(Bulk Action) 옵션을 사용하면 주제에서 태그를 매우 빠르게 제거할 수 있습니다:
화면에 보이는 항목만 선택하는 것 같아서, 일괄 작업을 적용하기 전에 보통 아래로 스크롤하여 모든 항목이 로드되도록 합니다. 
음, 그냥 그 태그를 삭제하면 사라져요 
일반적인 참고 사항: 이 컴포넌트는 공식 Featured Tiles Component에서 포크되었습니다. 저의 전체적인 아이디어와 동기는 해당 컴포넌트가 제공하는 기능을 카드 형태로 구현하는 것이었습니다. 원본 컴포넌트보다 더 많은 기능적 기능을 추가할 계획은 없습니다. 그 이유는 코드 유지보수 측면에서 공식 컴포넌트의 호환성 수정 사항을 그대로 따라갈 수 있도록 하려는 것입니다.
관심 있는 분들을 위해 공유드립니다: 주요 카드(featured cards) 컴포넌트를 수정하여 사용자가 모든 주요 주제(사용한 주제 소스: 최신)를 가로로 스크롤할 수 있도록 했습니다.
사용한 CSS는 다음과 같습니다:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* MS Edge에서 스크롤바 숨기기 */
scrollbar-width: none; /* Mozilla Firefox에서 스크롤바 숨기기 */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Webkit 기반 브라우저(Chrome, Safari 등)에서 스크롤바 숨기기 */
-webkit-overflow-scrolling: touch; /* 터치 스크린에서는 스크롤 제스처 종료 후에도 내용이 잠시 더 스크롤되도록 설정 */
}
기능 요청.
특정 카테고리 페이지에 이 기능이 표시되도록 하는 옵션을 추가할 수 있을까요?
예를 들어, 라운지(Lounge) 카테고리를 보고 있을 때 여기에서 추천 카드가 표시되도록 하는 것입니다.
표시된 이미지는 카테고리 이미지입니다. 현재 Air 테마를 사용 중입니다. Frontier news라는 하위 카테고리에서 해당 카테고리와 관련된 추천 주제를 표시하는 기능을 적용하고 싶습니다.
카드 이미지의 권장 크기는 얼마인가요?
좋아요, 하지만 그는 FKB 주제에 대해 지원하지 않아요.
제목의 최대 글자 수는 어떻게 설정하나요? 카드에 발췌문을 표시하고 있는데, 제목과 발췌문 텍스트가 상자 밖으로 넘쳐나고 있습니다.
제목의 최대 글자 수를 제어할 설정은 없습니다. 대신 카드 높이 설정을 늘려 콘텐츠를 담을 수 있습니다.
매번 조정하고 싶지 않다면 테마 또는 컴포넌트에 다음 CSS를 적용해 보세요.
이 CSS는 카드 높이 제한을 제거하며, 다음과 같은 옵션을 제공합니다:
.featured-cards-container {
$stretch_card: "true";
$max-image-height: 10em;
$max-title-lines: 3;
$max-excerpt-lines: 4;
height: inherit;
max-height: inherit;
.featured-card {
@if $stretch_card == "true" {
height: inherit;
}
a.card-content .card-details {
.topic-title {
-webkit-line-clamp: $max-title-lines;
}
.topic-excerpt {
-webkit-line-clamp: $max-excerpt-lines;
}
}
a.card-content .card-image {
height: #{$max-image-height};
min-height: #{$max-image-height};
}
}
}
도움이 되길 바랍니다!
감사합니다. 실제로는 게시 전에 이미 정의된 높이 350을 사용하고 있었지만, 제공해 주신 코드를 직접 테스트해 보니 발췌문이 포함된 제목에 대해 카드 크기를 적절하게 조정하는 것 같습니다.
이것을 찾아내니 정말 천재적이에요! 스마트폰 화면에서도 이 기능을 활성화할 수 있는 방법이 있을까요?
어떤 이유에서인지 가로 스크롤이 더 이상 작동하지 않습니다. 데스크톱과 모바일에서 작동하게 만든 분이 계신가요?
다음과 같은 코드를 시도해 보세요:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* 스크롤바를 실재하게 만들되 보이지 않게 합니다 */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* 또는 얇게 보이도록 표시합니다 */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* 스크롤바가 최대 높이의 아래가 아닌 컨테이너 바로 아래에 위치하도록 보장합니다. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
데스크톱에서 스크롤바를 숨기는 것이 좋은 아이디어인지 확신이 서지 않습니다. 스크롤바에 접근하는 것이 답답할 수 있기 때문입니다.
얇고 투명하게(배경도 투명하게) 표시하는 것이 제 생각에는 괜찮아 보입니다. 어떻게 생각하시나요?
이제 데스크톱에서는 잘 작동합니다! 하지만 모바일에서는 안 됩니다. 모바일용 가로 스크롤 CSS를 급조해 놓긴 했지만, 그다지 정교하지는 않습니다 
또한 작은 화면에 맞춰 제목 글꼴 크기가 너무 커서 폰트 조정도 추가했습니다
.featured-cards-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1rem;
margin-bottom: 1rem;
align-content: flex-start;
overflow-x: auto;
max-height: 350px;
}
.featured-cards-container .featured-card {
min-width: 90%;
}
.featured-card a.card-content .card-details .topic-title {
font-size: var(--font-up-1);
}
전체 요소를 접을 수 있게 만들고 Homepage Feature 컴포넌트와 동일한 동작을 재현하는 방법이 있을까요?
“요약이 비어 있음” 오류는 나한테만 발생하는 건가요?
이 컴포넌트를 업데이트하고 저장소를 GitLab으로 이전했습니다: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.
새 버전은 테마 설정에서 선택 스타일 옵션을 제거하여 약간 다른 디자인 접근 방식을 취합니다. 대신, 카드(Cards)와 목록(List)의 두 가지 기본 레이아웃 구성과 CSS를 통해 사용자 정의 스타일 선언을 추가하기 위한 더 깔끔한 템플릿을 제공합니다.
이전 컴포넌트를 계속 사용하려면 https://github.com/nolosb/discourse-featured-cards에서 사용할 수 있습니다.
조금 주제에서 벗어난 이야기이지만, 저는 이것이 훌륭한 접근 방식이라고 생각합니다. 사용자에게 단순함을 제공해야 하지만 고급 사용자나 용도를 위해 사용자 정의할 수 있는 방법을 제공해야 하는 상황에서, 컴포넌트에 사용자 정의 목적으로 수많은 설정을 제공하는 것을 자제하기가 쉽지 않거든요.
아직 이 컴포넌트에는 그렇게 하지 않았지만, 제가 좋아하는 또 다른 접근 방식은 스타일을 커스터마이징하는 표준 방법으로 사용자 정의 속성을 제공하는 것입니다. 예를 들어, Manuel Kostka / Discourse / Components / Extra Banners · GitLab 에서 이렇게 하는 것입니다:
컴포넌트에서는 사용자 정의 속성을 위한 플레이스홀더와 기본 대체 값으로 스타일을 선언할 수 있습니다:
background: var(--extra-banners-background, var(--secondary));