에어 테마

[Discourse]

	요약	Air Theme는 포럼을 향상시키기 위해 몇 가지 테마 구성 요소가 포함된 깔끔하고 현대적인 테마입니다!
	미리보기	Discourse Theme Creator에서 미리보기
	레포지토리 링크	https://github.com/discourse/discourse-air
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가 가이드

이 테마 설치하기

기능

라이트 모드

다크 모드

카테고리 페이지

이 테마에는 포럼을 향상시키기 위한 몇 가지 구성 요소도 포함되어 있습니다.

• 클릭 가능한 주제
• 현대적인 카테고리 + 그룹 박스

이 테마가 올바르게 렌더링되려면 활성화해야 하는 몇 가지 설정이 있으므로 설치 시 아래 팁을 꼭 읽어보시기 바랍니다.

---

팁

다크/라이트 스키마 토글

이 기능이 올바르게 작동하려면 https://discourse.jordanvidrine.com/admin/customize/colors 영역에서 최소 2가지 색상 스키마 옵션이 활성화되어 있어야 합니다. 최소 두 가지 색상에 대해 사용자가 선택할 수 있는 색상 스키마가 활성화되어 있어야 합니다.

이 설정을 완료하면 사용자는 사용자 설정 인터페이스 메뉴에서 라이트 및 다크 환경 설정으로 두 가지 색상 스키마 중 하나를 선택할 수 있습니다.

---

환영 배너

관리자 > 환영 배너(/admin/config/welcome-banner) 페이지로 이동합니다.

• 테마에서 활성화… 드롭다운에서 Air Theme를 선택합니다.
• 위치 드롭다운에서 사이트 헤더 아래를 선택합니다.

---

현대적인 카테고리 + 그룹 박스

이 테마 구성 요소는 /admin/site_settings/category/all_results?filter=categories 영역에서 카테고리가 하위 카테고리를 가진 카테고리 박스 설정을 사용하도록 요구합니다.

이 테마 구성 요소는 포럼 관리자가 헤더 제목을 사용하여 카테고리 페이지를 조직하고 각 헤더 아래에 어떤 카테고리가 표시될지 선택할 수 있도록 합니다. 단순성을 유지하기 위해 최대 5개의 제목만 사용하도록 허용했습니다. 카테고리 + 헤더 설정이 선택되지 않으면 모든 카테고리가 위에서와 같이 렌더링되며, 이는 기본 렌더링 옵션입니다.

우리가 호스팅하고 있나요? Standard, Business, Enterprise 플랜에서 테마를 사용할 수 있습니다.

[Don]

조던, 정말 놀라워! 너무 좋아!

[th21]

로케일 필드를 비워 두면 환영 메시지를 숨길 수 있으면 도움이 될 것입니다

[oshyan (Oshyan Greene)]

오, 정말 멋지네요! 공유해 주셔서 감사합니다.

[itsbhanusharma (Bhanu Sharma)]

이 테마는 discourse에 걸맞은 현대적인 느낌을 줍니다. @jordan.vidrine, 정말 잘 만들었네요.

[Ahmed_Gagan]

테마가 정말 멋지네요. 정말 잘 만드셨어요

[thegurjyot (Gurjyot Singh)]

이 테마가 정말 멋있네요. 카테고리 페이지 디자인도 별도 컴포넌트로 제공되면 좋겠어요. 이렇게 하면 훨씬 더 좋아 보입니다.

[frold]

고맙습니다, 정말 좋습니다…

새 테마를 설치하는 건 처음입니다. 이 테마가 정말 마음에 듭니다!!

Studmed.dk

[Jeremie_Leroy]

@jordan-vidrine 조회수(# of views) 열 관련해서, 해당 열이 숨겨지는 것을 오버라이드하려면 컴포넌트에 어떤 코드를 추가해야 하나요?

[jordan.vidrine]

이렇게 하면 작동할 것 같습니다:

.full-width .contents .topic-list thead th.posts {
width: 10%;
}

.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}

th.num.views {
width: 10%;
order: 3;
display: block;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}

.topic-list .views {
width: 10%;
order: 3;
}

.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}

[ggurbet (Gökhan Gurbetoğlu)]

상쾌하게 아름답네요. 조던 비드린(@jordan.vidrine)님, 정말 잘하셨어요!

[ShubhayanS (shubhayan saha)]

포럼 헤더 텍스트인 "Welcome to the forum"을 변경할 수 있는 방법이 있을까요?

[jordan.vidrine]

네, Discourse Search Banner 컴포넌트에서 편집할 수 있습니다

[Jerdeman (Jeroen)]

