저의 Discourse 인스턴스를 위한 새로운 플러그인을 개발하고 있습니다. 플러그인 자체는 잘 작동하지만, Discourse UI에 통합하는 부분에서 어려움을 겪고 있습니다. 제공되는 문서 를 검토해 보았지만, 여전히 명확하지 않은 부분이 있습니다. 이 분야에 처음 입문한 터라, 플러그인을 UI에 추가하는 방법에 대해 상세한 단계별 가이드를 제공해 주시면 감사하겠습니다. 과정을 이해하는 데 도움이 되는 간단한 예시(예: 강조된 “노란색 상자”)도 매우 유용할 것입니다.
도움 주셔서 감사합니다!
Elizeo Rocha:
플러그인을 UI에 추가하세요
이것은 다소 모호합니다. 더 구체적으로 말씀해 주실 수 있을까요? UI에 정확히 무엇을 추가하고 싶으신가요?
기존 Customization > Plugin 소스 코드를 살펴보고 그들이 무엇을 하고 있는지 확인해 보셨나요? (이것은 오픈 소스의 장점 중 하나입니다)
@merefield 저는 기본적으로 제 Discourse 인스턴스에 작은 상자를 표시하는 플러그인을 추가하고 싶습니다. 목표는 이 영역 중 하나에 'Hello, World!'를 표시하는 플러그인처럼 어떻게 해야 하는지 이해하는 것이며, 이를 통해 미래에 더 복잡한 무언가를 만들 수 있도록 하는 것입니다.
플러그인 아웃렛을 사용해야 합니다.
Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context.
Choosing an outlet
To find the name of a plugin outlet, search Discourse core for “<PluginOutlet”, or use the plugin outlet locations theme component. (e.g. topic-above-posts).
Wrapper outlets
Some outlets in core look like <PluginOutlet @name="foo" />. These allow you…
위치와 플러그인 아웃렛 이름을 파악하는 데 유용한 도구:
개발 환경에서 최신 버전의 Discourse 코어 를 실행하면 화면 왼쪽에 새로운 툴바가 표시되는 것을 확인할 수 있습니다:
[Developer Tools]
이 툴바를 사용하면 일반적으로 필요한 개발 도구에 원클릭으로 접근할 수 있습니다. 현재까지 다음과 같은 기능이 제공됩니다:
플러그인 아웃렛 디버그
이 기능은 모든 플러그인 아웃렛을 표시하며, 모든 사용 가능한 @outletArgs의 실시간 값을 보여주는 툴팁을 제공합니다.
이 기능은 인기 있는 플러그인 아웃렛 위치 테마 컴포넌트와 이전에 나온 플러그인 에서 영감을 받아 만들어졌습니다. 하지만 그들과는 달리 코어와의 긴밀한 통합 덕분에 항상 최신 아웃렛 및 인자와 100% 동기화되어 있습니다.
안전 모드
안전 모드를 켜고 끌 수 있습니다.
상세 로컬라이제이션
상세 로컬라이제이션 기능 을 켜고 끌 수 있습니다.
개발 환경에서는 기본적으로 활성화되어 있으며,…
성공적으로 작동했습니다! Ember.js Chrome 확장 프로그램을 설치한 후 사이트에서 PluginOutlet을 찾을 수 있었습니다. 문서를 따라 진행한 결과, 모든 기능이 예상대로 정상적으로 작동했습니다.
pfaffman
(Jay Pfaffman)
2월 11, 2025, 4:30오후
7
이 테마 컴포넌트들도 확인해 보세요. Custom Header Links 와 Custom Header Links (icons) .
단순히 버튼을 추가하려는 것이라면 플러그인이 필요하지 않습니다.