폰트 테마 컴포넌트 생성 및 공유

Discourse는 원격 저장소에서 자산을 포함하는 테마를 가져오는 것을 지원합니다.

이를 통해 테마 개발자는 폰트와 이미지를 공유할 수 있습니다.

폰트를 포함하여 새로운 git 저장소 생성

mkdir discourse-roboto-theme
cd discourse-roboto-theme
git init .
vim about.json

about.json에는 스켈레톤 설정 파일을 추가합니다.

{
  "name": "Roboto theme component",
  "about_url": "",
  "license_url": "",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

LICENSE 파일을 추가합니다. 저는 보통 MIT 라이선스를 사용합니다

vim LICENSE

폰트 다운로드

http://localfont.com/ 은 폰트를 얻는 데 유용한 사이트입니다.

mkdir assets
cp ~/Downloads/roboto.woff2 roboto.woff2

테마를 사용하는 CSS 추가

mkdir common
cd common

다음과 같은 common.scss 파일을 생성합니다.

@font-face {
  font-family: Roboto;
  src: url($roboto) format("woff2");
}

body {
  font-family: Roboto;
}

변경 사항을 GitHub에 푸시

모든 변경 사항을 커밋합니다:

git add LICENSE
git add about.json
git add assets/roboto.woff2
git add common/common.scss
git commit -am "first commit"

GitHub.com에서 계정을 생성한 후 새 저장소를 만듭니다.

(선택 사항) Discourse에서 색상에 대해 논의할 수 있는 주제 생성

이상적으로는 Customization > Theme 카테고리에 색상 스키마의 스크린샷과 함께 주제를 생성해야 합니다. 이 주소를 about_url로 사용합니다.

about.json 파일의 누락된 정보 입력

  • GitHub의 LICENSE 페이지로 이동하여 해당 URL을 license_url으로 입력합니다.

  • about_url로 GitHub 프로젝트 URL 또는 Discourse 주제 URL 중 하나를 사용합니다.

프로세스가 끝나면 about.json 파일은 다음과 같은 형태가 됩니다:

{
  "name": "Roboto theme component",
  "about_url": "https://github.com/SamSaffron/discourse-roboto-theme",
  "license_url": "https://github.com/SamSaffron/discourse-roboto-theme/blob/master/LICENSE",
  "assets": {
    "roboto": "assets/roboto.woff2"
  }
}

변경 사항을 커밋하고 GitHub에 푸시합니다.

git commit -am "added more details"
git push

폰트 컴포넌트 테스트

  • admin/customize/theme 화면에서 GitHub에서 테마를 가져옵니다.

:confetti_ball:

이제 폰트를 쉽게 공유할 수 있습니다!

참고:


이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안하십시오.

19개의 좋아요

Great tutorial.

Worked like a charm except it looks like localfont.com is down or no more.

I used this Google webfonts helper site to download a .woff2 version of the font I was after.

See also Install the Discourse Theme CLI console app to help you build themes

1개의 좋아요

단계에 따라 진행했을 때 Error: Undefined variable: “$fontname”. 오류가 발생했습니다.

그래서:
$variables에 변수를 선언했습니다:
fontname: "assets/fontname.woff2";

이 값을 채워 넣어야 하는 것 같은데, $variables에 어떤 경로를 사용해야 할까요?

Discourse가 파일을 업로드하도록 하면

"assets": {
        "fontname": "assets/fontname.woff2"
   }

이렇게 하면 파일이 assets/roboto.woff2 대신 다른 경로(/uploads/db0202/original/1X/...)에 업로드되는 것 같습니다.

수정:
$variables는 필요 없었습니다. 마법은 업로드 과정에서 일어나는 것이었습니다. 그런데 assets에 assets/font.svg#regular가 있었고, 해시 태그(#)가 문제를 일으켰습니다.

2개의 좋아요

저도 동일한 Error: Undefined variable 오류가 발생하고 있습니다. 또한 업로드 폴더에 자원이 표시되지 않고, 'upload’라는 제목도 없습니다.

이 튜토리얼이 업데이트가 필요한가요?

미리 감사합니다.

1개의 좋아요