查看“︁模板:示例模板A”︁的源代码

<includeonly>
<div style="border: 3px solid #6a0dad; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); padding: 20px; margin: 20px 0; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
<div style="text-align: center; margin-bottom: 20px;">
  <h1 style="color: #6a0dad; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">🎨 示例模板A 🎨</h1>
  <p style="font-style: italic; color: #555;">本模板展示了MediaWiki的各种强大技术</p>
</div>

<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between;">
  <!-- Wikitext 示例 -->
  <div style="flex: 1; min-width: 250px; border: 2px solid #4CAF50; background-color: #f1f8e9; padding: 15px; border-radius: 10px;">
    <h2 style="color: #2E7D32; margin-top: 0;">Wikitext 示例</h2>
    <p>'''这是粗体文本'''</p>
    <p>''这是斜体文本''</p>
    <p>[[{{{1|示例页面}}}]] - 内部链接</p>
    <p>[[{{{2|Special:RecentChanges}}}|最近更改]] - 带显示文字的链接</p>
    <p>== 二级标题 ==</p>
    <p>* 列表项1<br>* 列表项2</p>
  </div>

  <!-- HTML 示例 -->
  <div style="flex: 1; min-width: 250px; border: 2px solid #2196F3; background-color: #e3f2fd; padding: 15px; border-radius: 10px;">
    <h2 style="color: #1565C0; margin-top: 0;">HTML 示例</h2>
    <p><b>加粗文本</b> 和 <i>斜体文本</i></p>
    <p><span style="color: red;">红色文字</span> 和 <span style="font-size: 1.2em;">大号文字</span></p>
    <table border="1" cellpadding="5" style="border-collapse: collapse; width: 100%;">
      <tr><th>表头1</th><th>表头2</th></tr>
      <tr><td>数据1</td><td>数据2</td></tr>
    </table>
    <p><a href="/wiki/特殊:特殊页面" title="特殊页面">特殊页面链接</a></p>
  </div>
</div>

<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; margin-top: 15px;">
  <!-- CSS 示例 -->
  <div style="flex: 1; min-width: 250px; border: 2px solid #FF9800; background-color: #fff3e0; padding: 15px; border-radius: 10px;">
    <h2 style="color: #EF6C00; margin-top: 0;">CSS 示例</h2>
    <div style="background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%); padding: 10px; border-radius: 8px; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
      渐变背景效果
    </div>
    <p style="font-family: 'Courier New', monospace; letter-spacing: 1px;">等宽字体与字母间距</p>
    <div style="transform: rotate(-2deg); background-color: #e8f5e9; padding: 10px; border-left: 5px solid #4CAF50;">
      轻微旋转的元素
    </div>
    <div style="transition: all 0.3s; padding: 10px; background-color: #bbdefb; border-radius: 5px; margin-top: 10px; text-align: center;">
      悬停查看效果
    </div>
    <style>
      .hover-demo:hover {
        background-color: #64b5f6 !important;
        transform: scale(1.05);
      }
    </style>
    <script>
      // 注意：在MediaWiki中，通常不推荐直接在模板中使用JavaScript
      // 这里仅作演示，实际应用中应通过小工具或系统JS页面添加
      document.addEventListener('DOMContentLoaded', function() {
        var demo = document.querySelector('.hover-demo');
        if(demo) {
          demo.textContent = '✓ 已加载JavaScript效果';
        }
      });
    </script>
  </div>

  <!-- 解析器函数示例 -->
  <div style="flex: 1; min-width: 250px; border: 2px solid #9C27B0; background-color: #f3e5f5; padding: 15px; border-radius: 10px;">
    <h2 style="color: #7B1FA2; margin-top: 0;">解析器函数示例</h2>
    <p>当前站点名称: <b>{{SITENAME}}</b></p>
    <p>当前页面: <b>{{PAGENAME}}</b></p>
    <p>当前命名空间: <b>{{NS:{{NAMESPACENUMBER}}}}</b></p>
    <p>参数1: <b>{{{1|未提供}}}</b></p>
    <p>参数2: <b>{{{2|未提供}}}</b></p>
    <p>条件判断: 
      {{#if:{{{1|}}}
      |✅ 已提供参数1
      |❌ 未提供参数1
      }}
    </p>
    <p>表达式计算: <b>{{#expr: 3 * 4 + 5 }}</b></p>
    <p> switch函数: 
      {{#switch: {{{3|default}}}
      | red = <span style="color:red;">红色</span>
      | blue = <span style="color:blue;">蓝色</span>
      | green = <span style="color:green;">绿色</span>
      | #default = <span>默认颜色</span>
      }}
    </p>
  </div>
</div>

<div style="margin-top: 20px; padding: 15px; background-color: #e8eaf6; border-radius: 10px; border-left: 5px solid #3f51b5;">
  <h3 style="color: #303f9f; margin-top: 0;">使用说明</h3>
  <p>此模板展示了MediaWiki的多种技术：</p>
  <ul>
    <li><b>Wikitext</b> - MediaWiki的标记语言，用于格式化文本和创建链接</li>
    <li><b>HTML</b> - 提供页面结构和语义</li>
    <li><b>CSS</b> - 控制样式和布局</li>
    <li><b>解析器函数</b> - 实现逻辑判断和动态内容</li>
  </ul>
  <p><b>使用方法</b>: <code><nowiki>{{示例模板A|参数1|参数2|参数3}}</nowiki></code></p>
</div>
</div>
</includeonly>

<noinclude>
== 模板文档 ==
这是一个展示MediaWiki各种技术的演示模板。

=== 用法 ===
<pre>
{{示例模板A}}
{{示例模板A|参数1值|参数2值|red}}
</pre>

=== 参数 ===
; 参数1
: 任意文本 - 演示参数使用
; 参数2
: 任意文本 - 演示参数使用
; 参数3
: 可选值: red, blue, green - 用于演示switch函数

[[Category:演示模板]]
[[Category:技术模板]]
</noinclude>