테마 및 테마 구성 요소를 사용하면 이미지와 폰트와 같은 업로드된 에셋을 처리할 수 있습니다. 사이트 설정인 theme authorized extensions(테마 허용 확장자)를 사용하여 테마가 허용하는 에셋을 제어할 수 있습니다.
테마 및 구성 요소에 에셋 포함하기
원격 테마의 경우
원격 테마에는 다음이 포함됩니다:
- Popular(인기) 테마 목록에서 설치한 테마 및 구성 요소
- From a git repository(Git 저장소에서) 방법을 사용하여 설치한 테마 및 구성 요소
원격 테마 또는 테마 구성 요소에 에셋을 업로드하는 방법에 대해서는 Create and share a font theme component 에서 자세한 예시를 확인하세요.
로컬 테마 및 구성 요소에 에셋 업로드하기
로컬 테마에는 다음이 포함됩니다:
- 모든 Discourse 인스턴스에 기본으로 포함된 Light(라이트) 및 Dark(다크) 테마
- + Create New(새로 만들기) 설치 방법을 사용하여 만든 테마 및 구성 요소
- From your device(기기에서) 설치 방법을 사용하여 로컬 컴퓨터에서 업로드한 테마 및 구성 요소
로컬 테마 또는 테마 구성 요소에 에셋을 업로드하려면 테마 또는 구성 요소로 이동하여 업로드(Uploads) 섹션에서 + Add(추가)를 선택하세요:
업로드 추가(Add Upload) 모달에서 파일을 선택하고 CSS, JavaScript 및/또는 Handlebars 커스터마이징과 함께 사용할 SCSS 변수 이름을 입력하세요.
업로드가 완료되면 에셋이 업로드 목록에 나타납니다:
중요한 참고 사항: Git 저장소에서 원격으로 설치된 구성 요소인 경우, 관리자 인터페이스를 통해 테마 및 구성 요소에 업로드를 추가하지 마세요. 구성 요소 업데이트 시 Git 저장소에 포함되지 않은 업로드가 모두 삭제됩니다.
에셋 활용 방법
SCSS
@font-face {
font-family: Amazing;
src: url($Comic-Sans) format("woff2");
}
body {
font-family: Amazing;
font-size: 15px;
}
.d-header {
background-image: url($texture);
}
:informationsource:
ttf또는otf폰트를 사용할 경우,opentype형식을 사용하도록 하세요.
JavaScript
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
console.log(settings.theme_uploads.balloons);
});
HTML
바닐라 HTML(커스터마이즈 관리자 패널의 헤더 또는 헤더 이후 섹션 등)에 테마 에셋을 직접 추가할 수 없습니다. Handlebars 템플릿 또는 플러그인 API를 사용해야 합니다(자세한 내용은 Developing Discourse Themes & Theme Components 참고).
하나의 우회 방법은 SCSS를 사용하여 에셋을 배경 이미지로 로드하는 것입니다(위 예시 참조). 따라서 테마의 헤더 섹션에 다음을 추가할 수 있습니다:
<div class="my-custom-div">
<a href="/"></a>
</div>
그리고 CSS에서 다음과 같이 설정합니다:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
테마 업로드를 설정으로 접근하기
JavaScript에서 theme_uploads를 설정(settings)으로 취급할 수도 있습니다(관련 커밋).
이를 통해 테마 및 구성 요소가 테마 에셋에 접근할 수 있습니다.
테마 JS 내부에서 다음을 사용하여 에셋의 URL을 가져올 수 있습니다:
settings.theme_uploads.name
추가 정보
이 문서는 버전 관리됩니다 - GitHub에서 변경 사항을 제안하세요.
