Создание и обмен компонентом темы шрифтов

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, вставьте этот URL как license_url

  • Используйте либо URL проекта на GitHub, либо URL темы на Discourse как about_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 лайк

Когда я следовал инструкциям, я получил ошибку: Ошибка: Неопределённая переменная: “$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. Кроме того, в разделе «Загрузки» или под заголовком «Загрузить» не отображаются какие-либо файлы.

Нужно ли обновлять эту инструкцию?

Заранее спасибо.

1 лайк