跳转到内容

模板:内容盒子/doc

来自电棍ottowiki

描述

此模板用于创建一个带有可选标题和自定义样式的通用内容盒子/信息框，具有清新现代的视觉风格。 它可以方便地统一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
}}

渲染效果:

Wiki小知识
* Wiki支持富文本编辑。
  • 你可以创建自己的用户页面。
  • 模板可以极大地简化重复内容的编写。


示例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`。
检索自“https://wiki.ottohub.cn/index.php?title=模板:内容盒子/doc&oldid=5150”