결국 제가 원하는 것은 discourse central 테마의 토픽 목록 본문에 새로운 토픽 버튼을 추가하는 것입니다. 모든 엔지니어가 토픽 목록 하단, 각 카테고리 내부에만 배치된 ‘새 대화 시작’ 버튼에 대해 불만을 제기하고 있습니다. 상단의 새 토픽 메뉴 옵션을 사용하려 하지 않는 이유는, 이 옵션이 현재 있는 카테고리에 토픽을 시작하지 않기 때문입니다.
llama 3.1 405B와 gpt4를 ask.discourse.com을 통해 사용해 보았지만, 컴파일되는 자바스크립트 버전을 얻지 못했습니다. 계속 Compile error: SyntaxError: Private field must be used in an enclosing class 오류가 발생합니다.
또한 위젯 레지스트리 오류도 발생하는데, 이는 js 컴파일 오류로 인해 커스텀 위젯이 생성되지 않기 때문입니다.
저는 Discourse Central Theme을 사용 중입니다.
다음과 같은 Header 섹션이 주어졌을 때:
"<script type="text/discourse-plugin" version="0.8.18">
api.createWidget('custom-new-topic-button', {
tagName: 'div.custom-new-topic-button',
buildKey: () => `custom-new-topic-button`,
html() {
return [
this.attach('button', {
className: 'btn btn-primary',
action: 'createNewTopic',
contents: 'New Topic'
})
];
},
click() {
const composerController = this.container.lookup("controller:composer");
const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");
composerController.open({
action: require("discourse/models/composer").default.CREATE_TOPIC,
draftKey: require("discourse/models/composer").default.DRAFT,
categoryId: currentCategory,
});
return false;
},
});
api.decorateWidget('topic-list:before', (helper) => {
if (api.getCurrentUser()) {
helper.appendChild(helper.createWidget('custom-new-topic-button'));
}
});
</script>
"
이와 같은 Head 섹션과 함께
<script>
{{#if currentUser}}
<div class="topic-list-body-new-topic">
{{custom-new-topic-button}}
</div>
{{/if}}
</script>
그리고 이 CSS
.topic-list-body::before {
content: "";
display: block;
position: relative; /* 절대 위치 지정이 가능하도록 하는 것이 중요 */
}
.topic-list-body-new-topic {
position: absolute;
top: 0;
left: 0;
padding: 10px;
background: #f2f3f5;
border-bottom: 1px solid #ccc;
}
.custom-new-topic-button .btn.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
이것이 제 원래 코드였으며, 최신 권장 사항은 다음과 같습니다.
<script type="text/discourse-plugin" version="0.8.18">
api.createWidget('custom-new-topic-button', {
tagName: 'div.custom-new-topic-button',
buildKey() {
return 'custom-new-topic-button';
},
defaultState() {
return {};
},
html() {
return [
this.attach('button', {
className: 'btn btn-primary',
action: 'createNewTopic',
contents: 'New Topic'
})
];
},
createNewTopic() {
const composerController = this.container.lookup("controller:composer");
const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");
const Composer = require("discourse/models/composer").default;
composerController.open({
action: Composer.CREATE_TOPIC,
draftKey: Composer.DRAFT,
categoryId: currentCategory,
});
return false;
},
});
api.decorateWidget('topic-list:before', (helper) => {
if (api.getCurrentUser()) {
helper.appendChild(helper.createWidget('custom-new-topic-button'));
}
});
</script>
