 |
요약 | 특정 뷰에서 기능 카테고리 표시. |
 |
저장소 링크 | Manuel Kostka / Discourse / Components / Featured Categories · GitLab |
 |
디스코urs 테마를 처음 사용하시나요? | 디스코urs 테마 사용 입문가 가이드 |
이 테마 컴포넌트 설치
위 두 가지 레이아웃 중 하나를 선택하거나 없음을 선택하여 자체 스타일을 선언할 수 있습니다. 또한 라우트를 선택하고 컴포넌트의 아웃렛을 설정할 수도 있습니다.
.featured-categories {
&__container {
}
&__heading {
}
&__list-container {
}
&__category-container {
}
&__category-link {
.category-logo {}
.category-name {}
.category-description {}
}
Handy TC, 감사합니다.
홈페이지에서만 표시할 수 있는 토글, 사이트 로고 표시, 로고 아래 사이트 설명 표시 기능이 있으면 좋겠다고 생각합니다.
현재는 전역 목록(최신/새로/읽지 않음/인기)에 표시됩니다. 설정에 드롭다운 메뉴를 추가하여 표시할 전역 페이지를 선택할 수 있도록 하는 방안을 고려하고 있습니다. 네, 다시 시간이 나면 로드맵에 추가할 계획입니다!
로고를 사용하는 용도는 무엇일까요? 전역 페이지에서는 이미 거의 "홈"과 같은 상태라고 볼 수 있잖아요?
사실 제가 가장 추가하고 싶은 것은 모바일 뷰입니다. 아직 이에 대한 아이디어가 없어서 모바일에서는 표시하지 않고 있습니다. 만약 아이디어가 있으시면 공유해 주시면 감사하겠습니다!
개인화된 미적 요소이며, 짧은 설명과 결합하면 새로운 방문자가 커뮤니티에 대해 빠르게 이해할 수 있게 해주고, 기존 사용자에게는 커뮤니티의 사명을 상기시켜 줄 수 있습니다. 링크의 위쪽 또는 왼쪽에 배치할 수 있습니다.
이 기능을 기본적으로 전역 링크에 표시하고, 선택적으로 카테고리별(그리고 태그 페이지?)로 표시할 수 있다면, 우선순위가 높은 영역에 대한 편리한 내비게이션 메뉴로 활용할 수 있습니다. 이것이 제가 의도하는 주요 사용 사례입니다. (참고로, 카테고리뿐만 아니라 사용자 정의 링크를 포함할 수 있는 기능도 또 다른 바람직한 기능입니다.)
개인적으로 대부분의 Discourse 사이트는 특히 처음 방문할 때 모호한 경향이 있고, 기본적으로 Discourse의 내비게이션은 일반 사용자에게 혼란을 줄 수 있다고 생각합니다. 일반적으로 제 사이트는 많은 영역 중 몇 가지 영역만 우선순위로 설계되어 있으며, 제안된 이러한 추가 기능들은 일반 사용자가 해당 영역이 무엇인지 명확하게 이해하고 쉽게 접근할 수 있도록 해줄 것입니다.
좋은 컴포넌트네요.
Versatile Banner를 설치했는데, 이 컴포넌트를 Versatile Banner 아래로 이동하는 방법은 무엇인가요?
Versatile Banner가 먼저 표시되고, 그 다음에 여러분의 컴포넌트가 표시되도록 하려면 어떻게 해야 하나요?
감사합니다.
네, 두 컴포넌트 모두 동일한 아웃렛에 렌더링됩니다. 그런 경우 요소의 순서를 결정하는 원인이 무엇인지 모르겠습니다. 제 사이트에서는 기본적으로 배너 아래에 표시됩니다.
하지만 CSS 선언을 통해 순서를 지정할 수 있어야 합니다:
.below-site-header-outlet.categories-header {
order: -1 !important;
}
.below-site-header-outlet.banner-themes {
order: -2 !important ;
}
이것은 많은 사용자 정의 옵션을 요구하는 것 같습니다. 이 컴포넌트에 그렇게 많은 로직을 추가하고 싶지 않습니다.
추천 내비게이션을 구축하는 것은 사용자 정의 HTML 배너에 더 적합한 사용 사례라고 생각합니다. 이미지와 제목이 있는 링크 몇 개만 있으면 됩니다.
그 의견에 동의합니다! 방문객과 새로 가입한 사용자를 위한 전용 배너가 도움이 되고 환영하는 느낌을 줄 수 있다고 생각합니다.
Versatile Banner 설정에 '기본 위치 스왑’이라는 항목이 있습니다. 이 기능이 도움이 될 수 있을까요?
swap default positioning
다른 배너 관련 컴포넌트가 활성화되어 있는 경우, 이 기능을 사용하여 해당 컴포넌트의 위치와 Versatile Banner의 위치를 교환합니다.
이 설정을 시도해 보세요. 저에게는 도움이 되지 않았습니다 
테마 컴포넌트를 설치했는데 메인 콘텐츠 안에 제대로 들어가지 않아서 정말 어색하고 (못생겨서) 보기 안 좋습니다. air 테마를 사용 중입니다.
어두운 색 컨테이너 안에 컴포넌트가 보이도록 어떻게 해야 할지 도와주실 수 있나요?
현재 모습은 다음과 같습니다:
다음과 같이 보이기를 원합니다:
안녕하세요,
디스코스와 테마 설정을 막 시작했습니다.
여기서 볼 수 있듯이 상단에 카드 형태의 카테고리를 표시하고 싶습니다: Secret World Legends - Funcom Forums
이 테마 구성 요소가 그 방향으로 도움이 될 것 같습니다.
설치를 완료했고 표시할 카테고리를 선택할 수 있었지만, 제목만 표시되고 있습니다.
아직 이미지를 설정하지 않았기 때문에 당연한 결과입니다.
질문(아직 아무도 물어본 적이 없는, 아마도 단순한 질문일 것입니다)은 카테고리 이미지를 어떻게 설정할 수 있는지입니다.
그리고 어떻게 "업로드"하나요?
도움 주시면 감사하겠습니다.
안녕하세요. 저는 디스코스에 처음 오게 되어 질문이 있습니다. 추천 카테고리 헤더(Featured Categories Header)에 대해 궁금합니다.
이것을 구현해보려는데 어떻게 해야 할지 모르겠습니다.
다음과 같은 코드 몇 줄을 주셨는데,
html.categories-header{
.below-site-header-outlet.categories-header {
.wrap {
.categories-header-item {
[each item's link, logo, name..]
}
}
}
}
항목의 링크, 로고, 이름을 어떻게 지정해야 하는지 궁금합니다.
이 부분을 설명해 주실 수 있는 분 계신가요?
감사합니다.
안녕하세요, 환영합니다 
예시와 같은 이미지를 표시하려면 테마 구성 요소 설정에서 관련 카테고리를 선택하고, 각 카테고리에 이미지가 할당되어 있는지 확인해야 합니다(카테고리 설정 → 이미지 → 카테고리 로고 이미지).
이런 것인가요?
그렇다면 이 CSS를 시도해 보세요. 테마 CSS나 컴포넌트에 추가하면 됩니다.
안쪽에서 제어할 수 있는 변수들을 볼 수 있습니다.
열의 개수, 요소 사이의 간격, 각 요소의 폭을 선택할 수 있습니다.
요소들은 자동으로 쌓입니다.
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 6;
--ch-gap: 2.5em;
--ch-width: 110px;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
gap: var(--ch-gap) !important;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}
이런 식으로 시도해 보세요:
.below-site-header-outlet.categories-header > div.wrap {
--ch-columns: 4;
--ch-gap-row: 2em;
--ch-gap-col: 6em;
--ch-width: 120px;
& > div {
width: var(--ch-width);
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}