在 SCSS 中访问类别颜色

支持
1

你好，

这是我第一次尝试创建自定义主题，还请多多包涵。

我试图自定义分类列表页面，使其看起来像这样：

image
image614×319 40.7 KB

想法是移除左侧边框并添加“药丸”样式。
添加“药丸”样式的 SCSS 非常简单：

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

但我无法访问此处可用的分类颜色：discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

是否有简单的方法可以从 CSS 中访问该颜色？

2

目前还没有简单的方法来实现这一点。

我们可以将这些颜色移动到 CSS 自定义属性中，而不是内联设置它们，这样在任何 CSS/SCSS 中都可以轻松访问这些颜色。我不确定我们何时能着手处理这个问题，但我会将其列入待办事项清单。

3

那太棒了 :slight_smile:
顺便问一下，还有其他方式可以实现我想要的视图吗？
我读到可以为 Discourse 的特定部分覆盖模板，我需要覆盖哪个模板文件，以及如何在自定义主题中完成这一操作？

4

我目前的解决方法是覆盖 components/parent-category-row 模板。
我像这样添加了一个额外的 div 元素：

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

我希望避免覆盖模板，因为它们将来可能会发生变化。

@awesomerobot 如果能有一种内置方式来访问类别颜色那就太好了 :slight_smile:

5

@tjot,

可以通过 ::after 伪元素的边框来实现您想要的效果的 CSS 技巧。

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        
        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }        
    }
}

image
image1080×738 130 KB

请注意，我已将样式直接应用于标题的 h3 元素，因为它是在应用了内联样式的 td 的直接子元素。因此，如果模板将来移除它，您将不得不调整您的 CSS。

但是，您可以跳过覆盖 components/parent-category-row，正如您想要的。