类别的独特配色方案

开发
1

您好。

我正在将一个旧论坛迁移到 Discourse，原始站点有一个独特的类别主题（包括独特的标题徽标）。

我目前的解决方案是一个主题组件，看起来像这样：

CSS：

body.category-target-category{
///将 #hexcodes 替换为您选择的颜色值
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///继续为任何/所有必需的颜色值进行设置
}

HTML/JS：

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

目前，我必须遍历 color_definitions.scss 中提到的所有可能的颜色值才能覆盖它们。我相信该文件的值是从 foundation/colors.scss 中找到的值生成的，然后通过 foundation/color_transformations.scss 生成的。我知道可以通过管理员菜单或主题组件的 about.json 来覆盖根颜色主题值，但我认为这些更改是全局生效的。

除了列出 color_definitions.scss 中的所有 100 多个变量之外，是否有更有效的方法来自定义特定类别？例如，是否可以通过主题组件修改 foundation/colors.scss 文件？

感谢您的帮助！

1 个赞
2

您好 @Rhababo :wave: 欢迎来到 Meta :slight_smile:

如果您之前没有接触过 Discourse 主题和开发，我建议您先从这里的资源开始：

另外，例如，您可以使用类似这样的 CSS 代码来更改特定类别的徽标、标题颜色甚至图标颜色：

.category- <category-slug> > .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category- <category-slug> > .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category- <category-slug> > .d-header #site-logo.logo-big {
	content:url($big-logo);
}

如果您只是创建一个新主题，您可以添加代码并将徽标作为资产上传。 <category-slug> 是浏览器 URL 字段中出现的类别名称的小写形式（使用“ - ”连字符分隔父类别和子类别，例如 parentcategory-subcategory。

您还可以搜索各种 Theme component，例如这个：

3 个赞
3

感谢 Lilly 提供的帮助和资源！

我非常欣赏您关于 Logo 的 CSS 说明。比我笨拙的脚本要优雅得多。

您的解决方案绝对能满足我的用例。尽管选择每个元素并直接为其编码颜色似乎很繁琐。我想知道是否有办法利用 Discourse 用来从 colors.scss 中仅有的 12 种左右的基础颜色生成其调色板的机制。我认为这样做可能需要一个插件而不是一个主题组件，而这是一个留待以后解决的挑战。

谢谢！

2 个赞