模板:内容盒子：修订间差异

2025年5月10日 (六) 00:08的版本

     文档

   📎 此文档通过 嵌入方式 引用自子页面 模板:内容盒子/doc。

   == 描述 ==

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

   [查看]
        · [编辑]
        · [历史]
     · [刷新]

@@ 第1行： / 第1行： @@
-<div style="width:100%; border-radius:{{{borderRadius|8px}}}; overflow:hidden; border:1px solid {{{borderColor|#ddd}}};">
+<div style="
-<table style="width:100%; border-collapse:collapse;">
+    width: 100%;
-{{#if:{{{title|}}}|
+    border-radius: {{{borderRadius|12px}}}; /* 稍大的圆角 */
-  <tr>
+    overflow: hidden;
-    <td style="padding:{{{titlePadding|8px 8px 8px 15px}}}; text-align:left; font-weight:bold; background-color:{{{titleBgColor|#87CEFA}}}; color:{{{titleColor|snow}}};">
+    border: 1px solid {{{borderColor|#e0e0e0}}}; /* 更浅的边框色 */
-      {{{title}}}
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 添加柔和阴影 */
-    </td>
+    background-color: {{{cardBgColor|#fff}}}; /* 卡片背景色，默认为白色 */
-  </tr>
+">
-}}
+<table style="
-  <tr>
+    width: 100%;
-    <td style="padding:{{{contentPadding|10px 15px}}}; line-height: {{{contentLineHeight|1.8}}};">
+    border-collapse: collapse;
-      {{{content|<!-- 默认无内容 -->}}}
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* 更现代的字体栈 */
-    </td>
+">
-  </tr>
+    {{#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>
 </div>
+<noinclude>
+{{Documentation}}
+</noinclude>