# Canvas 主题模板 **URL:** https://meta.discourse.org/t/canvas-theme-template/352730 **Category:** Theme **Created:** [2025年二月17日 16:13 UTC](https://meta.discourse.org/t/canvas-theme-template/352730 "2025-02-17T16:13:06Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel) #### Post date: [2025年二月17日 16:13 UTC](https://meta.discourse.org/t/canvas-theme-template/352730/1 "2025-02-17T16:13:06Z")
![Cover image showing screenshots of three themes built with the Canvas theme template](https://global.discourse-cdn.com/meta/original/4X/4/5/b/45b08ea29f653c6ce281ff679f13252b6283206b.jpeg) | | | | |:information\_source: | **摘要** | 使用预先准备好的主题模板快速启动您的主题设计。| |:busts\_in\_silhouette: | **受众** | 希望开始为 Discourse 构建主题的新开发者。希望使用现成模板的经验丰富的开发者。| |:hammer\_and\_wrench: | **代码仓库** | [https://gitlab.com/manuelkostka/discourse/canvas/theme|](https://gitlab.com/manuelkostka/discourse/canvas/theme%7C) |:eyes: | **预览** | [Canvas 主题](https://canvas.kostka.studio) | Canvas 提供了一个灵活的模板，让您只需较少代码即可创建自定义主题。轻松调整属性和配置值，以根据您的需求定制主题。 ## 示例视图 * * * 基础模板保留默认值，并在设计上保持中立。 ![Canvas Theme Template - Light scheme](https://global.discourse-cdn.com/meta/original/4X/2/6/0/26027cf293679e15da6ec661cf124c7dd6896d35.png) ![Canvas Theme Template - Dark scheme](https://global.discourse-cdn.com/meta/original/4X/5/a/6/5a6a05457d110b529b019877f8f964726a446f4c.png) 仅修改少数自定义属性并定义高亮颜色的最小调整： ![Canvas Minimal theme - Light scheme](https://global.discourse-cdn.com/meta/original/4X/c/3/b/c3b676d3eb4f9f1f3c6b5c2018c9159549c3d63e.png) ![Canvas Minimal theme - Dark scheme](https://global.discourse-cdn.com/meta/original/4X/a/6/5/a651a4c0f11a67391cb49275d952544a2ffd5927.png) 集成“主题卡片”组件和横幅自定义样式的设计： ![Canvas Screen theme - Light scheme](https://global.discourse-cdn.com/meta/original/4X/6/1/c/61cc16196057e02c053fcf8a2897aaee166587be.jpeg) ![Canvas Screen theme - Dark scheme](https://global.discourse-cdn.com/meta/original/4X/6/b/9/6b9e3e36a1bd97e98446ed20b6a4d0fb317dacc7.jpeg) 包含自定义字体和独特配色方案的精美主题： ![Canvas Editor theme - Light scheme](https://global.discourse-cdn.com/meta/original/4X/1/9/d/19d355d9ed4831c351db4c4b48ccfab0a7950683.png) ![Canvas Editor theme - Dark scheme](https://global.discourse-cdn.com/meta/original/4X/e/c/3/ec36d01c88f52eafbd3d1a861e847413f6ac758d.png) 对旧版 Central 主题的演绎： ![image](https://global.discourse-cdn.com/meta/original/4X/a/9/7/a979ba2864b7daa46a8a937aa7494c86ca6fcd43.jpeg) ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/f/d7ffa446bb66c6f7155381ad9bfb7b4c18805929.jpeg) ## 用法 * * * 1. [克隆主题模板](https://gitlab.com/manuelkostka/discourse/canvas/theme)。 2. 使用 [discourse\_theme gem](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950) 将主题与您的 Discourse 实例同步。 3. 进入管理员后台，手动调整以下主题组件设置： **分类横幅 (Category Banners)** 插件出口 → _above-main-container_ **标签横幅 (Tag Banners)** 在站点标题下方显示 → _取消勾选_ 在主容器上方显示 → _勾选_ 4. 编辑 `scss/properties.scss` 以定义自定义属性的值 5. 编辑 `about.json` 以添加资产、配色方案和更多主题组件 ## 深入了解设置 * * * _Canvas 主题_ 模板仅通过捆绑一些主题组件并添加一些现成的样式文件来扩展默认的主题骨架。实际功能由一个单独的主题组件 _Canvas Settings_ 处理。此组件有两个功能： - 它分配可与模板一起使用的自定义属性。所有属性的列表可以在模板的 [Readme 文件](https://gitlab.com/manuelkostka/discourse/canvas/theme/-/blob/main/README.md) 中找到。 - 它声明默认样式，以及可以在主题组件设置中调整的一些可选样式。 这种分离的设置允许您使用 Canvas 模板创建主题，同时仍能受益于组件提供的持续修复和更新。 ## 示例主题 * * * 您可以在 [https://canvas.kostka.studio](https://canvas.kostka.studio) 预览共享的示例主题。侧边栏底部有一个主题切换器用于更改主题。 请查看共享示例视图的代码，或从以下代码仓库安装它们作为您的入门主题： - [Minimal 主题示例](https://gitlab.com/manuelkostka/discourse/canvas/theme-minimal) - [Screen 主题示例](https://gitlab.com/manuelkostka/discourse/canvas/theme-screen) - [Editor 主题示例](https://gitlab.com/manuelkostka/discourse/canvas/theme-editor) - [Central 主题示例](https://gitlab.com/manuelkostka/discourse/canvas/theme-central) * * * > 🎉 非常感谢 Discourse 赞助本项目开发！ --- _[View the full topic](https://meta.discourse.org/t/canvas-theme-template/352730)._