将带有子类别的框转换为项目符号列表

:warning: 编辑:截至 2023 年 11 月 9 日:除方形项目符号外的类别样式将在不久的将来停用/不可用。


我稍后回复,但迟做总比不做好…… :slight_smile:

要将它们堆叠在一起:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

至于项目符号列表,它将取决于您为类别使用的样式。假设您使用的是“bullet”:
image

它看起来会像这样:

如果您想保留父类别彩色项目符号但子类别不保留:

使用实际的项目符号字符:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        &:before {
            content: "•";
            margin-right: .25em;
            font-size: 1.5em;
            line-height: 0;
        }
        .badge-category-bg {
            display: none;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

更简单的方法是重塑当前的 Discourse 类别项目符号:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .badge-category-bg {
            border-radius: 50%;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

2 个赞