manuel
2월 17, 2025, 4:13오후
1
Canvas는 코딩 양을 줄이고도 맞춤형 테마를 만들 수 있는 유연한 템플릿을 제공합니다. 속성과 설정 값을 쉽게 조정하여 테마를 필요에 맞게 맞춤화할 수 있습니다.
기본 템플릿은 기본값을 유지하며 디자인적으로 중립적입니다.
몇 가지 사용자 정의 속성을 수정하고 강조 색상을 정의하는 최소한의 조정:
토픽 카드(Topic Cards) 구성 요소를 통합하고 배너에 사용자 정의 스타일을 적용한 디자인:
사용자 정의 폰트와 고유한 색상 스킴을 포함한 정교한 테마:
이전의 Central 테마를 재해석한 디자인:
테마 템플릿 클론 .
discourse_theme gem 을 사용하여 테마를 Discourse 인스턴스와 동기화합니다.
관리자 백엔드로 이동하여 다음 테마 구성 요소 설정을 수동으로 조정합니다:카테고리 배너 above-main-container 태그 배너 해제 선택
scss/properties.scss를 편집하여 사용자 정의 속성의 값을 정의합니다
about.json을 편집하여 자산, 색상 스킴 및 기타 테마 구성 요소를 추가합니다
Canvas Theme 템플릿은 기본 테마 스켈레톤에 몇 가지 테마 구성 요소를 번들링하고 미리 준비된 스타일 파일을 추가하여 확장하는 것만 수행합니다. 실제 기능은 별도의 테마 구성 요소인 Canvas Settings 에서 처리됩니다. 이 구성 요소는 두 가지 기능을 수행합니다:
이러한 분리된 설정 구조를 사용하면 Canvas 템플릿을 사용하여 테마를 만들면서도 구성 요소를 통해 제공되는 지속적인 수정과 업데이트의 이점을 누릴 수 있습니다.
공유된 예시 테마는 https://canvas.kostka.studio에서 미리 볼 수 있습니다. 사이드바 하단에 테마를 변경하는 테마 토글이 있습니다.
공유된 예시 뷰의 코드를 검토하거나 다음 저장소에서 시작 테마로 설치할 수 있습니다:
28개의 좋아요
jrgong
2월 18, 2025, 1:13오후
2
예제 테마를 설치해 보았을 때 해당 테마 설정이 표시되지 않았습니다. 이는 정상적인 동작인가요?
1개의 좋아요
manuel
2월 18, 2025, 1:23오후
3
설정은 Canvas Settings 로 설치된 테마 컴포넌트에 있습니다. UI에서 테마 컴포넌트도 포함하여 설정이 항상 Theme Settings 라고 표시되는 것이 다소 혼란스러울 수 있습니다.
2개의 좋아요
jrgong
2월 18, 2025, 1:25오후
4
Canvas Settings 컴포넌트에서 찾았어요, 감사합니다!
3개의 좋아요
pmusaraj
2월 20, 2025, 7:54오후
5
이 작업을 맡아주셔서 정말 감사합니다, @manuel .
로컬에서 Editor 버전을 직접 테스트해 봤는데, 전반적으로 아주 잘 동작하지만 몇 가지 작은 문제를 발견했습니다.
기본 설치 상태에서 아무 설정도 변경하지 않았을 때, Extra Banners 컴포넌트의 태그 라벨이 잘못된 위치에 표시됩니다:
카테고리 배너도 사이드바 위에 같은 위치에 표시됩니다. 최신 주제(Latest topics)와 인기 주제(Hot topics)는 메인 컬럼에 올바르게 표시됩니다.
테마의 목표가 관리자 UI를 완전히 커버하는 것은 아닐 것 같지만, Editor의 라이트 모드와 다크 모드 색상 팔레트에서 관리자 사이드바의 외관이 꽤 다르게 보입니다. 비관리자 사이드바와 조화를 이루도록 만드는 것이 가능한지 궁금합니다.
5개의 좋아요
manuel
2월 20, 2025, 10:24오후
6
이 테마는 above-main-container 아웃렛을 사용하여 사이드바 옆에 배너를 표시하도록 설계되었습니다. Extra-Banners 컴포넌트는 기본적으로 해당 아웃렛을 사용하지만, 카테고리 및 태그 배너를 위한 두 컴포넌트는 기본적으로 헤더 아래에 렌더링됩니다. 단순히 기본 아웃렛을 변경하기 위해 이 컴포넌트들을 포크(fork)하고 싶지는 않았습니다. 그래서 다음 안내문을 추가했습니다:
Manuel Kostka:
관리자 백엔드로 이동하여 이 테마 컴포넌트 설정을 수동으로 조정하십시오:카테고리 배너 above-main-container 태그 배너 해제 선택
하지만 이것이 놓치기 쉽다면, 더 나은 표현 방법이 있을까요?
네, 그것은 충분히 쉬워 보이며 이 테마에 좋은 접근 방식입니다. 방금 커밋을 추가했습니다!
5개의 좋아요
pmusaraj
2월 20, 2025, 10:29오후
7
아, 이제 어떻게 이런 상황이 됐는지 알겠어요. 카테고리/태그 배너 컴포넌트의 기본값을 변경할 필요는 없고, 포크를 만들기도 원치 않아요. 수정하기가 까다로워서 당분간 이대로 두어 보고 다른 사람들도 같은 문제를 겪는지 확인해 보겠습니다.
관리자 사이드바 변경 사항은 이미 잘 되어 있네요. 감사합니다!
4개의 좋아요
mk0r
2월 23, 2025, 5:36오후
8
이 설명을 좀 더 자세히 해줄 수 있을까요? 관리자 UI에서 바로 설치하는 것은 불가능한가요? 감사합니다
Manuel Kostka:
수정: 관리자 UI를 통해 설치했는데, scss를 편집할 곳이 없는 것 같습니다. 그 외에는 정상적으로 작동하는 것 같습니다.
수정: 아니, 아마도 의도된 것 같네요. 테마 파일을 직접 편집하는 방법을 보여주고 있군요. 이 기능이 관리자 UI를 통해 가능하도록 로드맵에 포함될 수 있을까요? 설정 편집기처럼 변수 편집기가 있는 것처럼요.
3개의 좋아요
manuel
2월 23, 2025, 9:10오후
9
핵심 로드맵에 무엇이 있는지 모르지만, 지금 바로 할 수 있는 일은 관리자 UI에서 새 테마 컴포넌트를 만드는 것입니다:
그 다음 CSS 파일에서 사용자 정의 속성을 선언하세요. 속성은 Readme 파일 에서 찾을 수 있습니다. 또는 테마 저장소에서 properties.scss 의 내용을 복사해 올 수도 있습니다.
2개의 좋아요
Heliosurge
3월 4, 2025, 3:33오전
10
이것을 GitHub에 어떻게 클론할 수 있을까요? 아직 초보자에요
manuel
3월 4, 2025, 9:35오전
11
UI를 통해 가져올 수도 있습니다:
다만 변경 사항을 동기화할 수 있기를 원한다면 로컬 클론으로 가져온 후 거기서 푸시해야 할 것입니다. 다음과 같은 방식으로요:
GitLab에서 클론
git clone "https://gitlab.com/manuelkostka/discourse/canvas/theme.git"
푸시 URL을 GitHub 저장소로 설정
git remote set-url --push origin "git@github.com:Username/Reponame.git"
그런 다음 주기적으로 GitLab에서 가져오고 GitHub로 푸시할 수 있습니다
git fetch -p origin
git push origin
2개의 좋아요
Heliosurge
3월 4, 2025, 10:00오전
12
GitHub 모바일 버전에서 플러스 기호가 보이지 않습니다. 집에 가서 커맨드라인을 사용해봐야 할 것 같습니다.
GitHub 대시보드에서 볼 수 있는 것은 새 저장소를 생성하는 옵션뿐이며, claim 옵션은 없습니다. 무료 계정을 사용하고 있어서 이것이 관련이 있는지 모르겠습니다.
manuel
3월 10, 2025, 7:57오후
13
컴포넌트 UI에서 몇 가지 스타일 변수와 레이아웃 옵션을 직접 정의할 수 있는 컴포넌트를 추가했습니다:
스타일시트에서 커스텀 변수를 선언하는 것에 비하면 제한적일 수 있습니다. 하지만 몇 가지 다른 스타일을 시도해 볼 수는 있습니다. 이렇게 하면 도움이 될지 궁금합니다!
GitLab.com
2개의 좋아요
Aurora
4월 14, 2025, 1:08오후
14
manuel:
화면 테마 예시
지금 바로 테스트해 보고 있는데 꽤 마음에 듭니다! 메뉴의 줄 간격을 줄여서 더 컴팩트하게 만들 수 있는 방법이 있을까요?
또한, 고체 사이드바를 스크롤할 수 없는데, 이것이 의도된 것인지 실수인지 궁금합니다.
2개의 좋아요
manuel
4월 14, 2025, 2:24오후
16
고체 사이드바의 CSS 스타일을 조정했으니, 이제 스크롤이 다시 작동해야 합니다!
다만, 고체 사이드바는 위에서 언급한 스타일 컴포넌트의 옵션 중 하나일 뿐입니다. 더 많은 스타일(예: 사이드바 메뉴 간격)을 조정하려면, 사용 방법 과 설정 자세히 보기 에 설명된 접근 방식을 따르셔야 합니다: CSS 커스텀 속성을 사용하여 자체 스타일시트를 사용해야 하며, 이 경우 해당 속성은 -d-sidebar-row-height가 됩니다.
3개의 좋아요
manuel
5월 27, 2025, 5:16오후
17
GitLab.com
이 템플릿을 기반으로 한 새로운 예제 테마를 만들어 보았습니다. 이름에서 알 수 있듯이, 이 테마는 원래의 Central 테마에 대한 오마주입니다!
Central 테마의 레이아웃과 시각적 스타일을 매우 좋아해서, Custom User Menu 와 여러 사이드바 블록과 같은 일부 기능을 독립적인 컴포넌트로 패키징해 왔습니다.
사이드바와 몇 가지 스타일을 추가하면, 이 템플릿만으로 원래 테마의 분위기와 느낌을 꽤 잘 재현할 수 있다는 것을 깨달았습니다.
어쨌든, Central 테마를 완전히 재구축할 계획은 없습니다. 하지만 나중에 전용 토픽 목록 스타일에 대한 실험을 해볼 수도 있습니다. 궁금하다면 직접 확인해 보세요. 사이드바의 테마 전환 기능을 통해 선택할 수 있으며, 테마는 여기에서도 사용 중입니다: https://canvas.kostka.studio
8개의 좋아요
kevin001
5월 29, 2025, 2:32오후
19
이 템플릿을 공유해 주셔서 감사합니다! 컴포넌트의 유연성과 깔끔한 디자인 덕분에 커스터마이징이 정말 쉽습니다. 제 인스턴스에서 직접 사용해 보기를 기대하고 있습니다.
2개의 좋아요
Canapin
2월 23, 2026, 11:04오후
21
不久的将来，Foundation 更新将成为新的默认设置。那么，Canvas 主题模板会更新为使用相同的 “foundations”（呃），还是会保持现在的样式，与当前（即将过时的）Foundation 主题非常相似？
1개의 좋아요
이 프로젝트 개발을 후원해 주신 Discourse에 진심으로 감사드립니다!
에 오신 것을 환영합니다!