模板:内容盒子
来自BinWiki
描述
此模板用于创建一个带有可选标题和自定义样式的通用内容盒子/信息框，具有清新现代的视觉风格。 它可以方便地统一wiki中各类信息展示模块的视觉风格，例如“你知道吗”、“热门页面”、公告栏等。
用法
基本用法
{{内容盒子
|title = 这是一个标题
|content = 这是一些内容。
}}
完整参数
{{内容盒子
|title = 标题文字
|content = 主要内容区域
|borderRadius = 边框圆角 (例如 12px, 0px)
|borderColor = 边框颜色 (例如 #e0e0e0, red)
|cardBgColor = 卡片整体背景色 (例如 #ffffff, transparent)
|boxShadow = （模板内置，不可直接配置，可通过borderColor调整细微效果或用CSS覆盖）
|titlePadding = 标题内边距 (例如 12px 18px)
|titleAlign = 标题对齐方式 (left, center, right)
|titleFontWeight = 标题字重 (例如 600, bold, normal)
|titleFontSize = 标题字体大小 (例如 1.1em, 16px)
|titleBgColor = 标题背景色 (例如 #f7f9fc)
|titleColor = 标题文字颜色 (例如 #2d3748, white)
|contentPadding = 内容区域内边距 (例如 15px 18px)
|contentLineHeight = 内容区域行高 (例如 1.7, 2.0)
|contentColor = 内容文字颜色 (例如 #4a5568)
|contentBgColor = 内容区域背景色 (例如 #ffffff)
}}
参数详解
| 参数名 | 描述 | 是否可选 | 默认值 |
|---|---|---|---|
| title | 盒子的标题文字。如果留空或不提供此参数，则不显示标题栏。 | 可选 | (无) |
| content | 盒子的主要内容。可以包含任何Wikitext，包括文本、列表、图片、甚至其他模板。 | 必填 (逻辑上) | ' |
| borderRadius | 盒子的CSS `border-radius` 属性，用于设置边框圆角。 | 可选 | `12px` |
| borderColor | 盒子的CSS `border` 属性中的颜色部分，同时也会影响标题与内容之间的分隔线颜色。 | 可选 | `#e0e0e0` |
| cardBgColor | 卡片整体的CSS `background-color` 属性（应用于最外层`div`）。 | 可选 | `#fff` |
| titlePadding | 标题栏的CSS `padding` 属性。 | 可选 | `12px 18px` |
| titleAlign | 标题栏文字的CSS `text-align` 属性。 | 可选 | `left` |
| titleFontWeight | 标题栏文字的CSS `font-weight` 属性。 | 可选 | `600` |
| titleFontSize | 标题栏文字的CSS `font-size` 属性。 | 可选 | `1.1em` |
| titleBgColor | 标题栏的CSS `background-color` 属性。 | 可选 | `#f7f9fc` (非常浅的蓝灰色) |
| titleColor | 标题栏文字的CSS `color` 属性。 | 可选 | `#2d3748` (深灰色) |
| contentPadding | 内容区域的CSS `padding` 属性。 | 可选 | `15px 18px` |
| contentLineHeight | 内容区域文字的CSS `line-height` 属性。 | 可选 | `1.7` |
| contentColor | 内容区域文字的CSS `color` 属性。 | 可选 | `#4a5568` (中灰色) |
| contentBgColor | 内容区域单元格的CSS `background-color` 属性。 | 可选 | `#fff` |
示例
示例1: 带标题的基本盒子 (新默认样式)
{{内容盒子
|title = 温馨提示
|content = 请遵守社区规范，友好交流。新的默认样式更加美观。
}}
渲染效果:
(以上为模拟新默认值的渲染，实际使用时无需填写这些参数即可达到此效果)
示例2: 无标题的盒子 (新默认样式)
{{内容盒子
|content = 这是一段没有标题的重要信息，它仍然享有圆角和阴影。
}}
渲染效果:
(以上为模拟新默认值的渲染，实际使用时无需填写这些参数即可达到此效果)
示例3: 自定义主要颜色 (例如警告框)
{{内容盒子
|title = 特别警告
|content = 请注意，此操作不可逆！
|cardBgColor = #fff3cd <!-- 淡黄色背景 -->
|borderColor = #ffeeba <!-- 黄色边框 -->
|titleBgColor = #ffeeba <!-- 标题背景与边框同色系 -->
|titleColor = #856404 <!-- 深黄色文字 -->
|contentColor = #856404 <!-- 内容文字也用深黄色 -->
|borderRadius = 8px
}}
渲染效果:
示例4: 内容为列表 (自定义标题背景)
{{内容盒子
|title = Wiki小知识
|content =
* Wiki支持富文本编辑。
* 你可以创建自己的用户页面。
* 模板可以极大地简化重复内容的编写。
|titleBgColor = #4A90E2 <!-- 鲜明蓝色 -->
|titleColor = white
}}
渲染效果:
示例5: 更多自定义与主题化 (例如深色标题栏)
{{内容盒子
|title = 深邃思考
|content = 这里的内容将配合深色标题栏展示。我们还可以居中标题并改变字体大小。
|cardBgColor = #f0f2f5 <!-- 浅灰色卡片背景 -->
|borderColor = #adb5bd <!-- 稍深一点的灰色边框 -->
|titleBgColor = #343a40 <!-- 深灰标题背景 -->
|titleColor = #f8f9fa <!-- 浅灰标题文字 -->
|titleAlign = center
|titleFontSize = 1.3em
|contentColor = #212529 <!-- 深色内容文字 -->
|contentBgColor = #f0f2f5 <!-- 内容区域背景与卡片背景一致 -->
}}
渲染效果:
注意事项
- 内容参数 (`content`) 可以包含复杂的Wikitext，包括列表、表格、图片甚至其他模板的调用。
- 如果不需要标题，请 不要传入 `title` 参数，或者将其值设为空。
- 为了保持Wiki整体风格的一致性，建议在大多数情况下使用新的默认样式，仅在确实需要突出显示或实现特定主题（如警告、提示）时进行深度自定义。
- 如果希望内容区域的背景色与卡片整体背景色（`cardBgColor`）一致，可以将 `contentBgColor` 设置为 `transparent` 或与 `cardBgColor` 相同的值。默认情况下，内容区域背景（`contentBgColor`）和卡片背景（`cardBgColor`）均为 `#fff`。
