scavin
11월 8, 2025, 10:18오후
1
Discourse 커뮤니티에 우아한 타임라인 레이아웃을 추가하는 새로운 테마 컴포넌트를 공유하게 되어 기쁩니다!
이것은 LLM의 도움을 받아 개발한 제 첫 번째 테마 컴포넌트입니다.
##这是什么 ? (What is it?)
Discourse Timelines 는 아름다운 미니멀리스트 타임라인 레이아웃을 만들기 위해 커스텀 BBCode [timelines]...[/timelines]를 구현한 테마 컴포넌트입니다. 프로젝트 로드맵, 단계별 가이드, 회사 역사, 챕터 구분 등에 완벽합니다.
컴포저 열기
“+”(옵션) 메뉴 버튼 클릭“타임라인 삽입” 선택콘텐츠 편집
게시!
툴바 버튼은 새 Discourse 에디터가 수동으로 입력한 중괄호를 자동으로 이스케이프하는 문제를 해결합니다.
[timelines]
## January 2024 - Project Launch
The project was officially initiated, and the team was formed.
## March 2024 - First Release
Core functionality development completed and beta testing began.
## June 2024 - Version 2.0
Major update with new features:
- Feature A
- Feature B
- Feature C
[/timelines]
모든 색상은 테마 설정을 통해 사용자 정의할 수 있습니다:
timeline_gradient_start - 상단 그라디언트 색상 (기본값: #ff7a18)timeline_gradient_end - 하단 그라디언트 색상 (기본값: #ffb800)timeline_heading_color - 헤딩 텍스트 색상 (기본값: #d96d14)timeline_dot_color - 타임라인 점 색상 (기본값: #ff7a18)timeline_heading_color_dark - 다크 모드 헤딩 색상 (기본값: #ff9854)timeline_dot_border_color_dark - 다크 모드 점 테두리 (선택 사항)
이 컴포넌트가 유용하길 바랍니다! 질문, 피드백, 또는 제안이 있다면 알려주세요.
27개의 좋아요
DiscoTOC와 함께 작동하나요?
이 기능은 더 큰 헤더에 의존하는 것 같아서, TOC 계층 구조에서 약간 유연성이 떨어집니다.
scavin
11월 26, 2025, 5:07오전
7
DiscoTOC로 테스트해 보았지만, 문제는 발견되지 않았습니다.
데모 페이지 에 TOC를 추가했으니, 자유롭게 열어 보고 어떻게 작동하는지 확인해 보세요.
1개의 좋아요
참고해 주셔서 감사합니다.
자동 TOC(자동 목차)가 있는 게시물에서 사용할 때, 헤더 2와 3 마크다운에 의존하기 때문에 눈에 잘 띕니다. 더 유연하게 사용하기 위해 헤더 4나 5를 대신하거나 추가로 사용할 수 있는 방법이 있을까요?
타임라인이 TOC 계층 구조에서 더 아래, 예를 들어 헤더 2나 3 뒤에 위치하게 되면 TOC가 시각적으로 어지러워 보입니다.
수정: [details] 태그로 감싸면 타임라인 헤더가 TOC에 표시되지 않습니다. 제 용도에는 합리적인 우회 방법입니다.
2개의 좋아요
scavin
11월 27, 2025, 10:19오전
9
제안해 주셔서 감사합니다! 이 부분을 어떻게 개선할지 살펴보겠습니다.
1개의 좋아요
scavin
11월 28, 2025, 3:31오전
10
이제 우회 조치 없이 타임라인 제목을 목차(TOC)에서 제외할 수 있습니다:
[timelines] 블록 내에서 ##! (H2 스타일) 또는 ###! (H3 스타일) 접두사를 붙여 가상의 제목(pseudo-headings)을 사용하세요.
예시:
[timelines]
##! 2020 – 기반 구축
내용…
[/timelines]
이들은 타임라인 내부에서 H2/H3처럼 렌더링되지만 실제 제목으로 처리되지 않으므로, 타임라인이 어디에 위치하든 autoTOC가 깔끔하게 유지됩니다.
타임라인의 제목을 목차에 유지하려면 기존처럼 일반 ##/###을 사용하세요.
현재 [timelines] 안에 ##! (또는 ###!)가 하나라도 있으면 TOC가 해당 타임라인 전체를 건너뜁니다.
같은 타임라인에서 두 스타일을 혼합하는 것은 아직 지원되지 않습니다.
이제 혼합 사용이 가능합니다: ##/###은 여전히 TOC에 표시되고, ##!/###!은 타임라인 내부에서만 렌더링되어 TOC에서 제외됩니다.
컴포넌트를 업데이트하고 사용해 보세요.
4개의 좋아요
정말 영리한 우회 방법 아이디어네요!
다음과 같은 경우에는 잘 작동하는 것 같습니다:
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
하지만 목록 같은 다른 포맷 항목 뒤에 이어지는 의사 헤더(pseudo-header)의 경우에는 작동하지 않습니다:
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
첫 번째 의사 헤더는 빈 줄이 위쪽에 포맷팅되는 것을 피하기 위해 [timelines] 태그와 같은 줄에 오는 것을 선호합니다. 예를 들어:
[timelines]##! 2020 - Foundation
Content...
[/timelines]
그렇지 않으면 첫 번째 의사 헤더 위에 간격이 생깁니다. 마치 그것이 일반적인(헤더가 아닌) 타임라인 블록 줄인 것처럼 말이죠.
이 작업을 위해 고생했습니다. 이제 사용법이 놀랍도록 유연해졌습니다.
2개의 좋아요
scavin
11월 28, 2025, 8:11오전
12
알려줘서 고마워.
나도 같은 현상을 확인하고 있어. 현재 아래 두 가지는 정상적으로 렌더링돼:
[timelines]##! 2020 - Foundation
Content...
[/timelines]
그리고
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
그런데 이건 작동하지 않아:
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
확인 중인데 아직 적절한 수정 방법을 찾지는 못했어.
3개의 좋아요
위와 같이 코드 백틱()으로 감싸져 있더라도, 게시물에 [timelines]가 존재하는 곳이면 어디서든 활성화되는 것으로 보입니다. 역슬래시로 이스케이프([timelines]`)해도 차이가 없는 것 같습니다.
ETA: [timelines]와 [/timelines] 태그는 줄바꿈을 이스케이프하여, 세 개의 백틱(````)으로 된 코드 블록에서 가장 가까운 텍스트와 같은 줄에 표시됩니다.
즉,
[timelines]
Blah
Blah
[/timelines]
은 다음과 같이 표시됩니다.
[timelines]Blah
Blah[/timelines]
이 기능을 사용하는 가이드를 작성하던 중 발견한 것이라, 아마도 경계 사례일 가능성이 높습니다.
1개의 좋아요
커스텀 BBCode - 간단한 [timelines] 구문
