게시판 목록 작성자 및 게시자

:information_source: 요약 토픽 목록 페이지의 왼쪽 열에 토픽 작성자를 추가하고, 기본 게시자 열에서 가장 최근 게시자만 표시하는 옵션을 제공합니다. 작성자 아바타의 크기와 모양도 설정할 수 있습니다.
:eyeglasses: 미리보기 https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: 저장소 https://github.com/Lillinator/topic-list-author-posters
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법

이 테마 컴포넌트 설치

:woman_technologist:t2: 개요

이 Discourse 테마 컴포넌트는 모든 토픽 목록 라우트의 첫 번째 열에 토픽 작성자 아바타를 삽입하며, 관리자가 아바타의 모양과 크기를 지정할 수 있는 설정을 제공합니다. 또한, 작성자의 아바타는 게시자 목록의 첫 번째 아바타로 표시되지 않습니다.

게시자 아바타 열에 가장 최근(마지막) 게시자만 표시하도록 하는 설정도 있습니다. 단, 이는 토픽 참여자가 두 명 이상인 경우에만 적용됩니다. 따라서 작성자의 아바타는 토픽에 다른 게시자가 있을 때만 표시됩니다.

또한, 최신 토픽 목록 뷰가 활성화된 경우(예: Categories with latest topics) 카테고리 페이지에서도 토픽 작성자를 표시하도록 선택할 수 있으며, 아바타 크기와 모양 옵션도 제공됩니다.

행 내용의 세로 정렬을 상단 또는 가운데로 설정할 수 있는 토글도 있습니다.

작은 뷰포트(모바일 크기)에서는 작성자가 최근 게시자 아바타가 표시되던 위치에 나타납니다.

이 컴포넌트는 Topic List ExcerptsDiscourse AI summary gists와 잘 작동합니다.

:gear: 설정

컴포넌트 관리자 페이지의 기본 옵션 설정 스크린샷

설정 설명
Topic list author avatar size 토픽 목록 페이지 라우트의 작성자 아바타 열에서 아바타의 크기 - small, medium, 또는 large.
Topic list author avatar border radius 토픽 목록 페이지 라우트의 아바타 둥근 모서리: 0% = 사각형 → 50% = 원형. tab_style = 왼쪽 모서리 둥글게
Topic list show last poster only 게시자 열에 마지막 게시자 아바타만 표시하되, 토픽에 두 명 이상의 참여자가 있을 경우에만 적용.
Vertically align row top 행을 상단 또는 가운데로 정렬하는 토글
Show author on categories page 카테고리 페이지의 토픽 목록에서 최근 게시자 대신 작성자 아바타를 표시.
Category page topic avatar size 카테고리 페이지 토픽 목록의 작성자 아바타 열에서 아바타의 크기 - small, medium, 또는 large.
Category page avatar border radius 카테고리 페이지의 아바타 둥근 모서리: 0% = 사각형 → 50% = 원형. tab_style = 왼쪽 모서리 둥글게

:camera_flash: 스크린샷

다양한 아바타 크기와 모양 설정, 그리고 확장된 AI 요약 gists가 포함된 몇 가지 스크린샷입니다.

다양한 컴포넌트 설정이 활성화된 여러 토픽 목록 페이지의 스크린샷. 컴팩트 및 확장된 gists 모드, 그리고 확장/축소된 사이드바를 모두 보여줍니다.

기본 설정:

요약 gists가 확장된 큰 tab_style 아바타 모양:

15% border-radius 모양과 Topic_list_show_last_poster_only가 활성화된 작은 아바타:

0% border-radius(사각형)의 중간 크기 아바타, Topic_list_show_last_poster_only 활성화 및 요약 gists 확장:

작성자 또는 마지막 게시자의 두 가지 다른 크기와 모양의 아바타를 보여주는 카테고리 페이지 스크린샷.

기본 컴포넌트 설정, 중간 크기 원형 아바타 및 Show_author_on_categories_page 활성화:

큰 크기 tab_style 아바타 및 Show_author_on_categories_page 비활성화:

모바일 크기 뷰 스크린샷

tab_style 작성자 아바타:


:backhand_index_pointing_right:t3: 참고 사항

  • 프로필 페이지 탭에서 예상되는 위치에 작성자의 아바타를 삽입하고 게시자 열을 변경합니다.
  • 모바일 동작은 토픽 푸터 목록(제안/관련 토픽) 및 프로필 및 수신함 탭 페이지의 기본 동작과 동일합니다.
  • horizon 테마와 실제로는 호환되지 않습니다. :slight_smile:

