# 매우 맞춤화된 테마를 만드는 방법은 무엇인가요?

**URL:** https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772
**Category:** Development
**Created:** [11월 8, 2023, 2:40오전 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772 "2023-11-08T02:40:20Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![SinisterSpatula](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sinisterspatula/32/332339_2.png) [@SinisterSpatula](https://meta.discourse.org/u/SinisterSpatula)
#### Post date: [11월 8, 2023, 4:08오전 UTC](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772/3 "2023-11-08T04:08:43Z")

</div>

고마워요 🙂 읽어야 할 자료가 정말 많네요. 다 이해가 되길 바랍니다. 정말 관련이 높은 주제를 하나 찾았어요:

> [@(비권장) 테마 또는 플러그인에서 Discourse 템플릿 오버라이드](https://meta.discourse.org/t/overriding-discourse-templates-from-a-theme-or-plugin/247487):
>
> 이상적으로는 Discourse를 테마/플러그인으로 커스텀할 때 CSS, [JavaScript 플러그인 API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051), 또는 [플러그인 아웃렛](https://meta.discourse.org/t/connect-your-theme-to-plugin-outlets-to-inject-templates-with-custom-content/32727)을 사용해야 합니다. 이 중 어느 것도 사용 사례에 맞지 않는다면, Discourse 코어에 PR을 열거나 Meta의 #Development 토픽에서 대화를 시작해 주세요. 커스텀을 더 쉽게 만들기 위해 새로운 아웃렛/API를 추가하는 것에 대해 항상 논의하는 것을 환영합니다. 모든 다른 옵션을 다 시도해 보았음에도 불구하고 템플릿 오버라이드가 필요한 경우가 있습니다. 이 기법은 테마/플러그인에서 어떤 Ember 컴포넌트나 라우트의 전체 템플릿을 오버라이드할 수 있게 해줍니다. rotating_light 이것은 Discourse를 커스텀하는 권장되지 않는 방법입니다. Discourse 코어의 일상적인 변경 사항은 결국 템플릿 오버라이드와 충돌할 것이며, 포럼 렌더링 시 치명적인 오류를 일으킬 수 있습니다. 이 접근 방식을 결정했다면, 회귀를 감지하…

그리고, 같은 고민을 하고 있을 다른 분들을 위해 몇 가지 링크와 메모를 공유합니다:

HTML 템플릿은 [https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates) 에 있습니다.

테마를 위한 입문자 가이드:

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/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/developer-s-guide-to-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…

테마를 위한 디자이너 가이드:

> [@디자이너를 위한 Discourse 테마 시작 가이드](https://meta.discourse.org/t/designers-guide-to-getting-started-with-themes-in-discourse/152002/11):
>
> This is possible, and the method I would reccomend. The only thing you need to be aware of is that these changes will be live on the forum as you make every change. What I do is set the theme to be user selectable, and change my personal user preference to that theme, while keeping the default theme the choice for all other users. This lets only you see any issues that may arise during theming.

테마 컴포넌트 생성:

> [@테마 개발자 빠른 참고 가이드](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)

플러그인 아웃렛 위치를 표시하는 테마 컴포넌트 (새로운 html/script/styles를 삽입할 위치):

> **[GitHub - communiteq/plugin-outlets-theme-component](https://github.com/communiteq/plugin-outlets-theme-component)**
>
> Contribute to communiteq/plugin-outlets-theme-component development by creating an account on GitHub.

플러그인 개발:

> [@Developing Discourse Plugins - Part 1 - Create a basic plugin](https://meta.discourse.org/t/developing-discourse-plugins-part-1-create-a-basic-plugin/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…

만들기 시작하는 법 배우기:

> [@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’…

개발용 Ubuntu/Debian에 Discourse 설치:

> [@개발용 Ubuntu 또는 Debian에 Discourse 설치하기](https://meta.discourse.org/t/install-discourse-on-ubuntu-or-debian-for-development/14727):
>
> warning 이 가이드는 개발 환경에서의 설치 지침을 다룹니다. 프로덕션 환경 설치 가이드는 다음을 참조하세요: [Install Discourse in production with the official supported instructions](https://meta.discourse.org/t/how-to-install-discourse-in-production/142537) Discourse를 Ubuntu 또는 Debian에 설정하여 개발하고 해킹(개발 작업)을 하길 원하시나요? 로컬에서 작업하고 있으며, Ubuntu 또는 Debian 시스템에 Ruby/Rails/Postgres/Redis가 설치되어 있지 않은 것으로 가정합니다. 시작해 보겠습니다! 요구 사항 최소 4GB의 RAM과 2개의 CPU 코어를 권장합니다. 현재 호환성: OS 호환성 Debian 11white_check_markCrostini (Linux on ChromeOS)white_check_markUbuntu 22.04 또는 그 이상white_check_markDiscourse …

내가 정말 수정하고 싶은 것은 “topic-list” 또는 홈페이지입니다.

```
• 이 테마는 이미 원하는 주제 목록 형식을 생성해 두었습니다:

```

> [@Sam's Simple Theme](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552):
>
> discourse2Summary Sam’s Simple Theme creates a “minimal” topic list designeyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/sams-simple-theme)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-simple-theme](https://github.com/discourse/discourse-simple-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme Features I have been thinking about this a lot, and decided to take a shot at a “minimal” front page customisation. To select this theme here on Meta he…

```
• 작성자 이름 + 아바타:

```

[Author name plus avatar](https://meta.discourse.org/t/author-name-plus-avatar/225337) 또는 [Show Original Poster Avatars](https://meta.discourse.org/t/show-original-poster-avatars/171346)

```
• 카테고리 그룹:

```

> [@카테고리 그룹](https://meta.discourse.org/t/category-groups/200874):
>
> discourse2요약 카테고리 그룹은 카테고리를 그룹에 할당할 수 있으며, 이 그룹은 카테고리 페이지에서 카테고리를 정렬하고 접는 데 사용됩니다.eyeglasses미리보기 [Discourse Theme Creator에서 미리보기](https://discourse.theme-creator.io/theme/Discourse/category-groups)hammer_and_wrench리포지토리 링크 [https://github.com/discourse/discourse-category-groups-component](https://github.com/discourse/discourse-category-groups-component)open_bookDiscourse 테마를 처음 사용하시나요? [Discourse 테마 사용 입문가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 기능information_source 참고할 중요한 사항: 이 테마 컴포넌트는 사이트 설정 desktop category page style이 boxes with subcategories로 설정되어 있을 때만 작동합니다(해당 카테고리 페이지 템플릿을 대체하기 때문). 카테고리 접기는 브라우저의 …

```
• 추천 카테고리 아이콘:

```

> [@추천 카테고리 헤더](https://meta.discourse.org/t/featured-categories-header/203779):
>
> bookmark_tabs요약 특정 뷰에서 기능 카테고리 표시.hammer_and_wrench저장소 링크 [Manuel Kostka / Discourse / Components / Featured Categories · GitLab](https://gitlab.com/manuelkostka/discourse/components/featured-categories.git)open_book디스코urs 테마를 처음 사용하시나요? [디스코urs 테마 사용 입문가 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 이 테마 컴포넌트 설치 카드 뷰 목록 뷰 설정 위 두 가지 레이아웃 중 하나를 선택하거나 없음을 선택하여 자체 스타일을 선언할 수 있습니다. 또한 라우트를 선택하고 컴포넌트의 아웃렛을 설정할 수도 있습니다. 템플릿 .featured-categories { &\_\_container { } &\_\_heading { } &\_\_list-container { } &\_\_ca…

온라인 테마 편집기도 시도해 볼 수 있습니다:

> **[Theme Creator](https://discourse.theme-creator.io)**
>
> Demonstration sandbox for Discourse

추가 항목:  
• 단일 로그인? SSO  
[Setup DiscourseConnect - Official Single-Sign-On for Discourse (sso)](https://meta.discourse.org/t/setup-discourseconnect-official-single-sign-on-for-discourse-sso/13045)  
• Discord 봇  
[Discord Bot Construction Kit 🤖](https://meta.discourse.org/t/discord-bot-construction-kit/122530)

---

_[View the full topic](https://meta.discourse.org/t/how-do-i-go-about-making-a-very-customized-theme/284772)._