홈페이지 기능

:discourse2: 요약 Homepage Feature는 커뮤니티 홈페이지에서 이미지와 함께 최대 5개의 주제를 보여줍니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 리포지토리 링크 https://github.com/discourse/discourse-homepage-feature-component
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

기능

기본적으로 테마는 featured 태그가 지정된 최근 3개의 주제를 선택하고 해당 주제에서 첫 번째 이미지를 가져옵니다. 설정에서 사용자 지정 태그를 선택하고, 태그를 숨기고, 사용자 지정 제목을 설정하며, 컴포넌트가 표시되는 위치를 구성할 수 있습니다.

:iphone: 모바일 및 작은 화면

기본적으로 모바일에서는 주제가 하나만 남을 때까지 줄어듭니다.

항상 모두 표시 옵션을 켜면 이 기본 동작을 변경할 수 있습니다. 이렇게 하면 작은 화면(< 1000px)에서 컴포넌트가 가로로 스크롤되도록 합니다.
가장 작은 화면(< 600px)에서는 모바일 스타일 설정을 변경하여 주제를 대신 쌓아 올리는 방식을 선택할 수 있습니다.

설정

이름 설명
featured tag 주제를 가져올 태그를 설정합니다. 선택된 태그 중 어떤 태그와 일치하는 주제가 선택됩니다.
number of topics 최대 폭에서 최대 5개의 주제를 표시합니다
max number of topics 선택된 주제의 최대 수입니다. number of topics보다 높게 설정하면 주제를 페이지네이션하기 위해 화살표가 표시됩니다.
pages loop 페이지네이션이 활성화된 경우(max number of topics > number of topics), 마지막 페이지를 넘어가면 첫 페이지로 돌아갑니다.
hide featured tag 활성화된 경우(기본값), 위에서 설정한 featured 태그는 일반 사용자가 주제를 볼 때 숨겨집니다. 스태프는 여전히 볼 수 있습니다.
show on 컴포넌트가 표시되는 위치: homepage, top_menu 페이지(상단 메뉴 사이트 설정에서 설정된 페이지) 또는 all 페이지.
show for 컴포넌트를 보는 방문객: everyone, logged_in 사용자만, 또는 logged_out(익명) 방문객만.
make collapsible 전체 컴포넌트를 접을 수 있게 만듭니다
show title 아래에 설정된 텍스트를 표시합니다 (make_collapsible이 켜져 있으면 제목은 항상 표시됨)
title text 제목에 사용할 텍스트입니다. 이를 로컬라이즈하려면 featured_topic_title 번역을 대신 사용하세요
sort by created 비활성화하면 최근 댓글 순으로 정렬합니다
show all always 기본적으로 표시되는 주제의 수는 화면 크기에 따라 감소하여 모바일에서는 1개만 표시됩니다. 이 설정을 체크하면 모든 화면 크기에서 모두 표시됩니다.
hide closed topics 선택된 주제 목록에서 닫힌 주제를 숨깁니다
always link to first post 이전에 읽었는지 여부와 관계없이 항상 주제의 첫 번째 게시물로 링크합니다
mobile style show_all_always가 체크되어 있으면 기본적으로 주제는 가로 스크롤을 통해 표시됩니다. 이 동작은 작은 화면에서 변경할 수 있으며, 600px 미만인 경우 쌓아 올리는 방식으로 선택할 수 있습니다.
featured content position 고급 테마 개발: 이 설정은 컴포넌트의 플러그인 아웃렛을 변경합니다
번역 기본값
featured_topic_title

:discourse2: 우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 Pro, Business, Enterprise 플랜에서 사용할 수 있습니다.

89개의 좋아요

형들, 이거 정말 대박이다! 정말 감사해. 코어에 추가되면 좋겠다.

1개의 좋아요

모바일 버전의 "주제"는 복수형이어서는 안 됩니다.

3개의 좋아요

정말 멋진 아이디어네요. 이미 Featured Topic 컴포넌트를 사용 중이지만, 이 역시 나쁜 아이디어는 아니에요.

다만 한 가지 제안이 있어요: 태그뿐만 아니라 링크로도 작동하도록 만들어 주시면 어떨까요? 그러면 카테고리와/또는 ‘top’(트렌드를 의미하는)에서 콘텐츠를 가져올 수 있을 것 같아요. 이렇게 하면 Reddit처럼 홈페이지에 Trending 주제 기능을 추가할 수 있을 거예요. @awesomerobot님은 이 아이디어에 대해 어떻게 생각하시나요?

훌륭한 컴포넌트네요, 감사합니다! 작은 기능 요청이 있습니다: 데스크톱/모바일 환경에서 토픽 수를 조정할 수 있도록 해 주시고, 이미지 아래에 게시글 작성자도 표시해 주시면 좋겠습니다…

4개의 좋아요

제안하는 사항은 다음과 같습니다. 모바일에서는 한 번에 하나의 주제만 보이므로, ‘ship’ 주제에 대해 슬라이드를 추가하는 것입니다.

‘ship’ 주제로 이동하는 버튼입니다.

1개의 좋아요

아마도 당신의 주제에 이미지가 없나요?

놀라운 컴포넌트입니다. 홈페이지에 멋진 느낌을 줍니다. 모바일에서도 3개의 주제를 보여줄 수 있을까요? 슬라이더를 사용하는 것도 좋을 것 같습니다. 그리고 카테고리별 추천 주제도 보여줄 수 있을까요?

