이것이 작동하도록 설정한 것 같습니다. 목표: 새 템플릿의 지정된 위치에 특정 주제(topics)를 로드하는 것입니다 (기존 템플릿에 추가하는 경우에도 작동할 가능성이 높지만, 이는 테스트하지 않았습니다):
- 템플릿에 직접 만든 플러그인 아웃렛을 삽입하세요 (제 경우 만든 플러그인 아웃렛 이름은 "great-topics"입니다. 예시):
{{plugin-outlet name="great-topics"}}
- 커넥터(connector)에 핸들바(handlebars) 코드(즉, 컴포넌트)를 추가하세요:
[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs
<div>I am in the plugin outlet! Load the topics:</div>
{{topic-list topics=featuredTopics showPosters=true}}
- 새 커넥터에 있는 컴포넌트의 자바스크립트 코드를 추가하세요:
[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]
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” 태그가 있는 주제를 로드하는 데 성공했습니다.
이것이 작동하는 것을 확인하려면 서버를 재시작해야 합니다.