本指南介绍如何自定义 Discourse 中的子类别框的外观，包括调整精选主题的样式、修改“框”样式以及管理类别描述截断。
所需用户级别：管理员
在 Discourse 中，可以自定义子类别框以增强论坛的视觉吸引力和组织性。本指南将引导您完成子类别框的各种自定义选项，包括精选主题的样式、“框”样式以及类别描述截断。
使用精选主题自定义框
要为带有精选主题的子类别框创建醒目、多彩的外观，您可以使用自定义 CSS。此方法会移除徽标并为每个子类别应用不同的背景颜色。
以下是如何使您的子类别框看起来像这样：
- 转到您的站点管理面板
- 导航到“自定义”>“主题”
- 创建新主题或编辑现有主题
- 将以下 CSS 添加到您的主题：
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
调整 CSS 选择器和颜色以匹配您的特定类别名称和所需的配色方案。
自定义“框”样式
如果您使用的是子类别的“框”样式，您可以进行类似的自定义：
在您的主题 CSS 中，添加以下代码：
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > h3 {
color: white;
}
}
}
再次，修改选择器和颜色以适应您的论坛结构和设计偏好。
管理类别描述截断
默认情况下，Discourse 会将类别描述截断为类别框中的 4 行。您可以使用自定义 CSS 进行调整：
要将描述缩短为两行，请将此 CSS 添加到您的主题：
.category-boxes .description .overflow {
max-height: 3em;
}
调整 max-height 值以获得所需的可见行数。
移动设备注意事项
在桌面设备上使用“带子类别的框”样式时，请注意，主题在移动设备上可能仍然可见。此行为可能是 Discourse 设计中的有意为之，以保持在小屏幕上的可读性。
如果您需要调整移动设备布局，您可能需要为移动设备视图添加特定的 CSS，或者咨询 Discourse 主题开发人员以获得更量身定制的解决方案。