# Gatsby 플러그인으로 Discourse를 헤드리스 CMS로 사용하기

**URL:** <https://meta.discourse.org/t/gatsby-plugin-to-use-discourse-as-headless-cms/150532>\
**Category:** Development\
**Created:** [5월 5, 2020, 10:07오후 UTC](https://meta.discourse.org/t/gatsby-plugin-to-use-discourse-as-headless-cms/150532 "2020-05-05T22:07:31Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![kristoferlund](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kristoferlund/32/140560_2.png) [@kristoferlund](https://meta.discourse.org/u/kristoferlund)\
**Post date:** [5월 5, 2020, 10:07오후 UTC](https://meta.discourse.org/t/gatsby-plugin-to-use-discourse-as-headless-cms/150532/1 "2020-05-05T22:07:31Z")

</div>

Discourse가 아닌 Gatsby용 플러그인을 만들었습니다. 이 플러그인은 Discourse 설치 환경에서 토픽 목록을 가져와 Gatsby 노드로 변환합니다. 이를 통해 Discourse를 헤드리스 CMS로 사용하는 방식을 단순화합니다.

저희는 이 플러그인을 프로젝트에서 사용해 마이크로블로그와 캘린더를 구축했습니다. 포럼에 새로운 콘텐츠가 추가되면 자동으로 업데이트됩니다.

마이크로블로그는 다음과 같습니다:

소스: [https://foodshift.se/t/forenade-inkop-nyheter-blogg/290/9](https://foodshift.se/t/forenade-inkop-nyheter-blogg/290/9)  
결과: [https://forenadeinkop.se/blogg](https://forenadeinkop.se/blogg)

그리고, 캘린더는 다음과 같습니다:

소스: [https://foodshift.se/tags/c/events/13/forenade-inkop/l/agenda](https://foodshift.se/tags/c/events/13/forenade-inkop/l/agenda)  
결과: [https://forenadeinkop.se](https://forenadeinkop.se) (페이지 하단)

다른 분들도 유용하게 사용하시길 바랍니다!

* * *

 ![gatsby-source-discourse-topic-list 로고](https://global.discourse-cdn.com/meta/original/3X/b/a/bac656b11ad65ee184d9c7217a26abccf640b510.png)

[![npm 버전](https://global.discourse-cdn.com/meta/original/3X/7/2/72ba11ceeae37a2546305f38790d1e5a8c887c27.svg)](https://www.npmjs.com/package/gatsby-source-discourse-topic-list) [![npm 다운로드](https://global.discourse-cdn.com/meta/original/3X/8/4/84029d948855f0d404c1c54b875e7ebefa93238f.svg)](https://www.npmjs.com/package/gatsby-source-discourse-topic-list)

**gatsby-source-discourse-topic-list** 는 [Discourse](https://www.discourse.org/) 토론 포럼 플랫폼에서 토픽 목록을 가져와 Gatsby 노드로 변환하는 데 도움을 줍니다.

Discourse API가 제공하는 토픽 목록 외에도, 이 플러그인은 각 토픽의 원본 텍스트(raw text)도 가져옵니다.

## 시작하기

1. **yarn** 또는 **npm** 으로 패키지를 설치합니다.

`yarn add gatsby-source-discourse-topic-list`

1. gatsby-config.js의 plugins 배열에 추가합니다.

```javascript
module.exports = {
    plugins: [
        {
            resolve: "gatsby-source-discourse-topic-list",
            options: {
                url: "https://my-discourse-server.com"
                endPoint: 'top.json',
            }
        }
    ]
};

```

## 옵션

| **이름** | **타입** | **설명** |
| --- | --- | --- |
| url | object 또는 string | `필수.` 문자열 형태의 Discourse 설치 URL입니다. 개발용과 프로덕션용으로 두 가지 다른 API를 사용하는 경우, `production`과 `development` 키를 가진 객체로 정의합니다. |
| endPoint | string | `필수.` `topic_list`를 반환하는 Discourse API 엔드포인트입니다. |
| rootKey | string | `선택.` API 이름을 지정합니다. |

### Discourse API 엔드포인트 예시

카테고리의 최신 토픽:

```plaintext
options: {
    url: "https://meta.discourse.org"
    endPoint: 'c/1.json',
}

```

태그로 필터링된 카테고리의 최신 토픽:

```plaintext
options: {
    url: "https://meta.discourse.org"
    endPoint: 'tags/c/bug/1/pr-welcome.json',
}

```

카테고리의 인기 토픽:

```plaintext
options: {
    url: "https://meta.discourse.org"
    endPoint: 'c/support/6/l/top.json',
}

```

전체 엔드포인트 목록은 [Discourse API 문서](https://docs.discourse.org/)를 참조하세요.

### 결과 예시

마크다운 형식의 전체 처리되지 않은 토픽 텍스트를 포함하는 추가된 `raw` 필드를 주목하세요.

```plaintext
{
  "users": [
    {
      "id": 0,
      "username": "string",
      "avatar_template": "string"
    }
  ],
  "topic_list": {
    "can_create_topic": true,
    "draft": {},
    "draft_key": "string",
    "draft_sequence": 0,
    "for_period": "string",
    "per_page": 0,
    "topics": [
      {
        "id": 0,
        "title": "string",
        "fancy_title": "string",
        "slug": "string",
        "raw": "The full unprocessed topic text in markdown format", 
        ...
      }
    ]
  }
}

```

## 여러 소스? 여러 인스턴스!

프로젝트에서 여러 엔드포인트를 가져오려면 플러그인을 여러 번 인스턴스화하면 됩니다. 각 인스턴스에 대해 서로 다른 `rootKey`를 설정하는 것을 잊지 마세요.

## 크레딧

이 플러그인은 [Andreas Faust](https://github.com/AndreasFaust)님의 훌륭한 [gatsby-source-custom-api](https://github.com/AndreasFaust/gatsby-source-custom-api)를 기반으로 구축되었습니다. 🙏

## 기여하기

모든 기여에 깊이 감사드립니다.  
버그, 기능 요청, 풀 리퀘트를 자유롭게 제출해 주세요.

❤ 이 플러그인이 도움이 되었다면 [GitHub](https://github.com/kristoferlund/gatsby-source-discourse-topic-list)에서 별점을 남겨주세요.

---

_[View the full topic](https://meta.discourse.org/t/gatsby-plugin-to-use-discourse-as-headless-cms/150532)._