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

: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개의 좋아요

Thank you for making this, it instantly resolved a potential issue for me!

Perhaps this is already planned, wanted to mention that I noticed the padding and alignment of the poster avatar column on the left has an odd indentation (that isn’t present on mobile with the component disabled, for comparison). This looks like the td.posters text-align attribute is affecting the image as well.

The posters avatar list alignment also changes when enabled, and this looks like td.topic-list-data alignment is overriding the default. Easy enough to make stylesheet changes on my end if you’re happy with these otherwise.

Fantastic component, thanks again.

1개의 좋아요

thanks for the report, i just pushed a fix. update the component and let me know if that helps.

1개의 좋아요

The avatar left alignment is better on desktop. I added this CSS to adjust the middle poster’s column to my preferences:

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

I think your future mobile disable will help, too, because the styling uses a bit more whitespace than needed.

the top vertical alignment is intentional to be consistent with the rest of the topic card and won’t be changed.

i didn’t make any changes to mobile but i’ll look.

The vertical alignment may have been too broadly applied in your CSS and probably only needs to target the custom-author-column where you’re using td.topic-list-data. I suspect changing the target to td.custom-author-column.topic-list-data will resolve and remove the need for custom styling to fix on my end.

no i intended for the posters column to vertically aligned top along with all the other row elements. it looks out of place aligned middle (especially if you enable excerpts or ai-gists), but i suppose it is a matter of taste so you an adjust how you like.

vertical alignment

default:

image

with summary:

i pushed a small change for mobile that should fix the space on the left.

3개의 좋아요

Since my forum doesn’t use excerpts or gists or AI summaries, the default Discourse look is preferred. That change sounds like it makes more sense in a dedicated theme component to me, but we differ and I fixed it on my end so no hard feelings.

Mobile looks a tad better, thanks!

@jordanjay29 after thinking about this more, i decided to add an alignment toggle (easy enough).

here you go :slight_smile:

there is a new setting Vertically align row top that you can disable to get the middle default. let me know if that works for you.


edit: i pushed another fix for the categories page alignment.

4개의 좋아요