# Discourse 플러그인에서 게시글 메뉴에 토글 버튼을 추가하고 해당 버튼의 동작을 구현하는 방법은?

**URL:** https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835
**Category:** Development
**Created:** [11월 28, 2023, 12:34오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835 "2023-11-28T12:34:55Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![omppatil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omppatil/32/359876_2.png) [@omppatil](https://meta.discourse.org/u/omppatil)
#### Post date: [11월 28, 2023, 12:34오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/1 "2023-11-28T12:34:55Z")

</div>

안녕하세요!  
디스코urs 플러그인 개발을 처음 시작하는 사람인데, 게시글 메뉴에 토글 버튼을 추가하고 해당 동작을 플러그인에 구현하는 방법에 대해 도움을 받고 싶습니다.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [11월 28, 2023, 12:41오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/2 "2023-11-28T12:41:05Z")

</div>

안녕하세요 @omppatil, 아래 게시물이 올바른 방향으로 나아가는 데 도움이 될 수 있습니다:

> [@게시글에 버튼 추가용 클래스 커넥터](https://meta.discourse.org/t/class-connector-for-adding-button-to-post/167089/2?u=lilly):
>
> If you want to add a button to the post menu then you’ll need something a little bit different since posts are [widgets](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347). You would need to add something like this to your theme / plugin. api.addPostMenuButton("my-button", () =\> { return { action: "someAction", icon: "someIcon", className: "someClass", title: "some title", }; }); The plugin API has a method for adding new buttons that makes this relatively easy. [discourse/app/assets/javascripts/discourse/app/lib/plugin-api.…](https://github.com/discourse/discourse/blob/7a2e8d3ead63c7d99e1069fc7823e933f931ba85/app/assets/javascripts/discourse/app/lib/plugin-api.js#L371-L392)

또한 Discourse 플러그인 프로그래밍을 처음 접하시는 분이라면:

> [@Developing Discourse Plugins - Part 1 - Create a basic plugin](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins/30515):
>
> Building a plugin in Discourse can be really simple, once you learn a couple of quirks. The goal of this post is to create a skeleton plugin and introduce you to the basics. Your development environment Make sure you have a development environment of Discourse running on your computer. I recommend you use [the appropriate setup guide](https://meta.discourse.org/tag/dev-install) and come back when you’re done. plugin.rbtada Use [GitHub - discourse/discourse-plugin-skeleton: Template for Discourse plugins · GitHub](https://github.com/discourse/discourse-plugin-skeleton) to create a complete di…

> [@How can I make my own Discourse plugins?](https://meta.discourse.org/t/how-can-i-make-my-own-discourse-plugins/90032/2):
>
> I’ve only just started but here’s my ‘starter for 10’ to get you going: Read: [these](https://meta.discourse.org/t/beginners-guide-to-creating-discourse-plugins-part-1/30515)[this](https://meta.discourse.org/t/how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954) Try and read the code on the simplest, [but popular plugins](https://meta.discourse.org/c/plugin/l/top/yearly) and see if you can understand what they are doing (this is not always easy, especially with the complexity of dealing with multiple files and the sometimes brutal functional brevity of javasctipt, but persevere) You need to learn: Lots of Javascript (look no further than @mpj’s [Fun Fun Function excellent & fun (!) videos](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q) (thanks man!)) Lots of …

> [@Learn how to start building stuff for Discourse if you're newbie (like myself)](https://meta.discourse.org/t/learn-how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954):
>
> There are a few ‘how to start’ guides for working with Discourse already and a wealth of useful info on meta, but I thought it might help to give an insight to the mental processes of starting from little, if any, prior coding experience to building substantial Discourse plugins. Discourse is written by experienced developers and has a large codebase. This can feel intimidating. This intimidation factor can be a significant barrier for novice developers. This is a kind of ‘psychological primer’…

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [11월 28, 2023, 12:46오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/3 "2023-11-28T12:46:39Z")

</div>

안녕하세요!

`addPostMenuButton`를 사용할 수 있습니다.

```js
api.addPostMenuButton('coffee', () => {
  return {
    action: 'drinkCoffee',
    icon: 'coffee',
    className: 'hot-coffee',
    title: 'coffee.title',
    position: 'first' // `first`, `last` 또는 `second-last-hidden`일 수 있습니다
  };
});

```

이렇게 액션을 추가할 수 있습니다:

```js
api.attachWidgetAction("post", "drinkCoffee", function () {
    //
}

```

수정: Lillian에게 지적을 받았네요 😄. Lilly가 올린 가이드를 따르는 것도 좋은 생각이 될 것입니다!

---

<div class="post-metadata">

### Author: ![omppatil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omppatil/32/359876_2.png) [@omppatil](https://meta.discourse.org/u/omppatil)
#### Post date: [11월 28, 2023, 12:53오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/4 "2023-11-28T12:53:27Z")

</div>

따라서 어떤 파일 구조를 구현해야 하며, 위의 코드는 어디에 배치해야 할까요?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [11월 28, 2023, 1:26오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/5 "2023-11-28T13:26:19Z")

</div>

위에서 링크한 주제들을 읽으면 관련 개발 질문에 대한 답을 찾으실 수 있을 것입니다. 플러그인 대신 테마 컴포넌트를 사용하여 원하는 결과를 얻을 수도 있습니다. 따라서 다음 링크들도 읽을 목록에 추가하시길 권합니다:

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

> [@테마 개발자 빠른 참고 가이드](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#theme-guides](https://meta.discourse.org/tag/theme-guides), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site se…](https://meta.discourse.org/t/-/374376)

또한, 제가 처음에 올린 링크에서 가져온 내용도 참고해 보세요:

> [@Johani](#):
>
> 이 테마 컴포넌트는 특정 조건에 기반하여 해당 메뉴에 새 버튼을 추가하는 메서드를 사용하고 새로운 작업을 정의합니다. 따라서 아래를 참고해 보세요.
> 
> [https://github.com/discourse/raw-post-button](https://github.com/discourse/raw-post-button)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [12월 28, 2023, 1:26오후 UTC](https://meta.discourse.org/t/how-can-one-add-a-toggle-button-to-the-post-menu-and-implement-an-action-for-that-toggle-button-in-a-discourse-plugin/286835/6 "2023-12-28T13:26:21Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