3개의 좋아요

정말 멋진 컴포넌트입니다 :+1:.

저도 작성자를 어딘가에 표시하자는 제안에 동의합니다. 또한 다음 사항들도 좋겠습니다:

  • 이미지에 링크를 걸어 항상 최신 게시물(제목에 있는 링크와 같은 방식)로 이동하게 하기
  • 위 게시물 중 하나에 있는 변형처럼, 왼쪽에 최신 생성된 주제, 오른쪽에 더 작은 주제들을 배치하는 대안 레이아웃을 선택할 수 있도록 하기
  • 빈 제목을 선택했을 때 컴포넌트 제목을 숨길 수 있도록 하기
  • 모바일에서 가로 스크롤(아래쪽의 작은 아이콘이나 옆쪽 화살표 등)을 지원하여 세 개 또는 네 개의 주제를 볼 수 있도록 하기
3개의 좋아요

이 컴포넌트가 사용자 카드와 상호작용하는 방식에 버그를 발견했습니다.

어떤 이유에서인지 사용자 카드가 컴포넌트가 페이지 높이를 추가한다는 사실을 인지하지 못하는 것 같습니다.

테마 프리뷰어에서 사용자 프로필을 클릭하면 카드가 나타나는 화면 캡처입니다. 보시는 것처럼 사용자 카드가 추천 주제(Featured Topics)를 인지하지 못하는 것 같습니다:

여러 번 수정을 시도해 보았지만, 사용자 카드 위치를 계산할 때 왜 컴포넌트의 높이가 반영되지 않는지 확신이 서지 않습니다.

감사합니다!

2개의 좋아요

방금 문제를 수정하는 업데이트를 적용했습니다.

이전 구현 방식이 마진 폴딩(margin collapse)과 충돌하여 사용자 카드(user-cards)의 상단 위치 계산에 오류를 일으키고 있었습니다. 이 내용은 다음 문서에서 간략히 다루고 있습니다: Mastering margin collapsing - CSS | MDN. 해당 문제는 "부모 요소와 자식 요소 사이에 콘텐츠를 분리하는 요소가 없는 경우"와 관련이 있었습니다.

9개의 좋아요

멋진 테마 플러그인입니다!

회전을 무작위로 설정할 수 있을까요? 현재 2로 설정되어 있으며, 최근 활동이 가장 활발한 두 개의 스레드가 표시되고 있습니다.

안녕하세요 @awesomerobot. 이 테마 컴포넌트가 정말 훌륭합니다. 다만 모바일 버전에서는 메인 페이지에서 볼 수 있는 3개의 추천 테마가 1개만 표시되는 대신 슬라이더로 표시될 수 있는지 궁금합니다. 이렇게 하면 메인 페이지의 외관이 훨씬 좋아질 것 같습니다. 또한 각 카테고리 페이지에도 추천 테마를 추가할 수 있다면 좋겠습니다. 피드백 주시면 감사하겠습니다. 정말 감사합니다!

3개의 좋아요

CSS 트릭을 좀 활용해서 모바일에서 스크롤이 되도록 만들었어요! 하지만 세로 스크롤만 가능하고, 가로 스크롤은 어떻게 해야 할지 모르겠네요 :smiley:

1개의 좋아요

멋진 컴포넌트네요!
다만 제 포럼에서는 모바일에서 추천 콘텐츠 아래에 여백이 너무 넓게 보입니다.

그래서 이 문제를 어떻게 해결할 수 있는지, 아니면 최소한 모바일 뷰에서 비활성화할 수 있는 방법이 있는지 궁금합니다.
감사합니다!

2개의 좋아요

정말 좋은 내용 감사합니다.
모바일에서 슬라이더 모드로 3개를 표시할 수 있는 방법이 있을까요?|

또 다른 멋진 기능은 카테고리나 태그 내부로 들어갔을 때, 해당 태그나 카테고리에 맞는 “추천” 태그를 필터링해서 표시해 주는 것입니다.

어쨌든 정말 훌륭합니다. 감사합니다.

1개의 좋아요

이상하네요, 제 쪽에서는 그렇게 많은 공간이 보이지 않아요… 다른 테마가 설치되어 있어서 그런 건지 확인해 보실 수 있을까요? (참고로, 현재 모바일에서 데스크톱 뷰로 표시되고 있는 것 같습니다. 모바일 뷰가 아닙니다.)

다른 테마를 활성화하지 않은 상태로 테스트해 본 결과는 다음과 같습니다:

1개의 좋아요

안녕하세요,
어제 3개의 게시물에서 썸네일이 아주 잘 표시되었습니다(게시물 2개는 이미지가 아니라 YouTube 영상을 포함하고 있었지만, 시스템이 썸네일을 추출하여 모든 것이 정상적이었습니다).

그런데 갑자기 오늘 YouTube 영상이 포함된 두 게시물의 썸네일이 더 이상 표시되지 않습니다. 여기 알려진 문제가 있나요?

https://www.tournamust.com/

문제가 있다는 것은 알지 못하지만, 이 컴포넌트를 임베드된 비디오와 함께 테스트해 본 적은 없습니다. 확인해 보고 명백한 문제가 있는지 살펴보겠습니다.