查看“︁模板:内容盒子/doc”︁的源代码

== 描述 ==
此模板用于创建一个带有可选标题和自定义样式的通用内容盒子/信息框，具有清新现代的视觉风格。
它可以方便地统一wiki中各类信息展示模块的视觉风格，例如“你知道吗”、“热门页面”、公告栏等。

== 用法 ==
=== 基本用法 ===
<pre>
{{内容盒子
|title = 这是一个标题
|content = 这是一些内容。
}}
</pre>

=== 完整参数 ===
<pre>
{{内容盒子
|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)
}}
</pre>

== 参数详解 ==
{| class="wikitable sortable"
! 参数名 !! 描述 !! 是否可选 !! 默认值
|-
| '''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: 带标题的基本盒子 (新默认样式) ===
<pre>
{{内容盒子
|title = 温馨提示
|content = 请遵守社区规范，友好交流。新的默认样式更加美观。
}}
</pre>
'''渲染效果:'''
{{内容盒子
|title = 温馨提示
|content = 请遵守社区规范，友好交流。新的默认样式更加美观。
|borderRadius = 12px
|borderColor = #e0e0e0
|cardBgColor = #fff
|titlePadding = 12px 18px
|titleAlign = left
|titleFontWeight = 600
|titleFontSize = 1.1em
|titleBgColor = #f7f9fc
|titleColor = #2d3748
|contentPadding = 15px 18px
|contentLineHeight = 1.7
|contentColor = #4a5568
|contentBgColor = #fff
}}
<small>''(以上为模拟新默认值的渲染，实际使用时无需填写这些参数即可达到此效果)''</small>

=== 示例2: 无标题的盒子 (新默认样式) ===
<pre>
{{内容盒子
|content = 这是一段没有标题的重要信息，它仍然享有圆角和阴影。
}}
</pre>
'''渲染效果:'''
{{内容盒子
|content = 这是一段没有标题的重要信息，它仍然享有圆角和阴影。
|borderRadius = 12px
|borderColor = #e0e0e0
|cardBgColor = #fff
|contentPadding = 15px 18px
|contentLineHeight = 1.7
|contentColor = #4a5568
|contentBgColor = #fff
}}
<small>''(以上为模拟新默认值的渲染，实际使用时无需填写这些参数即可达到此效果)''</small>

=== 示例3: 自定义主要颜色 (例如警告框) ===
<pre>
{{内容盒子
|title = 特别警告
|content = 请注意，此操作不可逆！
|cardBgColor = #fff3cd <!-- 淡黄色背景 -->
|borderColor = #ffeeba <!-- 黄色边框 -->
|titleBgColor = #ffeeba <!-- 标题背景与边框同色系 -->
|titleColor = #856404   <!-- 深黄色文字 -->
|contentColor = #856404 <!-- 内容文字也用深黄色 -->
|borderRadius = 8px
}}
</pre>
'''渲染效果:'''
{{内容盒子
|title = 特别警告
|content = 请注意，此操作不可逆！
|cardBgColor = #fff3cd
|borderColor = #ffeeba
|titleBgColor = #ffeeba
|titleColor = #856404
|contentColor = #856404
|borderRadius = 8px
|titlePadding = 12px 18px
|titleAlign = left
|titleFontWeight = 600
|titleFontSize = 1.1em
|contentPadding = 15px 18px
|contentLineHeight = 1.7
|contentBgColor = transparent <!-- 让内容区域背景透明以显示cardBgColor -->
}}

=== 示例4: 内容为列表 (自定义标题背景) ===
<pre>
{{内容盒子
|title = Wiki小知识
|content =
* Wiki支持富文本编辑。
* 你可以创建自己的用户页面。
* 模板可以极大地简化重复内容的编写。
|titleBgColor = #4A90E2 <!-- 鲜明蓝色 -->
|titleColor = white
}}
</pre>
'''渲染效果:'''
{{内容盒子
|title = Wiki小知识
|content =
* Wiki支持富文本编辑。
* 你可以创建自己的用户页面。
* 模板可以极大地简化重复内容的编写。
|titleBgColor = #4A90E2
|titleColor = white
|borderRadius = 12px
|borderColor = #e0e0e0
|cardBgColor = #fff
|titlePadding = 12px 18px
|titleAlign = left
|titleFontWeight = 600
|titleFontSize = 1.1em
|contentPadding = 15px 18px
|contentLineHeight = 1.7
|contentColor = #4a5568
|contentBgColor = #fff
}}

=== 示例5: 更多自定义与主题化 (例如深色标题栏) ===
<pre>
{{内容盒子
|title = 深邃思考
|content = 这里的内容将配合深色标题栏展示。我们还可以居中标题并改变字体大小。
|cardBgColor = #f0f2f5 <!-- 浅灰色卡片背景 -->
|borderColor = #adb5bd <!-- 稍深一点的灰色边框 -->
|titleBgColor = #343a40 <!-- 深灰标题背景 -->
|titleColor = #f8f9fa   <!-- 浅灰标题文字 -->
|titleAlign = center
|titleFontSize = 1.3em
|contentColor = #212529 <!-- 深色内容文字 -->
|contentBgColor = #f0f2f5 <!-- 内容区域背景与卡片背景一致 -->
}}
</pre>
'''渲染效果:'''
{{内容盒子
|title = 深邃思考
|content = 这里的内容将配合深色标题栏展示。我们还可以居中标题并改变字体大小。
|cardBgColor = #f0f2f5
|borderColor = #adb5bd
|titleBgColor = #343a40
|titleColor = #f8f9fa
|titleAlign = center
|titleFontSize = 1.3em
|contentColor = #212529
|contentBgColor = #f0f2f5
|borderRadius = 12px
|titlePadding = 12px 18px
|titleFontWeight = 600
|contentPadding = 15px 18px
|contentLineHeight = 1.7
}}

== 注意事项 ==
* '''内容参数 (`content`)''' 可以包含复杂的Wikitext，包括列表、表格、图片甚至其他模板的调用。
* 如果不需要标题，请 '''不要传入 `title` 参数'''，或者将其值设为空。
* 为了保持Wiki整体风格的一致性，建议在大多数情况下使用新的默认样式，仅在确实需要突出显示或实现特定主题（如警告、提示）时进行深度自定义。
* 如果希望内容区域的背景色与卡片整体背景色（`cardBgColor`）一致，可以将 `contentBgColor` 设置为 `transparent` 或与 `cardBgColor` 相同的值。默认情况下，内容区域背景（`contentBgColor`）和卡片背景（`cardBgColor`）均为 `#fff`。

<noinclude>
[[Category:模板文档]]
</noinclude>