:bulb: 향후 가능한 할 일

  • 모바일 비활성화 토글 추가?
  • 카테고리 및 태그 예외 처리?
  • 왼쪽에서 오른쪽으로(LTR) 지원?
  • 게시자 아바타 모양 설정?

:hugs: 항상 그렇듯이 아이디어, 피드백 및 디버깅 도움을 주신 @Moin에게 감사드립니다.


제 다른 Discourse 관련 작업 보기
13개의 좋아요

이렇게 만들어 주셔서 감사합니다. 잠재적인 문제를 즉시 해결해 주셨어요!

이미 계획에 있는 것일 수도 있지만, 왼쪽의 포스터(게시자) 아바타 열의 패딩과 정렬에 모바일에서 해당 컴포넌트가 비활성화된 상태에서는 보이지 않는 이상한 들여쓰기가 있는 것을 발견했습니다. 이는 td.posters의 text-align 속성이 이미지에도 영향을 미치고 있는 것 같습니다.

또한 활성화했을 때 포스터 아바타 목록의 정렬도 변경되는데, 이는 td.topic-list-data의 정렬이 기본값을 덮어쓰고 있는 것으로 보입니다. 다른 부분은 괜찮으시다면 제 쪽에서 스타일시트 변경은 쉽게 할 수 있습니다.

정말 훌륭한 컴포넌트입니다. 다시 한번 감사합니다.

1개의 좋아요

보고해 주셔서 감사합니다. 방금 수정 사항을 반영했습니다. 해당 컴포넌트를 업데이트한 후, 문제가 해결되는지 알려주세요.

1개의 좋아요

아바타의 왼쪽 정렬이 데스크톱에서 더 좋습니다. 중간 포스터의 컬럼을 제 취향에 맞게 조정하기 위해 이 CSS를 추가했습니다:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

스타일링에 필요한 것보다 약간 더 많은 여백이 사용되고 있기 때문에, 향후 모바일 비활성화 기능이 도움이 될 것 같습니다.

상단 세로 정렬은 주제 카드의 나머지 부분과 일관성을 유지하기 위해 의도적으로 설정된 것이며, 변경되지 않을 것입니다.

모바일에는 변경 사항을 적용하지 않았지만 확인해 보겠습니다.

세로 정렬이 CSS에서 너무 광범위하게 적용되었을 수 있으며, 아마도 td.topic-list-data를 사용하는 custom-author-column만 표적으로 삼으면 될 것입니다. 타겟을 td.custom-author-column.topic-list-data로 변경하면 문제가 해결되고, 제 쪽에서 커스텀 스타일링으로 수정할 필요가 없어질 것으로 생각됩니다.

아니요, 포스터 컬럼을 다른 행 요소들과 함께 상단 정렬되도록 의도했습니다. 가운데 정렬은 어색해 보입니다(특히 발췌문이나 ai-gists를 활성화한 경우), 하지만 취향의 문제이므로 원하는 대로 조정하시면 됩니다.

세로 정렬

기본:

image

요약 포함:

모바일용 작은 변경 사항을 커밋하여 왼쪽 여백 문제를 수정했습니다.

3개의 좋아요

저의 포럼은 발췌문, gist, AI 요약 기능을 사용하지 않으므로 기본 Discourse 디자인이 더 적합합니다. 해당 변경 사항은 전용 테마 컴포넌트에 적용하는 것이 더 합리적이라고 생각하지만, 의견이 다를 수 있으니 제 쪽에서 수정해 두었습니다. 불쾌한 감정은 없으시길 바랍니다.

모바일 화면이 조금 더 좋아졌네요. 감사합니다!

@jordanjay29 이 문제에 대해 더 생각해보니, 정렬 토글을 추가하기로 결정했습니다 (사실 구현하기가 쉽더라고요).

여기 있습니다 :slight_smile:

새로운 설정인 행 상단 세로 정렬(Vertically align row top)이 추가되었는데, 이 설정을 비활성화하면 기본값인 가운데 정렬이 됩니다. 이렇게 하면 괜찮을지 알려주세요.


수정: 카테고리 페이지 정렬을 위한 추가 수정 사항을 적용했습니다.

4개의 좋아요