 |
요약 | 마크다운 인용구를 대체할 수 있는 Obsidian 스타일의 콜아웃(callouts)을 추가합니다. |
 |
미리보기 | Theme Creator |
 |
저장소 | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
Discourse 테마 초보자? | Discourse 테마 사용 입문 가이드 |
이 테마 컴포넌트 설치
이 테마 컴포넌트는 Discourse에서 마크다운 인용구의 대안으로 Obsidian 스타일의 콜아웃을 지원합니다.
콜아웃은 콘텐츠를 강조하고 게시글에 노트, 경고 또는 기타 특수 메시지를 추가하는 훌륭한 방법입니다.
사용법
콜아웃을 만드는 방법은 여러 가지가 있습니다.
마크다운 문법
인용구의 첫 줄에 [!type]을 추가합니다. 여기서 type은 유형 식별자입니다. 유형 식별자는 콜아웃의 모양과 느낌을 결정합니다. 사용 가능한 모든 유형을 보려면 ‘지원되는 유형’ 섹션을 참조하세요.
> [!tip]
> **팁**: 가독성을 높이기 위해 `코드 스니펫`을 사용하세요. 명확함과 정밀도를 제공합니다.
미리보기
아이콘을 클릭하여 유형을 변경할 수 있습니다:
리치 텍스트 에디터
이제 완전히 지원됩니다. 리치 텍스트 에디터 지원 섹션을 참조하세요.
키보드 단축키
- Ctrl + q — 빈 콜아웃 삽입
도구 모음
채팅
기본 콜아웃을 삽입하기 위한 도구 모음 버튼이 제공됩니다.
사용자 정의 제목
기본적으로 콜아웃의 제목은 타이틀 케이스로 표시된 유형 식별자입니다. 유형 식별자 뒤에 텍스트를 추가하여 변경할 수 있습니다:
> [!question] Custom Label 🤗
> Callouts labels can be customized.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> They can also contain special inline formatting like dynamic dates.
제목만 있는 콜아웃도 만들 수 있습니다:
> [!success] solved.
접이식 콜아웃
유형 식별자 바로 뒤에 더하기 + 또는 빼기 -를 추가하여 콜아웃을 접이식으로 만들 수 있습니다.
+는 기본적으로 콜아웃을 펼칩니다-는 대신 접어둡니다
> [!todo]- My Todo List
>
> - [x] Write documentation
> - [ ] Add tests
> - [ ] Review code
> [!todo]+ My Expanded Todo List
>
> - [x] Create repository
> - [ ] Setup CI/CD
> - [ ] Deploy to production
중첩 콜아웃
콜아웃을 여러 단계로 중첩할 수 있습니다.
> [!question] Can callouts be nested?
>
> > [!todo] Yes!, they can.
> >
> > > [!example] You can even use multiple layers of nesting.
> [!tip]
> Here's a helpful tip
>
> > [!info]
> > With some additional information
> >
> > > [!example]
> > > And a nested example
>
> Back to the main tip
지원되는 기본 유형
여러 가지 콜아웃 유형과 별명을 사용할 수 있습니다.
각 유형에는 고유한 배경색과 아이콘이 있습니다.
callouts설정을 참조하세요.
note유형으로 처리됩니다. 자세한 내용은 기본 폴백 섹션을 참조하세요.
| 유형 | 설명 | 별명 |
|---|---|---|
note |
일반적인 노트 및 정보용 | - |
abstract |
요약 또는 초록 섹션용 | summary, tldr |
info |
정보성 콘텐츠용 | - |
todo |
작업 목록 또는 할 일 항목용 | - |
tip |
팁 및 중요한 정보용 | hint, important |
success |
성공 메시지용 | check, done |
question |
질문 및 FAQ용 | help, faq |
warning |
경고용 | caution, attention |
failure |
실패 공지용 | fail, missing |
danger |
위험 또는 오류 메시지용 | error |
bug |
버그 보고서 또는 알려진 문제용 | - |
example |
예시용 | - |
quote |
인용구용 | cite |
사용자 정의
아이콘
FontAwesome 아이콘을 사용하거나 SVG 요소를 직접 제공할 수 있습니다.
SVG 요소
무료 FontAwesome 버전은 많은 선택지를 제공하지만, 때로는 제한적으로 느껴질 수 있습니다.
SVG 요소 <svg>...</svg>를 제공할 수 있습니다.
예: Lucide icons – 스트로크 두께를 선택할 수 있는 장점이 있는 훌륭한 아이콘 세트입니다.
- 아이콘 선택
- 스트로크 두께 조정
- Copy SVG 클릭
- 테마 컴포넌트 설정으로 이동하여 내용 붙여넣기
기본 폴백
지정된 콜아웃 유형을 찾을 수 없을 때 사용할 기본 값을 다음 설정으로 지정할 수 있습니다:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse is fantastic]
> Yes.
전역 구성
다음과 같은 콜아웃의 다양한 측면을 사용자 정의할 수 있습니다.
- 배경 불투명도
- 경계선 속성 (너비, 스타일, 색상, 반경)
- 패딩
- 제목 글꼴 속성 (크기, 굵기)
- 아이콘과 제목 간 간격
콜아웃별 구성
각 콜아웃 유형은 다음으로 사용자 정의할 수 있습니다:
- 사용자 정의 아이콘
- 제목 텍스트
- 색상 스킴
- 경계선 속성
아래의 설정 섹션을 참조하세요.
설정
목록
| 설정 | 설명 |
|---|---|
| callouts | 콜아웃을 정의합니다. |
| callout_fallback_type | 지정된 유형을 찾을 수 없을 때 사용할 기본 콜아웃 유형. 기본 값: note |
| callout_fallback_icon | 지정된 유형을 찾을 수 없을 때 사용할 기본 아이콘. 기본 값: far-pen-to-square |
| callout_fallback_color | 지정된 유형을 찾을 수 없을 때 사용할 기본 색상. 기본 값: #027aff |
| callout_background_opacity | 콜아웃의 전역 배경 불투명도 (1~100). 기본 값: 10 |
| callout_border_width | 콜아웃의 전역 경계선 너비. 기본 값: empty |
| callout_border_style | 콜아웃의 전역 경계선 스타일. 기본 값: empty |
| callout_border_color | 콜아웃의 전역 경계선 색상. 기본 값: empty |
| callout_border_radius | 콜아웃의 전역 경계선 반경. 기본 값: var(--d-border-radius) |
| callout_padding | 콜아웃의 전역 패딩. 기본 값: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | 콜아웃 제목의 전역 글꼴 크기. 기본 값: inherit |
| callout_title_font_weight | 콜아웃 제목의 전역 글꼴 굵기. 기본 값: bold |
| callout_title_gap | 콜아웃 아이콘과 제목 간의 전역 간격. 기본 값: 0.5em |
| callout_icon_sizep | 콜아웃 아이콘의 전역 크기. |
| callout_transition_duration_ms | 열기 및 닫기 애니메이션의 지속 시간 (ms). |
| svg_icons | 이 테마 컴포넌트에서 사용되는 FontAwesome 6 아이콘 목록. |
콜아웃별 설정 페이지:
| 설정 | 설명 |
|---|---|
| Type* | 콜아웃의 유형. 이 식별자는 콜아웃 문법에서 사용됩니다: [!type] |
| Alias | |로 구분된 콜아웃의 별명.예: cite|quote |
| Icon | 콜아웃의 fontawesome 아이콘. 기본 하위 집합에 없을 경우 svg_icons 설정에 추가해야 할 수 있습니다.대신 SVG 요소를 직접 제공할 수 있습니다. 예: <svg>...</svg> |
| Icon size | 콜아웃 아이콘의 크기. 참고: 1em, 16px, 1.5rem 등 유효한 CSS 값만 사용하세요 |
| Title | 콜아웃의 제목. 콜아웃에 제목이 제공되지 않으면 이 설정이 사용됩니다. 참고: 둘 다 비어 있으면 제목은 콜아웃 유형이 됩니다. |
| Color | 콜아웃의 색상. 배경, 제목, 아이콘에 사용됩니다. 참고: #027aff 등 16진수 색상 코드만 사용하세요 |
| Border width | 콜아웃의 경계선 너비. |
| Border style | 콜아웃의 경계선 스타일. |
| Border color | 콜아웃의 경계선 색상. 중요: rgba와 같은 알파 값을 생성하는 CSS 함수를 사용하는 경우, 값 사이에 공백을 사용하지 마세요. 예: rgba(145,145,145,0.1) |
| Border radius | 콜아웃의 경계선 반경. |
* 필수 설정
리치 텍스트 에디터 지원
이 컴포넌트는 이제 Discourse 리치 텍스트 에디터를 지원하여 콜아웃을 더 쉽게 생성, 편집 및 정리할 수 있습니다.
콜아웃 생성
콜아웃을 여러 방식으로 삽입할 수 있습니다:
- 키보드 단축키: Ctrl + Q
- 도구 모음 버튼
- 입력 규칙:
/callout<:type>!!<type>
- 붙여넣기 지원
비디오
콜아웃 편집
콜아웃을 편집하기 위한 컨트롤은 콜아웃을 선택한 후에만 나타납니다.
-
유형 선택기
아이콘을 클릭하면 플로팅 메뉴가 나타납니다. -
사용자 정의 제목
인라인 포맷팅 및 이모지 지원 -
접기(Folding)
콜아웃을 접이식으로 설정합니다. 옵션 메뉴에서 접근할 수 있습니다.
비디오
이동 컨트롤
-
데스크톱
- 핸들을 사용하여 드래그 앤 드롭
-
터치 디바이스
- 콜아웃 위/아래로 이동
- 인접한 콜아웃 내부에 중첩
- 기본적으로 비활성화 (옵션에서 활성화 가능)
비디오
키보드 내비게이션
중첩된 콜아웃 내부의 내비게이션을 개선합니다:
- 제목 시작 부분에서 ← 키를 누르면 유형 선택기가 열립니다
- 빈 영역 내부에서 ↑ / ↓ 키를 누르면 단락을 생성/제거합니다
- 제목에서 Enter 키를 누르면 커서가 본문으로 이동합니다
비디오
클릭하여 삽입
- 빈 영역을 클릭하여 단락을 생성합니다
- 선택적 버튼을 사용하여 콜아웃 내부 또는 외부에 콘텐츠를 삽입할 수 있습니다
비디오
로드맵
향후 개발 계획에는 다음이 포함될 수 있습니다:
- 입력 시 유형 자동 완성
테마/구성 요소에 오류가 있어 사이트가 제대로 작동하지 않을 수 있습니다.
