本指南介绍如何自定义 Discourse 中子分类框的外观，包括调整精选主题样式、修改“方框”样式以及管理分类描述的截断。
所需用户等级：管理员
Discourse 中的 子分类框 可以进行自定义，以增强论坛的视觉吸引力和组织性。本指南将引导您了解各种子分类框自定义选项，包括精选主题样式、“方框”样式以及分类描述截断。
使用精选主题自定义方框
若要为带有精选主题的子分类框打造大胆、多彩的视觉效果，您可以使用自定义 CSS。此方法会移除徽标，并为每个子分类应用不同的背景色。
以下是让您的子分类框呈现如下效果的方法：
- 进入您网站的后台管理面板
- 导航至 自定义 > 主题
- 创建新主题或编辑现有主题
- 向您的主题添加以下 CSS：
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
根据需要调整 CSS 选择器和颜色，以匹配您的具体分类名称和期望的配色方案。
自定义“方框”样式
如果您正在使用子分类的“方框”样式，也可以类似地进行自定义：
在您的主题 CSS 中添加以下代码：
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
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 {
-webkit-line-clamp: 2;
}
调整 -webkit-line-clamp 的值以实现您期望的可见行数。
移动设备注意事项
在桌面端使用“带子分类的方框”样式时，请注意主题在移动设备上可能仍然可见。这种行为可能是 Discourse 设计中的有意为之，以保持在小屏幕上的可读性。
如果您需要调整移动布局，可能需要为移动视图添加特定的 CSS，或咨询 Discourse 主题开发者以获取更定制的解决方案。