커스텀 컴포넌트 -- 플러그인 아웃렛에 버튼 또는 텍스트 추가

:information_source: 요약 아무 위치에나 버튼 또는 텍스트 추가
:hammer_and_wrench: 리포지토리 https://github.com/literatecomputing/discourse-custom-components
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코urs 테마가 처음이신가요? 디스코urs 테마 사용 입문가이드

이 테마 컴포넌트 설치

모든 플러그인 아웃렛에 링크 버튼이나 임의의 텍스트를 추가할 수 있습니다. (이미지의 워터마크는 무시해 주세요. 이 스크린샷은 스테이징/테스트 사이트에서 촬영했습니다.)

플러그인 아웃렛이 어디에 있는지 확인하려면 Introducing Discourse developer toolbar 를 사용하여 찾을 수 있습니다. 플러그인 아웃렛이 무엇인지 모른다면 Using Plugin Outlet Connectors from a Theme or Plugin 을 참고할 수 있지만, 이 컴포넌트는 몇 가지 제한 사항이 있긴 하지만 프로그래밍을 하거나 플러그인 아웃렛을 완전히 이해하지 않아도 모든 플러그인 아웃렛에 텍스트를 삽입할 수 있게 해줍니다.

저는 사용자 프로필과 사용자 카드에 "이 버튼을 클릭하여 구독하면 PM을 보낼 수 있습니다"라는 버튼을 표시하고 싶었던 누군가를 위해 이 플러그인 개발을 시작했습니다. 그들은 사용자가 PM을 보낼 수 없는 경우에만 버튼이 표시되기를 원했습니다. 제가 늘 스스로 생각하듯 똑똑한 것은 아니기 때문에, 버튼 표시 여부를 결정하기 위해 그룹을 사용하여 컴포넌트를 작성했습니다. 이 접근법의 문제 중 하나는 스태프가 구독자 그룹에 속해 있지 않아서, PM을 보낼 수 있음에도 불구하고 "구독해야 합니다"라는 버튼을 받게 된다는 것이었습니다. 또한, 그룹이 숨겨져 있어 어쨌든 테마 컴포넌트에서 사용할 수 없었습니다. 저는 버튼 표시 여부를 결정하기 위해 currentUser.can_send_private_messages를 사용하도록 그 테마 컴포넌트를 다시 작성했습니다.

이것은 누구를 위한 것인가요?

링크가 포함된 버튼이나 특정 그룹에 대해 표시되거나 숨겨지는 임의의 텍스트를 넣고 싶다면, 이 컴포넌트를 사용하여 모든 플러그인 아웃렛에 삽입할 수 있습니다. 회원이 아닌 사람들을 제외하고 모든 메시지 사이에 “구독해야 합니다” 링크 버튼을 추가하고 싶나요? 이 컴포넌트로 가능합니다. 플러그인 아웃렛에 임의의 HTML을 붙여보면서 어떻게 보일지 확인하고 싶나요? 이것도 가능합니다.

개발자에게 도움이 되는 방법

이 테마에는 다음을 수행하는 방법에 대한 간단한 예제가 있습니다:

하지만 .gjs 파일 내부의 <template> 안에서 시도하는 경우 동작이 약간 다릅니다({{htmlSafe component.text}}와 같이).

18개의 좋아요

Space makes the text not bold.


Great component!

5개의 좋아요

Would it be possible to add placeholders to the Button URLs, e.g. for the URL to contain the topic ID in which the user is located?

I’m not quite sure. If you’ve got a budget, I’ll take a look.

What would your button do if it had the topic id?

If you figure it out and want to make a PR, I’ll probably accept it.

I’m pretty sure that the answer is no, but that you could use the workaround described here

2개의 좋아요

Hi @pfaffman

We want to add such a set of buttons to every topic for members in our business account user group.
The button would then trigger creating a new PM which then includes the current URL the user is on

That way our business customers can send us request to pin, highlight or “sponsor” speficic topics

1개의 좋아요

As you know, you can create a URL that will open a new topic composer. You could make that be the link added by the theme component.

I don’t think that it’s possible to do that without adding code to the theme component (but maybe it is?). Maybe someone has an idea about that and will offer that solution here (or on the other topic). If not, you can contact me or post in Marketplace with the description of what you need and a budget.

3개의 좋아요

데모 텍스트 블록이 데모 버튼 및 나머지 요소와 정렬되어 있지 않습니다. 블록 아웃렛에 extra-nav-item을 사용하고 있습니다.

추가한 버튼에 다른 버튼들의 클래스를 추가해야 할 것 같아요.

무슨 말씀이신가요? 데모 버튼과 동일한 클래스를 사용해 봤습니다.

네. 그게 텍스트일 뿐 버튼이 아니기 때문에, 거기에 있는 다른 버튼들과 비슷한 모양으로 보이려면 CSS를 추가해야 합니다.

테마 컴포넌트가 텍스트를 원하는 위치에 배치해 주지만, 원하는 대로 스타일링하도록 설계된 것은 아닙니다.

어떤 테마의 CSS에 아래 코드를 추가하면 작동할 것입니다.

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

안녕하세요, 작동하지 않습니다. 또한 텍스트 블록 그룹이 '모두’로 설정되어 있어도 게스트에게는 텍스트 블록이 표시되지 않습니다.

테마 설정에서 텍스트 블록의 클래스가 제가 보여드린 CSS의 클래스와 일치하도록 변경해야 합니다.

또한, 매칭된 그룹을 표시하도록 설정하는 것이 아니라 매칭된 그룹을 숨기도록 설정을 변경해야 합니다.

image

더 많은 도움이 필요하고 예산이 있으시다면, 제 이메일 주소는 사용자 프로필 카드에 있습니다.

감사합니다! CSS가 작동했어요!

완벽해요! 제대로 작동해서 다행이에요! CSS 관련 부분은 아직도 저한테는 좀 까다로워요.