以下是过于详细的操作说明。如果效果不符合预期,请告诉我。
-
如果您还没有 GitHub 账户,请先创建一个。
-
在 Discourse 中导出您的主题:
管理后台 → 自定义 → 选择要导出的主题
这会将主题保存为 .zip 文件到您的计算机上。
-
在您的计算机上解压这些文件。
-
前往 GitHub 并创建一个新仓库:
-
点击“上传现有文件”
-
将您导出的主题中解压后的文件夹和文件(类似如下内容):
从您的计算机拖拽到您的仓库中,然后点击“提交更改”
- 现在您可以编辑 about.json 文件。点击文件名
该文件内容大致如下:
{
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-light": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
- 点击编辑铅笔图标。
现在您可以对其进行编辑。我建议您更改配色方案的名称;否则,当您把主题重新导入到您的站点时,会出现两个名称相同的配色方案。因此,下面我将 "blue-light": { 改为了 "blue-lite": {
只需在 love 之后将您的颜色变量覆盖添加到配色方案的末尾,并确保在 love 值后面加上逗号
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-lite": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100",
"primary-high": "333333",
"primary-medium": "666666",
"primary-low-mid": "999999",
"primary-low": "cccccc"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
-
点击“提交更改”
-
点击仓库名称返回主仓库页面
-
复制克隆或下载链接
-
在 Discourse 中导入您的主题:
管理后台 → 自定义 → 安装 → 来自 Git 仓库:粘贴链接并安装
-
现在您可以像编辑任何本地主题一样编辑此主题,使用您自定义的 $primary-high、$primary-medium、$primary-low-mid 和 $primary-low 值。