(이 글이 어디에 가장 잘 맞을지 찾지 못해 개발 카테고리를 선택했습니다.)
제가 테마를 3개 가지고 있습니다. 그중 하나의 테마에서 $primary_low의 계산 결과가 배경색(bgcolor)과 대비가 너무 약한 색을 생성합니다. 배경색은 브랜드 색상이므로 변경할 수 없으며, primary 색상을 조정해 보았지만 효과가 없었습니다. 결과적으로 대비가 거의 없거나, 제가 원하는 것과 정반대로 매우 밝게 강조되는 효과가 나타납니다.
해결책은 해당 테마의 CSS에서 $primary_low에 색상 값을 직접 지정하는 것이라고 생각했습니다. 하지만 적용되지 않습니다. !important를 추가해도 마찬가지입니다. 이 값을 테마 1개에만 적용해서 변경하는 방법이 있을까요? 참고: 이 테마들은 로컬 테마입니다.
@awesomerobot의 가이드를 여기를 확인하세요:
아, 감사합니다! 불행히도 로컬 테마라서 원격으로 사용할 수 없습니다.
다른 방법으로 이걸 할 수 있는 방법이 있을까요?
이것은 고급 기능으로 간주되므로 UI에서 사용할 수 없습니다. '로컬 테마’에 theme cli를 사용할 수 있습니다.
어떤 식으로든 해결할 수 있어서 다행이에요 
하지만 이 모든 루비 관련 내용은 여전히 제 수준에 비해 너무 고급스럽고, 오버라이드 기능이 언젠가 로컬 테마에도 지원되기를 진심으로 바랍니다.
제 지식 수준으로 어떤 걸 할 수 있을지 고민해 봐야겠어요. 저는 깃허브 초보라 원격 테마를 만드는 건 정말 daunting(겁이 나는) 일로 느껴집니다. (예, 가이드는 읽었어요).
리모트 테마는 정말 쉽습니다. 저는 이전에 GitHub을 사용해 본 적이 없고 about.json이 무엇을 의미하는지도 전혀 몰랐지만, 몇 가지 테마에 적용해 보았을 때 아무 문제 없이 잘 작동했습니다. 로컬 테마를 만든 후 GitHub에 업로드하고, GitHub의 about.json 파일에 항목을 추가하면 GitHub에서 사이트를 다시 설치할 때 테마에 다양한 멋진 커스터마이징 옵션이 나타납니다.
오늘 늦게 시간이 나면 과정을 자세히 안내하는 글을 올리겠습니다. 그러면 금방 이해가 될 거예요.
eta: 아, 리모트 테마의 또 다른 멋진 기능인 settings.yml에 대해 생각하고 있었네요. 하지만 위 데이빗의 링크를 보니 about.json이 훨씬 더 간단한 것 같습니다.
아래는 매우 상세한 설명입니다. 설명대로 작동하지 않으면 알려주세요.
아직 GitHub 계정이 없다면 하나를 생성하세요.
Discourse에서 테마를 내보냅니다:
Admin(관리자) → Customize(커스터마이즈) → 내보낼 테마를 선택하세요.
컴퓨터에서 파일을 압축 해제하세요.
GitHub에 가서 새 저장소(New repository)를 생성하세요:
"uploading an existing file"을 클릭하세요.
내보낸 테마에서 압축을 푼 폴더와 파일(아래와 같은 형태여야 합니다)을
파일은 다음과 같은 형태여야 합니다.
{
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-light": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
이제 편집할 수 있습니다. 컬러 스킴의 이름을 변경하는 것을 권장합니다. 그렇지 않으면 테마를 사이트로 다시 가져올 때 같은 이름을 가진 서로 다른 두 개의 컬러 스킴이 생성됩니다. 따라서 아래에서는 "blue-light": {를 "blue-lite": {로 변경했습니다.
love 값 뒤에 쉼표를 포함시키고, 컬러 스킴의 끝부분 love 뒤에 색상 변수 오버라이드를 추가하기만 하면 됩니다.
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-lite": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100",
"primary-high": "333333",
"primary-medium": "666666",
"primary-low-mid": "999999",
"primary-low": "cccccc"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
"Commit Changes"를 클릭하세요.
저장소 이름으로 돌아가기 위해 저장소 이름을 클릭하세요.
Clone or Download 링크를 복사하세요.
Discourse에서 테마를 가져옵니다:
Admin(관리자) → Customize(커스터마이즈) → Install(설치) → From a git repository: 링크를 붙여넣고 Install(설치)을 클릭하세요.
이제 이 테마를 로컬 테마와 마찬가지로 사용자 정의 $primary-high, $primary-medium, $primary-low-mid 및 $primary-low 값으로 편집할 수 있습니다.
@smrtey님, 이렇게 단계별 가이드를 만들어 주셔서 정말 감사합니다! 오늘 마침 시간을 내서 가이드를 따라 해봤는데, 완벽하게 작동했어요!
저도 깃허브를 처음 써보는 중이라, 계정이나 저장소를 만들어본 적이 없었거든요. 그래서 다시 한번 감사드립니다.
혹시 테마 제작 가이드에 이 내용을 포함하거나 링크를 걸 수 있을까요?
커스텀 설정도 제가 발견한 훌륭한 기능입니다. 테마 또는 컴포넌트의 GitHub 저장소에 settings.yml 파일을 추가해야 합니다. 커스터마이징할 수 있는 설정이 포함된 샘플 컴포넌트입니다:
아래는 변수 $header_text, $header_text_color 및 $header_bg를 설정하는 settings.yml 파일입니다.
header_text:
type: bool
default: false
description:
en: 'Select to add text in header next to logo.'
header_text_color:
type: string
default: "$header_primary"
description:
en: 'Text color (default is "header primary")'
header_bg:
type: string
default: "$header_background"
description:
en: 'Text color (default is "header background")'
이 설정을 사용하면 컴포넌트를 설치할 때 다음과 같은 설정 옵션을 사용할 수 있습니다:
이는 다음 CSS를 설정합니다.
@if $header_text == "true" {
.d-header .title::after {
padding: 0 20px;
font-size: 1.3em;
color: $header_text_color;
background-color:$header_bg;
content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after {
display:none;
}
}
같은 컴포넌트를 여러 번 설치할 수 있습니다(설치 후 이름을 변경하여 관리하는 것이 좋습니다). 이렇게 하면 다른 테마에 해당 컴포넌트를 추가하고 각 테마별로 다른 설정을 적용할 수 있습니다.
settings.yml 파일을 만드는 방법은 다음과 같습니다. 새 파일을 생성합니다:
코드를 입력합니다(텍스트 파일에 작성한 후 복사해서 붙여넣습니다):
"Commit new file"을 눌러 저장합니다.
그런 다음 사이트에서 컴포넌트를 설치하고 설정을 편집합니다.
