模板:画廊：修订间差异

2026年7月13日 (一) 23:01的最新版本

画廊模板

简约响应式图片画廊。

基础用法

<div style="display:flex; flex-wrap:wrap; gap:8px; justify-content:center;">
{{画廊|图片文件名.png}}
{{画廊|图片文件名.png|250}}
{{画廊|图片文件名.png|200|图片标题}}
</div>

参数

位置	参数	说明	示例
1	文件名	图片文件名，必须	图1.png
2	宽度	图片宽度(px)，默认200	250
3	标题	图片下方文字，可选	标题文字

完整示例

<div style="display:flex; flex-wrap:wrap; gap:8px; justify-content:center;">
{{画廊|screenshot1.png|200|事件现场}}
{{画廊|screenshot2.png|200|聊天记录}}
{{画廊|screenshot3.png|200|后续发展}}
{{画廊|screenshot4.png|200|最终结果}}
</div>

响应式说明

桌面端：每行 4-5 张
平板端：每行 3 张
手机端：每行 2 张

外层 div 控制整体布局，模板只负责单张图片。

@@ 第1行： / 第1行： @@
-<includeonly>
+<includeonly><div style="flex:1 1 200px; max-width:280px; min-width:160px; text-align:center; padding:8px;">[[file:{{{1|Example.png}}}|{{{2|200}}}px|center|link=]]<div style="font-size:0.8em; color:#666; margin-top:6px;">{{{3|}}}</div></div></includeonly>
-<div style="width:100%; margin:0 auto;">
-<div style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center;">
-{{{1|
-<div style="flex:1 1 280px; max-width:320px; min-width:240px; background:#fff; border:2px solid #e8f5e9; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(76,175,80,0.08); transition:all 0.2s;">
-<div style="padding:12px; text-align:center; background:#f1f8e9; border-bottom:2px solid #e8f5e9;">
-[[file:{{{image|Example.png}}}|{{{width|280}}}px|center|link=]]
-</div>
-<div style="padding:14px 16px;">
-<div style="font-weight:900; color:#2e7d32; font-size:1.1em; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;">{{{title|标题}}}</div>
-<div style="color:#666; font-size:0.85em; line-height:1.6;">{{{desc|描述文字}}}</div>
-</div>
-</div>
-}}}
-</div>
-</div>
-</includeonly>
 <noinclude>
-== 使用方法 ==
+== 画廊模板 ==
-<pre>
+简约响应式图片画廊。
-{{画廊
-|image=图片文件名.png
-|width=280
-|title=图片标题
-|desc=图片描述文字
-}}
-</pre>
-=== 多图用法 ===
+=== 基础用法 ===
 <pre>
-<div style="display:flex; flex-wrap:wrap; gap:12px; justify-content:center;">
+<div style="display:flex; flex-wrap:wrap; gap:8px; justify-content:center;">
-{{画廊|image=图1.png|width=280|title=标题1|desc=描述1}}
+{{画廊|图片文件名.png}}
-{{画廊|image=图2.png|width=280|title=标题2|desc=描述2}}
+{{画廊|图片文件名.png|250}}
-{{画廊|image=图3.png|width=280|title=标题3|desc=描述3}}
+{{画廊|图片文件名.png|200|图片标题}}
-{{画廊|image=图4.png|width=280|title=标题4|desc=描述4}}
 </div>
 </pre>
-=== 参数说明 ===
+=== 参数 ===
 {| class="wikitable"
-! 参数 !! 说明 !! 默认值
+! 位置 !! 参数 !! 说明 !! 示例
 |-
-| image || 图片文件名 || Example.png
+| 1 || 文件名 || 图片文件名，必须 || 图1.png
 |-
-| width || 图片宽度(px) || 280
+| 2 || 宽度 || 图片宽度(px)，默认200 || 250
 |-
-| title || 图片标题 || 标题
+| 3 || 标题 || 图片下方文字，可选 || 标题文字
-|-
-| desc || 图片描述 || 描述文字
 |}
-== 响应式特性 ==
+=== 完整示例 ===
+<pre>
+<div style="display:flex; flex-wrap:wrap; gap:8px; justify-content:center;">
+{{画廊|screenshot1.png|200|事件现场}}
+{{画廊|screenshot2.png|200|聊天记录}}
+{{画廊|screenshot3.png|200|后续发展}}
+{{画廊|screenshot4.png|200|最终结果}}
+</div>
+</pre>
+=== 响应式说明 ===
+* 桌面端：每行 4-5 张
+* 平板端：每行 3 张
+* 手机端：每行 2 张
-* 桌面端：每行 3-4 张（自动换行）
+外层 div 控制整体布局，模板只负责单张图片。
-* 平板端：每行 2 张
-* 手机端：每行 1 张（全宽）
 </noinclude>