Создайте и поделитесь темой шрифта

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 "первый коммит"

Создайте аккаунт на 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 "добавлены дополнительные сведения"
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 лайк