사용자 프로필 카드에 사용자 지정 버튼을 추가하는 방법?

개발
1

사용자 프로필 요약 및 카드 뷰에 사용자 지정 버튼을 추가하는 방법은 무엇인가요?
데이터 저장 없이 특정 동작(예: 리디렉션)을 수행하는 CTA 버튼을 추가하려고 합니다.

image
image1812×800 88.3 KB

그리고 프로필 카드에도 추가하려고 합니다:

image
image946×252 49.6 KB

아래의 초기 코드는 거의 목적을 달성하지만 헤더 섹션에만 적용되며, 사용자 프로필 요약 및 카드에 적용하는 방법을 찾지 못했습니다:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // 여기서 특정 동작 수행...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
2

안녕하세요, 환영합니다 :wave:

이 위치에서는 플러그인 아웃렛을 사용해야 하며, 구체적으로는 user-profile-controls를 사용해야 합니다.

예시를 여기에서 확인해 볼 수 있습니다:

3

@Arkshine 님, 감사합니다. 저는 이 플러그인에 대해 정말 초보자인 것 같아서, 헤더 버튼과 비슷한 방식으로 구현된 줄 알았어요.

어쨌든, user-profile-controls는 플러그인가요? 어떻게 구현할 수 있는지 알려주실 수 있을까요?

4

Using Plugin Outlet Connectors from a Theme or Plugin 를 읽어보시길 권장합니다. 질문에 대한 답을 찾으실 수 있을 것입니다!

기본적으로 플러그인 아웃렛(plugin outlet)은 특정 위치에 코드를 주입하는 방법입니다.

테마 CLI를 사용하여 테마 구성 요소를 생성하고, 제가 내 테마 구성 요소에서 한 것처럼 별도의 파일을 사용하는 것이 좋습니다 (테스트/수정할 수 있도록 제 저장소를 클론하는 것을 주저하지 마세요):

하지만 여전히 <script> 태그에서 테스트할 수 있습니다:

귀하의 경우, 다음과 같이 작성해야 합니다:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

첫 번째 줄에 주목하세요. 커넥터 이름으로 user-profile-controls를 사용하고, my_connector_name은 원하는 대로 지정할 수 있습니다.

5

훌륭네요! 이제 전체 그림이 파악되고, 스크립트 태그에서 테스트할 수 있으니 컴포넌트를 만들기 전에 먼저 테스트해볼 수 있겠네요. 다시 한번 감사합니다 :beers: