Template:内容盒子：修订间差异
模板页面
更多操作
| 第1行： | 第1行： | ||
<div style="width:100%; border-radius:{{{borderRadius| | <div style=" | ||
<table style="width:100%; border-collapse:collapse;"> | width: 100%; | ||
{{#if:{{{title|}}}| | border-radius: {{{borderRadius|12px}}}; /* 稍大的圆角 */ | ||
overflow: hidden; | |||
border: 1px solid {{{borderColor|#e0e0e0}}}; /* 更浅的边框色 */ | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 添加柔和阴影 */ | |||
background-color: {{{cardBgColor|#fff}}}; /* 卡片背景色，默认为白色 */ | |||
"> | |||
}} | <table style=" | ||
width: 100%; | |||
border-collapse: collapse; | |||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* 更现代的字体栈 */ | |||
"> | |||
{{#if:{{{title|}}}| | |||
<tr> | |||
<td style=" | |||
padding: {{{titlePadding|12px 18px}}}; /* 调整标题内边距 */ | |||
text-align: {{{titleAlign|left}}}; | |||
font-weight: {{{titleFontWeight|600}}}; /* 稍细一点的粗体 */ | |||
font-size: {{{titleFontSize|1.1em}}}; /* 标题字号 */ | |||
background-color: {{{titleBgColor|#f7f9fc}}}; /* 非常浅的蓝灰色背景 */ | |||
color: {{{titleColor|#2d3748}}}; /* 深灰色文字，更柔和 */ | |||
border-bottom: 1px solid {{{borderColor|#e0e0e0}}}; /* 标题和内容间的分割线 */ | |||
"> | |||
{{{title}}} | |||
</td> | |||
</tr> | |||
}} | |||
<tr> | |||
<td style=" | |||
padding: {{{contentPadding|15px 18px}}}; /* 调整内容内边距 */ | |||
line-height: {{{contentLineHeight|1.7}}}; /* 略微调整行高 */ | |||
color: {{{contentColor|#4a5568}}}; /* 内容文字颜色 */ | |||
background-color: {{{contentBgColor|#fff}}}; /* 内容区域背景，默认白色 */ | |||
"> | |||
{{{content|<!-- 默认无内容 -->}}} | |||
</td> | |||
</tr> | |||
</table> | </table> | ||
</div> | </div> | ||
2025年5月10日 (六) 00:08的版本
描述
此模板用于创建一个带有可选标题和自定义样式的通用内容盒子/信息框，具有清新现代的视觉风格。 它可以方便地统一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`。