创建并分享字体主题组件

Discourse 支持从远程仓库导入包含资源的主题。

这使得主题作者可以共享字体和图片。

创建一个包含字体的新 Git 仓库

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

about.json 中添加一个骨架配置文件:

{
  "name": "Roboto 主题组件",
  "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 上创建一个主题作为讨论你配色方案的场所

理想情况下,你应该在 #plugin:theme 类别中创建一个主题,并附上配色方案的截图。这个主题将作为你的 about_url

填写 about.json 文件中缺失的信息

  • 导航到 GitHub 上的 LICENSE 页面,将该 URL 填入 license_url

  • 使用 GitHub 项目 URL 或 Discourse 主题 URL 作为你的 about_url

流程结束时,你的 about.json 文件将类似于以下内容:

{
  "name": "Roboto 主题组件",
  "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 个赞