코드에 설정하기 위해 Discourse 템플릿 위치를 어떻게 찾을 수 있나요?
특히 usercard의 정확한 이름에 관심이 있습니다.
다양한 핸들바 템플릿의 플러그인 아웃렛을 추적하는 데 정말 유용한 테마 컴포넌트가 있습니다: (deprecated) Plugin outlet locations theme component. 첫 번째 게시물의 끝에는 테마 크리에이터 사이트에서 해당 컴포넌트의 미리보기로 연결되는 링크가 있습니다. 이를 사용하면 자체 사이트에 설치하지 않고도 대부분의 플러그인 아웃렛을 찾을 수 있습니다.
주의할 점 중 하나는 템플릿과 위젯이 서로 다른 개념이라는 것입니다. 물론 필요에 따라 템플릿의 플러그인 아웃렛에 위젯을 마운트하여 함께 사용할 수는 있습니다. 하지만 현재로서는 플러그인에서와 마찬가지로 커넥터/컴포넌트/컨트롤러를 사용하여 플러그인 아웃렛을 다루는 것이 더 일반적입니다.
개발자 가이드의 이 섹션에는 여러분이 찾고 있는 내용 중 상당 부분이 다루어져 있습니다. 또한 Customization > Theme 카테고리의 GitHub 저장소에서 테마 컴포넌트들을 살펴보고 좋은 예시들을 참고해 보시는 것을 추천합니다.
힌트 감사합니다! 필요한 부분인 user-card-post-names:after를 찾았습니다.
원래 코드에 적용해 보았지만 실패했습니다.
poster-name:after를 user-card-post-names:after로 변경해 보았지만 작동하지 않았고, 사용자 카드에 사용자 정의 필드가 표시되지 않습니다. 그 이유에 대해 어떤 아이디어가 있을까요?
플러그인 아웃렛에 decorateWidget()을 사용할 수 없습니다. 다음과 같은 방식으로 시도해 보세요:
<script type="text/discourse-plugin" version="0.8.42">
const h = require("virtual-dom").h;
api.createWidget("user-card-custom-field", {
html(attrs) {
const userCustomFields = attrs.user.custom_fields;
if (userCustomFields.user_field_4) {
return h('span.poster-user-field', userCustomFields.user_field_4);
}
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
{{mount-widget widget="user-card-custom-field" args=(hash user=user)}}
</script>
mount-widget은 코어의 플러그인 아웃렛에서 사용할 수 있는 user 객체를 전달하여, 우리가 생성한 user-card-custom-field 위젯의 속성에서 사용할 수 있게 합니다.
필요에 따라 user_field_4를 공개 사용자 사용자 정의 필드(public user custom fields) 또는 스태프 사용자 사용자 정의 필드(staff user custom fields) 사이트 설정에 추가했는지 확인하세요.
수정
또한, 특별히 해야 할 일이 없다면 위젯을 완전히 피하고 플러그인 아웃렛만 사용하는 것이 가능합니다:
<script type="text/x-handlebars" data-template-name="/connectors/user-card-post-names/user-card-custom-field">
{{#if user.custom_fields.user_field_1}}
<span class="poster-user-field">{{user.custom_fields.user_field_1}}</span>
{{/if}}
</script>
정말 감사합니다! 모든 것이 정상적으로 작동합니다.