manuel
(Manuel Kostka)
1
|
|
 |
摘要 |
 |
受众 |
 |
代码库 |
 |
安装指南 |
 |
刚接触 Discourse 主题？ |
Canvas 提供了一个灵活的模板，让您能够用更少的代码创建自定义主题。轻松调整属性和配置值，以满足您的需求定制主题。
示例视图
基础模板保留默认值，设计保持中立。
最小的调整，修改了一些自定义属性并定义了一个高亮颜色：
集成了“主题卡片”组件和横幅自定义样式的设计：
一个包含自定义字体和独特配色方案的复杂主题：
用法
-
克隆主题模板。
-
使用 discourse_theme gem 将主题与您的 Discourse 实例同步。
-
转到管理员后端并手动调整这些主题组件设置：
分类横幅
插件出口 → above-main-container
标签横幅
显示在站点标题下方 → 取消勾选
显示在主容器上方 → 勾选
-
编辑 scss/properties.scss 来定义自定义属性的值
-
编辑 about.json 来添加资源、配色方案和更多主题组件
详细设置
Canvas 主题模板仅通过捆绑一些主题组件和添加一些现成的样式文件来扩展默认主题骨架。实际功能由单独的主题组件 Canvas Settings 处理。此组件有两个功能：
这种分离的设置允许您使用 Canvas 模板创建主题，同时仍然受益于通过该组件提供的持续修复和更新。
示例主题
您可以查看共享示例视图的代码，或从以下存储库将它们安装为您的入门主题：
非常感谢 Discourse 赞助了该项目的开发！
24 个赞
jrgong
(jrgong)
2
当我尝试安装示例主题时，这些主题设置没有显示出来。这是预期的行为吗？
1 个赞
manuel
(Manuel Kostka)
3
这些设置位于安装为画布设置的主题组件上。也许有点误导的是，在界面上，设置总是被命名为主题设置，即使是在主题组件上也是如此。
2 个赞
pmusaraj
(Penar Musaraj)
5
非常感谢您对此进行处理，@manuel。
我在本地试用了编辑器版本，它大部分运行得非常好，但我注意到了一些小问题。
在默认安装下，不更改任何设置，Extra Banners 组件中的标签会显示在错误的位置：
分类横幅也显示在相同的位置，位于侧边栏上方。最新主题和热门主题在主列中显示正确。
我猜主题的目标不是完全覆盖管理界面，但是，浅色和深色的编辑器调色板使管理侧边栏看起来大不相同。我想知道是否有可能与非管理侧边栏保持一致。
5 个赞
manuel
(Manuel Kostka)
6
主题旨在利用 above-main-container outlet 在侧边栏旁边显示横幅。Extra-Banners 组件默认使用该 outlet，但分类和标签横幅的两个组件默认渲染在页眉下方。我不想为了设置不同的默认 outlet 而 fork 这些组件。这就是我添加这些说明的原因：
但如果这很容易被忽略，也许有更好的说法？
是的，这足够简单，而且似乎是这个主题的一个好方法。我刚刚添加了一个提交！
5 个赞
pmusaraj
(Penar Musaraj)
7
啊，是的，我明白我们是如何走到这一步的。我们不一定想要更改类别/标签横幅组件中的默认值，也不想分支它们。修复起来有点麻烦，暂时就这样吧，看看其他人是否也遇到相同的问题。
管理员侧边栏的更改看起来已经不错了，感谢！
4 个赞
mk0r
8
这些说明可以详细说明一下吗？是否无法直接从管理员界面安装？谢谢 
编辑：我通过管理员界面安装了，似乎可以工作，只是现在似乎没有地方可以编辑 scss 了。
编辑：不用了，我明白了，这可能是预料之中的，您是想直接编辑主题文件。我想知道这是否可能在路线图上通过管理员界面来实现？比如，有一个变量编辑器，就像你有一个设置编辑器一样。
3 个赞
manuel
(Manuel Kostka)
9
我不知道核心路线图上有什么，但你现在可以做的一件事是在管理员界面上创建一个新的主题组件：
然后，在它的 CSS 文件中声明自定义属性。你可以查找 Readme 文件 中的属性。或者从主题仓库复制 properties.scss 的内容。
2 个赞
manuel
(Manuel Kostka)
11
您可以通过用户界面导入：
但是，如果您想同步更改，我认为您需要先拉取到本地克隆，然后再从中推送。类似这样：
- 从 GitLab 克隆
git clone "https://gitlab.com/manuelkostka/discourse/canvas/theme.git"
- 将推送 URL 设置为您的 GitHub 存储库
git remote set-url --push origin "git@github.com:Username/Reponame.git"
- 然后您可以定期从 GitLab 获取并推送到 GitHub
git fetch -p origin
git push origin
2 个赞
Heliosurge
(Dan DeMontmorency)
12
我在 GitHub 移动版上看不到加号。可能需要在家时尝试命令行。
在 GitHub 的仪表板上，我只看到创建新存储库的选项，但没有认领选项。我使用的是免费帐户，不确定这是否可能与之有关。
manuel
(Manuel Kostka)
13
我添加了一个组件，允许你在组件界面上定义一些样式变量和布局选项：
与在样式表中声明自定义变量相比，它有限制。但它允许你尝试几种不同的外观。我很想听听这是否有效！
2 个赞
Aurora
(Aurora)
14
我正在玩它，我觉得很棒！有没有办法减小菜单的行距——让它更紧凑？
另外，我无法滚动固定侧边栏，这是故意的吗？
2 个赞
manuel
(Manuel Kostka)
16
我已经调整了固定侧边栏的 CSS 样式，滚动应该可以再次使用了！
不过，固定侧边栏只是我在上面帖子中提到的样式组件的其中一个选项。如果你想调整更多样式（例如调整侧边栏菜单的间距），你需要遵循上面在 用法 和 仔细查看设置 中解释的方法：使用你自己的 CSS 自定义属性样式表——在这种情况下，它将是 -d-sidebar-row-height。
3 个赞
manuel
(Manuel Kostka)
17
我基于这个模板创建了一个新的示例主题。正如其名，这个主题是对原始 Central 主题的致敬！ 
我喜欢 Central 的布局和视觉风格，并将它的一些功能打包成了独立的组件，例如 自定义用户菜单 和几个侧边栏模块。
我意识到，有了侧边栏和一些样式，这个模板实际上已经能让你在很大程度上接近原始主题的外观和感觉了。
无论如何，我并不打算完全重建 Central 主题……但未来我可能会尝试一个专门的主题列表样式。如果你有兴趣并且想看看，主题也在这里上线：https://central.kostka.studio
8 个赞
kevin001
(kevin001)
19
感谢您分享此模板！组件的灵活性和简洁的设计使其非常容易定制。期待在我自己的实例上试用。
2 个赞
！