안녕하세요!
이 작업을 어떻게 진행해야 할지 정확히 확신이 서지 않아서 도움을 요청드립니다.
기본적으로 고정된 주제(pinned topics)와 일반 주제 사이에 시각적인 구분을 두려고 합니다. 이는 게임 스튜디오 커뮤니티 포럼을 위한 것이며, 사용자에게 도움이 될 것입니다.
제가 원하는 것은 다음과 같은 형태입니다:
[PINNED] 주제 이름
일반 주제
아래와 같은 형태가 아닌:
[PINNED] 주제 이름
일반 주제
이미 고정된 주제의 배경색을 변경하여 두 종류 사이에 약간의 차이를 만들었습니다. CSS를 시도해 보았지만, 페이지 새로고침 시에만 작동했습니다.
자체 테마 컴포넌트를 만들어 보았지만, 여기서 막혔습니다. 무언가를 추가해야 하는데, 어디에 추가해야 할지 모르겠습니다.
제 목표는 원래의 (일반 주제) tbody 앞에 를 추가하는 것입니다.
도움이 많이 필요합니다!
Filtered Topic Lists 테마 구성 요소를 in:pinned 쿼리와 함께 사용하는 방법을 살펴보실 수 있습니다.
대신 CSS를 사용하려는 경우, 다음과 같은 코드를 사용할 수 있습니다:
// 목록의 마지막 고정 항목을 대상으로 합니다
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
// 테이블 행 내부에 공간을 강제하는 대략적인 방법
padding-bottom: 1.8em;
}
tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
// 원하는 경우 공간에 표시할 콘텐츠
content: 'regular';
width: 100%;
position: absolute;
display: flex;
height: 1em;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
border-top: 1px solid var(--primary-low);
}
도움 주셔서 감사합니다! 불행히도 그 방법은 효과가 없었습니다. 제가 필요한 기능을 수행할 수 있는 플러그인을 하나 만들었는데요, Discourse 3.4.0-beta2에서 작동하게 만드는 데 어려움을 겪고 있습니다.
도움을 주시면 매우 감사하겠습니다!
테이즈, 안녕하세요!
코드를 살펴봤는데, 거의 다 왔네요!
몇 가지 피드백을 드릴게요:
플러그인이 아닌 테마 컴포넌트로 수정할 수 있습니다. 아래 템플릿 사용을 권장합니다: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub
커넥터를 사용하는 것은 올바른 방법입니다. 올바른 경로는 /discourse/connectors/입니다…
커넥터에 전달된 인수는 outletArgs로 가져올 수 있습니다. 커넥터는 여기에서 확인하세요:
즉, 다음과 같이 작성해야 합니다:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
그리고 템플릿은 다음과 같습니다:
{{#if this.pinnedTopics}}
<tbody class="pinned-topics">
{{#each this.pinnedTopics as |topic|}}
<TopicListItem
@topic={{topic}}
@bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
@lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
@selected={{@outletArgs.selected}}
@hideCategory={{@outletArgs.hideCategory}}
@showPosters={{true}}
/>
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
</tbody>
{{/if}}
참고: 불행히도 showPosters는 인수로 전달되지 않으므로, 여기서는 값을 하드코딩해야 합니다.
참고: 기본적으로 다음과 같이 보입니다:
고유한 ID를 가진 div 래퍼를 생성하여 CSS를 어지럽힙니다. 하지만 요소에 액션을 바인딩하려면 필요합니다.
tagName과 classNames를 사용하여 래퍼를 커스터마이즈할 수 있습니다.
import { classNames, tagName } from "@ember-decorators/component";
@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
...
}
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
...
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
{{/if}}
(요소에 아무것도 하지 않는다고 확신이 있다면, 템플릿에 tbody를 유지하고 tagName("")을 사용할 수 있습니다.)
그럼 이렇게 됩니다:
더 나은 방법이 있는지 철저히 검토하지는 않았습니다.
단순히 코드가 작동하도록 돕고 싶었을 뿐입니다! 
components 디렉토리에 무언가를 추가해야 하나요, 아니면 모든 파일이 connectors에 위치하게 되나요?
플러그인으로 진행한 이유는 테마 컴포넌트 대신 플러그인을 사용하면 나중에 더 많은 기능을 추가할 계획이 있기 때문입니다.
이 커넥터와 코드 컨텍스트에서는 components 디렉토리가 필요하지 않습니다.
기존 컴포넌트를 수정했기 때문에 스크린샷에서 보일 수 있습니다.
다만, 나중에 무엇을 하려는지에 따라 달라집니다. 커넥터에서 다른 컴포넌트를 참조하는 컴포넌트를 만드는 것도 가능하며, 이 경우 해당 컴포넌트는 components 디렉토리에 배치하게 됩니다.
정말 완벽합니다, 정말 감사합니다!
마지막으로 한 가지 질문이 더 있는데, 괜찮으시다면 여쭤봐도 될까요? 고정된 주제가 일반 주제 목록에도 표시되는 것을 막아 고정된 주제가 중복으로 표시되지 않도록 하는 방법이 있을까요?
수정: 사실 CSS를 조금만 수정하면 그렇게 할 수 있었습니다.
다시 한번 도움 주셔서 정말 감사합니다!
