토픽 앞에 아바타 사진을 넣을 수 있나요?

개발
1

여기서 검색해 봤는데 아무것도 찾지 못했어요. 아마도 구글 번역이 여러분이 사용하지 않는 용어를 사용하고 있는 것일 수도 있겠네요…

이런 주제 앞에 사용자들의 아바타 사진이 표시되길 원했어요.

Captura de tela 2022-02-13 201530
Captura de tela 2022-02-13 2015303466×1176 211 KB

주제의 아바타는 항상 해당 주제에 마지막으로 댓글을 단 사람의 사진을 표시하는데, 이는 주제 생성자를 위한 제단(altar)처럼 주제 생성자의 사진을 고정해서 보여주는 건가요? 즉, 표시될 사진은 주제 생성자의 사진이 될 것이며, 영원히 그 상태로 유지된다는 뜻인가요.

2

안녕하세요, 이 컴포넌트를 확인해 보세요.

4

정말 잘 만들었네요, 도와주셔서 감사합니다. 그런데 아바타를 주제 앞에 어떻게 배치하나요?

32
323597×678 190 KB

5

이 분야 전문가가 아니지만, 요청하신 작업을 할 수 있는지 확인하기 위해 제 포럼에서 몇 가지 테스트를 해보겠습니다.

6

@danielabc 이 내용이 도움이 될 것 같습니다.

Desktop / Head

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if showParticipants}}
  {{raw "list/posters-column" posters=topic.participants}}
{{/if}}
<td class='author' style="width: 60px;"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="55"}}</a></td>
{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}
<td class='main-link clearfix topic-list-data'>
  {{~raw-plugin-outlet name="topic-list-before-status"}}
  {{raw "topic-status" topic=topic}}
  {{~topic-link topic class="raw-link raw-topic-link"}}
  {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
  {{~/if}}
  {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  <div class='creator'>
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {{~#if topic.creator ~}}
      <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}></a>
    {{~/if ~}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
</td>


{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>


<td class="activity" title="{{topic.bumpedAtTitle}}">

   
        <span class='latest-info'>
          <span class='name'>
       
          </span>
          {{format-date topic.bumpedAt format="medium"}}
        </span>
    </a>
</td>

</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if showPosters}}
  {{raw "topic-list-header-column" order='posters' forceName='Author' style='width: 70px;' }}
{{/if}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}

{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script type="text/x-handlebars" data-template-name="components/latest-topic-list-item">
<div class='topic-poster'>
 {{#user-link user=topic.creator}}
  {{avatar topic.creator imageSize="large"}}
 {{/user-link}}
</div>
<div class='main-link'>
 <div class='top-row'>
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
  {{#if topic.featured_link}}
   {{topic-featured-link topic}}
  {{/if}}
  {{topic-post-badges newPosts=topic.totalUnread unseen=topic.unseen url=topic.lastUnreadUrl}}
 </div>
 <div class='bottom-row'>
  {{category-link topic.category}}
  {{discourse-tags topic mode="list"}}
 </div>
</div>
<div class='topic-stats'>
 {{raw "list/posts-count-column" topic=topic tagName="div"}}
 <div class="topic-last-activity">
  <a href="{{topic.lastPostUrl}}" title="{{topic.bumpedAtTitle}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
 </div>
</div>
</script>
<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '80');
});
</script>


<script type='text/x-handlebars' data-template-name='list/topic_list_item.raw'>

  <td class='main-link clearfix'>
    {{raw "topic-status" topic=topic}}
    {{topic-link topic}}

    {{#if controller.showTopicPostBadges}}
      {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
    {{/if}}

    {{raw "list/topic-excerpt" topic=model}}

    <div class='creator'>
        {{#if showCategory}}
            {{category-link topic.category showParent="true" onlyStripe="true"}}
        {{/if}}

        {{~#if topic.creator ~}}
            <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            &nbsp;
            {{format-date topic.createdAt format="medium-with-ago"}}
        {{~/if ~}}
        
        {{raw "list/action-list" topic=topic postNumbers=topic.bookmarked_post_numbers className="bookmarks" icon="bookmark"}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
    </div>
  </td>

  {{#if controller.showLikes}}
    <td class="num likes">
      {{number topic.like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  {{#if controller.showOpLikes}}
    <td class="num likes">
      {{number topic.op_like_count}} <i class='fa fa-heart'></i>
    </td>
  {{/if}}

  <td class="num replies">
    {{topic.replyCount}}
  </td>
    <td class="last-post">
  
              
      <a href="{{topic.lastPostUrl}}">
        {{format-date topic.bumpedAt format="medium-with-ago"}}
      </a>
     
      
    </div>
    
  </td>
  
 </script>

Desktop / Css

.topic-list .posters {
    width: 50px;
}
7

이 코드를 정말 좋아합니다. 감사합니다. 하지만 몇 가지 문제가 있어서, 이 코드를 수정하는 방법을 아시나요? 아바타에 해당 주제를 마지막으로 댓글을 남긴 사람의 사진을 표시하고 싶습니다. 주제 생성자의 이름이 카테고리 이름 뒤에 표시되는 것을 봤는데, 앞에 "주제 생성자:"라는 문구를 추가할 수 있을까요?

image
image3414×246 64.5 KB