# 추가한 새 플러그인 아웃렛에 토픽 로딩

**URL:** <https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819>\
**Category:** Development\
**Created:** [8월 9, 2021, 1:37오후 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819 "2021-08-09T13:37:48Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)\
**Post date:** [8월 9, 2021, 3:01오후 UTC](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819/2 "2021-08-09T15:01:58Z")

</div>

이것이 작동하도록 설정한 것 같습니다. 목표: 새 템플릿의 지정된 위치에 특정 주제(topics)를 로드하는 것입니다 (기존 템플릿에 추가하는 경우에도 작동할 가능성이 높지만, 이는 테스트하지 않았습니다):

1. 템플릿에 직접 만든 플러그인 아웃렛을 삽입하세요 (제 경우 만든 플러그인 아웃렛 이름은 "great-topics"입니다. 예시):

`{{plugin-outlet name="great-topics"}}`

1. 커넥터(connector)에 핸들바(handlebars) 코드(즉, 컴포넌트)를 추가하세요:

**[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs**

```plaintext
<div>I am in the plugin outlet! Load the topics:</div>
{{topic-list topics=featuredTopics showPosters=true}}

```

1. 새 커넥터에 있는 컴포넌트의 자바스크립트 코드를 추가하세요:

**[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6**  
[이 코드는 “featured” 태그로 주제를 로드하는 코드가 포함된 다음 메타 포스트에서 가져왔습니다: [https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949](https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949)]

```plaintext
const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   let featuredTopics = [];
   // Create an empty array, we'll push topics into it

   var featuredUsers = result.users;
   // Get the relevant users

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // We're extracting the topics starting at 0 and ending at 4
   // This means we'll show 3 total. Increase 4 to see more.

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // Associate users with our topic

      featuredTopics.push(Topic.create(topic));
        // Push our topics into the featuredTopics array
     });
   }) //end result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics); //this is where the topics get added to the component
 
component.set("loadingTopics", false); //my above code doesn't have a loader. but this is there if you do want a loader. Have to add to hbs file for that in addition. See linked post on meta above

  }); //end ajax 

 }//end setup component

```

* * *

적어도 제 경우, 이 방법으로 새 템플릿의 플러그인 아웃렛에 “featured” 태그가 있는 주제를 로드하는 데 성공했습니다.

이것이 작동하는 것을 확인하려면 서버를 재시작해야 합니다.

---

_[View the full topic](https://meta.discourse.org/t/loading-topics-in-a-new-plugin-outlet-ive-added/199819)._