얼마 전 모바일 뷰에서 카테고리가 보이지 않는 문제에 대해 이슈를 등록한 적이 있습니다(Air Theme - #172). @jordan.vidrine 님과 조금 메시지를 주고받았지만, 문제의 근본 원인을 찾지 못했습니다. 다른 분들의 아이디어가 있으면 좋겠습니다.

세부 정보
Bitnami의 헬름 차트를 사용하여 kubernetes에서 Discourse 2.7.11을 깨끗하게 설치하고, 첫 번째 게시물에 언급된 대로 테마의 최신 버전을 설치 및 구성했는데, 모바일 뷰에서 카테고리가 전혀 보이지 않으며 최신 페이지의 스타일링이 어긋나 있습니다.

시도해 본 내용
깨끗한 설치 외에도 테마의 일부 이전 버전도 사용해보았습니다. 그러나 문제는 여전했으며, 모든 버전을 포괄적으로 테스트해 보지는 않았습니다.
또한 우리 인스턴스의 HTML을 discourse.jordanvidrine.com 의 HTML과 비교해 보았는데, 상당한 차이가 있음을 확인했습니다.

직관적인 판단
‘beta’ 버전을 사용할 수 없기 때문에, 제 직관은 이것이 테마나 그 플러그인 중 하나와 Discourse 2.7 사이의 호환성 문제라고 말해 줍니다. 이 테마가 2.7에서 정상적으로 작동하는지, 그리고 그렇다면 테마와 관련 플러그인의 어떤 버전인지 알고 싶습니다.

질문
이 테마를 2.7에서 정상적으로 작동시킨 경험이 있는 분이 계시나요? 혹은 이 문제를 해결하기 위해 우리가 할 수 있는 것에 대한 단서가 있을까요?

[Hyeonji_Kim]

안녕하세요. 먼저 이 멋진 테마를 만들어주셔서 감사합니다

font-family를 변경하고 싶은데 어떻게 해야 할까요?

아래처럼 시도해 보았습니다

• 이 테마를 다운로드하고 Google Fonts 사이트 설정(SITE SETTING)에서 폰트 설정을 변경해 보았지만 작동하지 않았습니다.

• Desktop.css, mobile.css에 @import{웹 폰트 링크 ~~~ } 코드를 추가해 보았지만 작동하지 않았습니다.

폰트를 변경하려면 어떤 파일을 수정해야 하는 걸까요???

[jordan.vidrine]

여기에서 컴포넌트 없이 사용자 지정 폰트를 설정할 수 있다고 생각합니다: admin/site_settings/category/all_results?filter=font

더 많은 커스터마이징을 원하신다면, 링크하신 Google Fonts 테마 컴포넌트가 작동할 것 같습니다. 다만, 해당 테마는 사이트 설정이 아니라 theme-settings를 사용한다고 생각합니다.

해당 폰트 컴포넌트에 대한 주제에서 이 문제를 제기해 보셨나요?

[hequaye (Henry Herbert)]

여러분 안녕하세요, 모바일에서 배경색의 크기와 "고정된 특성"을 변경하는 방법에 대해 도와주실 수 있나요?

제 환경에서는 모바일용 CSS가 투명하게 설정되어 있습니다. 배경색을 위한 고정된 배경을 변경하는 방법에 대해 조금만 안내해 주시면 감사하겠습니다.

제가 잘못 알고 있는 게 아니라면 헤더 배경과 페이지 배경이 따로 있는 거죠?

[jordan.vidrine]

이는 테마와 해당 테마에 포함된 컴포넌트가 사이트 설정 방식에 대해 다소 까다롭기 때문입니다.

OP에서 제가 공유한 내용은 다음과 같습니다:

@jordan-vidrine

최신 카테고리 + 그룹 박스

이 테마 컴포넌트는 /admin/site_settings/category/all_results?filter=categories 영역에서 카테고리가 하위 카테고리가 있는 카테고리 박스(CATEGORY BOXES WITH SUBCATEGORIES) 설정을 사용하도록 요구합니다.

이 테마 컴포넌트는 포럼 관리자가 헤더 제목을 사용하여 카테고리 페이지를 정리하고, 각 헤더 아래에 어떤 카테고리가 표시될지 선택할 수 있도록 합니다. 단순함을 유지하기 위해 최대 5개의 헤딩만 사용할 수 있도록 했습니다. 카테고리 + 헤딩 설정이 선택되지 않으면, 위와 같이 모든 카테고리가 렌더링되며, 이것이 기본 렌더링 옵션입니다.

[Nerd_Alert]

배경을 이미지로 설정하는 방법이 있을까요? 색상보다는 이미지를 선호합니다.

body {
    background-image: url("image url here");
    background-color: #cccccc;
}

을 사용하면 색상 영역의 상단만 이미지가 되고, 하단은 그렇지 않아요.

[jordan.vidrine]

이미지를 추가하는 것 자체는 괜찮지만, 해당 오버레이 효과를 위해 생성된 클리핑 패스도 제거해야 합니다.

html .background-container {
clip-path: unset;
}