MD 토픽 목록 모바일 컴포넌트

가능합니다

기본 설정에 이걸 넣을지는 모르겠지만, 시도해 보고 싶다면 아래 코드를 header 섹션에 추가하세요.

{{d-icon "eye"}} {{number topic.views numberKey="views_long"}}
그리고
{{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}

제 화면에서는 이걸 사용했습니다:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          The `~` syntax strip spaces between the elements, making it produce
          `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
          with no space between them.
          This causes the topic-post-badge to be considered the same word as "text"
          at the end of the link, preventing it from line wrapping onto its own line.
        --}}
        {{~raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{~raw-plugin-outlet name="topic-list-before-status"}}
          {{~raw "topic-status" topic=topic~}}
          {{~topic-link topic class="raw-link raw-topic-link"}}
          {{~#if topic.featured_link~}}
          {{~topic-featured-link topic~}}
          {{~/if~}}
          {{~raw-plugin-outlet name="topic-list-after-title"}}
          {{~#if showTopicPostBadges}}
		    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
		  {{~/if}}
          {{~#if expandPinned~}}
          {{~raw "list/topic-excerpt" topic=topic~}}
          {{~/if~}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory}}
            <span class="topic-creator">
              {{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            </span>
            {{else}}
            {{~raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
      </div>
    </div>
</td>
</script>
4개의 좋아요

아이가 표시되지 않습니다. 게시하신 스크립트를 메인 테마의 새로운 테마-컴포넌트 확장 애드온에 추가했습니다.

일부 아이콘의 경우, 해당 아이콘에 사용되는 Font Awesome 문자를 등록해야 합니다.

svg icon subset 설정을 확인하고 fa-eye를 추가하세요.

2개의 좋아요

고맙습니다. 그게 문제를 해결해 주었어요. 제가 이미 추가했다고 생각했는데, 변경 사항을 커밋하는 걸 깜빡했던 것 같아요. :man_facepalming:

Stable 버전에서는 모두 정상적으로 작동합니다. 하지만 테스트가 통과해도 뷰 수나 좋아요 수가 표시되지 않는 것 같습니다. Air Theme 같은 다른 컴포넌트가 간섭하지 않는지 확인하기 위해 미리보기에서도 테스트해 보았습니다. 기본 컴포넌트는 의도한 대로 작동합니다. 확장 기능이 뷰 수나 좋아요를 표시하지 않습니다.

죄송하지만 빨간 아이콘은 무슨 뜻인가요? 태그 같은 건가요?

포럼의 다른 부분과 조화를 유지하기 위해 awesome 아이콘을 대신 사용할 수 있을까요? :slight_smile:

공유해 주셔서 감사합니다!

태그가 없는 경우 d-icon 태그에서 문제가 발생했습니다.

방금 새로운 해결책을 시도하여 업데이트를 push했습니다. 이모지 대신 font-awesome 아이콘을 사용하도록 변경했으니, 잘 동작하는지 알려주세요.

수정: 되돌렸습니다. 데스크톱에서는 동작하지만 모바일에서는 동작하지 않습니다.

직접 시도해 보고 싶다면, 아래 CSS를 사용할 수 있습니다.

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}
1개의 좋아요

안녕하세요, 이 테마 구성 요소가 활성화된 상태에서 모바일에서 대량 선택 옵션이 작동하지 않습니다.

1개의 좋아요

감사합니다. 업데이트를 push했습니다

이제 주제 제목 옆에 체크박스가 표시되어야 합니다

4개의 좋아요

감사합니다. 제 문제는 해결되었습니다.

새로운 glimmer 토픽 리스트와 함께 작동하도록 만드는 방법을 찾지 못하고 있습니다.

이 테마 컴포넌트는 방치될 것 같습니다. 당분간 deprecated 태그를 붙여두겠습니다.

Plugin Outlets만 사용하여 새로운 시도를 해볼 수 있지만, 확실히 동일한 외관을 갖게 되지는 않을 것입니다.

3개의 좋아요

이것은 정말 유용한 컴포넌트이며, 특히 포럼이 더 많은 콘텐츠를 표시할 수 있도록 해주는 외관이 돋보입니다. 앞으로는 사용할 수 없다는 점이 정말 안타깝습니다.

2개의 좋아요

이 컴포넌트를 정말 좋아하는데, 기본 모바일 뷰가 별로라서(특히 왼쪽에 있는 마지막 게시자의 아바타가 제일 이상해) 아쉬워요. 없애면 슬플 텐데, 불행히도 저는 코딩을 못 하고, 이 문제에는 ChatGPT도 무능하네요 :sob:

1개의 좋아요

한번 시도해볼게요!

3개의 좋아요

PR를 만들었습니다 :+1:

https://github.com/MonDiscourse/md-topic-list-mobile/pull/3

4개의 좋아요

잘하셨네요!

아직 직접 테스트해볼 기회는 없었는데, 토픽 배지(읽지 않은 게시글)도 함께 구현하셨나요? 몇 가지 테스트를 해봤는데, 토픽 제목 옆에 배지를 추가하는 게 생각보다 쉽지 않더라고요.

하지만 제 실력은 당신에 비하면 턱없이 부족합니다.

1개의 좋아요

@Steven 테스트를 하지 않았습니다! 현재 수정 사항으로는 아무것도 대체하지 않으므로, 표시되기는 하겠지만(예상한 위치에는 없을 수 있음) 예상해 주세요.

수정:

다음과 같이 보입니다:
image

해당 구성 요소가 없는 원래의 모습은 다음과 같습니다:

chrome_4b5W8Pbd7o

아직도 아바타를 대체하길 원하시나요, 아니면 현재 상태가 괜찮나요?
아바타를 대체할 수 있는지 확인해 보겠습니다.

수정2:

https://github.com/MonDiscourse/md-topic-list-mobile/pull/4

chrome_UEILhfhxua

2개의 좋아요

수고해 주셔서 감사합니다 @Arskshine!

컴포넌트에 대해 조금 작업해 봤고, 여러분께 제안을 하나 드리고 싶습니다.

현재의 모습은 다음과 같습니다:

chrome_UEILhfhxua

요약(excerpt)을 복원하고 토픽 배지를 제목 옆으로 옮긴 대안을 작업해 보았습니다. (스크린샷은 프랑스어이지만, 디자인이 가장 중요한 부분입니다.)

공식 버전에서는 어떤 것을 원하시나요?

4개의 좋아요

안녕하세요 @Steven @Arkshine

수고해 주셔서 정말 감사합니다. :+1:

한 가지 더 문의할 일이 있습니다: 아래 두 이미지는 각각 새 버전과 구버전의 스크린샷입니다. 보시는 것처럼 두 버전 간에 글 제목의 폭이 다릅니다. 줄바꿈 위치에서 이를 명확히 확인할 수 있습니다(죄송합니다. 제목은 중국어로 되어 있지만, 중요한 것은 줄바꿈의 위치입니다).



새 버전에서 제목 길이를 늘릴 수 있을까요? 이 컴포넌트를 사용하는 목적 중 하나는 더 많은 정보를 표시하기 위해서입니다.

코딩을 잘 몰라서 제가 설명한 내용이 전문적이지 않을 수 있습니다.

3개의 좋아요

이 CSS 조각을 추가해 봤고, 잘 작동했습니다.

td .main-link {
    width: 100%;
    display: inline-block;
}
1개의 좋아요