MD Topic List component

A lighter topic-list presentation for your Discourse forum. The posters column has been deleted but some informations has been added (name and avatar of the last poster) in the activity column and below the topic title (name of the topic creator, and a little emoji for the tags).


Compatibility

This theme component is compatible with the tags, featured links functions, and any functions available in the original topic-list version. Any category style presentation (bullet, bar, box) should work with this component.

The theme component has been tested on a few color palettes, it will work with light, neutral or dark themes.

Sadly, the theme component might not work with plugins that already changes the topic-list presentation like the Topic List Previews.

Let me know if you have any issue !

30개의 좋아요

이 컴포넌트를 정말 좋아합니다.
poster-info div를 스크린샷과 정확히 같은 형태로 만드는 쉬운 방법이 있을까요?
이렇게 하면 가독성이 더 좋아진다고 생각합니다.

작성자 이름 위쪽 :arrow_up:
상대 날짜 아래쪽 :arrow_down:
image

2개의 좋아요

사실 나쁜 아이디어는 아니에요. 기본값으로 이걸 사용해도 될 것 같아요 :thinking:

하지만 지금은 컴포넌트를 직접 수정할 수 있습니다. 헤더 부분, 대략 60~69번 줄을 수정하세요.

원본

<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
<br />
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
</div>

사용하려는 내용

<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>

업데이트 후에도 이 부분을 다시 수정해야 하지만, 이 컴포넌트는 크게 업그레이드되지 않을 것입니다.

GitHub에 익숙하다면 저장소를 포크하고 파일을 수정한 후 이 버전을 포럼에서 사용할 수도 있습니다.

5개의 좋아요

이 변경 사항을 내 포럼에 적용해 봤는데 좋은 아이디어라고 생각합니다. 업그레이드를 적용했습니다.

이전에 사용하던 방식이 더 마음에 드신다면 말씀해 주세요. 대안 버전을 만들어드릴 수 있습니다.

6개의 좋아요

@Steven 마지막 업데이트 이후로 작동이 멈춘 건가요? 제 환경에서는 오류가 발생합니다.

1개의 좋아요

아직 못 알아챘어요. 보통 주말에 업그레이드를 하거든요. 오늘 밤에 확인해 볼게요.

포럼을 업그레이드하고 로그를 확인했는데, 제 환경에서는 문제가 없습니다.

포럼에서 발생한 문제의 스크린샷을 공유해 주시겠습니까? 기억이 정확하다면, 사용 중인 테마가 상당히 커스터마이징되어 있는데, 그 때문에 발생한 문제일 수 있다고 생각합니다. 제가 할 수 있는 방법을 찾아보겠습니다.

3개의 좋아요

저는 더 이상 이 테마를 사용하지 않습니다.

CSS 커스터마이징 없이 Material Design에서 테스트해 보았지만, 어떤 테마에서도 작동하지 않습니다. 플러그인 때문일까요?

예를 들어 Discourse 주제 미리보기를 사용하고 있다면, 해당 컴포넌트는 topic-list-item.raw 템플릿도 수정하기 때문에 작동하지 않습니다.

1개의 좋아요

맞아요. 하지만 저는 News Plugin 📰 에서 요구하는 주제 미리보기(Topic Preview) 기능 때문에 이것만 사용하고 있어요.

그래서 둘 중 하나를 선택해야 하는 상황이에요. :sleepy:

우리 포럼에서 정말 멋져 보이고, 작은 태그 이모지도 괜찮네요. 하하, 정말 잘했어요!

2개의 좋아요

저도 제 인스턴스에서 이걸 사용 중입니다. 훨씬 깔끔해 보이네요. 5개의 아바타라는 개념을 이해하지 못했는데, 정말 어지러워 보였거든요.

1개의 좋아요

최근 discourse 최신 버전(2.5.0.beta2)으로 업데이트했는데, 게시물의 사용자 아바타가 사라진 것 같습니다.

포럼 링크: https://techscammersunited.com/

1개의 좋아요

내일 확인해볼게. 며칠 전에 업데이트했을 때는 아무 문제 없었는데, 뭔가 바뀌었나 봐.

3개의 좋아요

리포트해 주셔서 감사합니다. 이제 수정되었습니다. 구성 요소를 업그레이드하고 다시 활성화할 수 있습니다.

3개의 좋아요

아, 빠른 수정 감사해, 형! 이제 완벽하게 잘 작동해 :slight_smile:

최신 버전(2.4.1)으로 업데이트했는데 아바타가 사라졌습니다.
일단 이 구성 요소를 비활성화해야 했습니다.

Discourse도 업그레이드해야 하며, 그렇게 하면 수정됩니다.

2개의 좋아요

불행히도 나에게 그것은 많은 업그레이드(18개의 커스텀 플러그인)를 의미합니다. 그래서 저는 보통 3~4개월에 한 번만 업데이트합니다. 운이 없는 것 같습니다 :smiley:

이전 버전에 액세스하는 방법이 있을까요?