模板:示例模板A：修订间差异

2025年8月21日 (四) 13:49的版本

示例模板A - 技术展示

这是一个展示MediaWiki所有核心技术的综合性演示模板。

使用方法

{{示例模板A}}
{{示例模板A|参数1|参数2|red}}

参数说明

参数1: 任意文本 - 用于演示条件判断和参数使用
参数2: 任意文本 - 用于演示比较和条件判断
参数3: 可选值: red, blue, green - 用于演示switch函数和主题切换

技术特性

此模板展示了以下MediaWiki技术:

Wikitext标记语言
HTML5语义化标签
CSS3样式和动画
解析器函数和逻辑操作
响应式网页设计
魔术字和变量使用

@@ 第5行： / 第5行： @@
 <!-- 顶部标题区 -->
 <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px 15px 0 0; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.15);">
-   <h1 style="margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">示例模板A</h1>
+   <h1 style="margin: 0; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">示例模板A - 技术展示</h1>
    <p style="font-size: 1.2em; opacity: 0.9;">探索 Wikitext、HTML、CSS 和解析器函数的无限可能</p>
    <div style="margin-top: 15px;">
@@ 第76行： / 第76行： @@
        <h3>CSS动画与变换</h3>
        <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
-         <div style="width: 100px; height: 100px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 10px; transition: all 0.3s;" onmouseover="this.style.transform='scale(1.2)'; this.style.background='#0056b3'" onmouseout="this.style.transform='scale(1)'; this.style.background='#007bff'">悬停效果</div>
+         <div class="hover-demo" style="width: 100px; height: 100px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 10px; transition: all 0.3s ease;">
+          悬停效果
+        </div>
-         <div style="width: 100px; height: 100px; background: #6f42c1; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; margin: 10px; animation: pulse 2s infinite;">
+         <div class="pulse-demo" style="width: 100px; height: 100px; background: #6f42c1; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; margin: 10px;">
-          <style>
-            @keyframes pulse {
-% { transform: scale(1); }
-% { transform: scale(1.1); }
-% { transform: scale(1); }
-            }
-          </style>
            脉动动画
          </div>
@@ 第147行： / 第142行： @@
        <h3>字符串操作</h3>
        <p>当前时间: <b>{{#time: Y年m月d日 H:i:s }}</b></p>
-       <p>字符串长度 "MediaWiki": <b>{{#len: MediaWiki}}</b></p>
+       <p>字符替换:
-      <p>字符串位置 "ia"在"MediaWiki"中: <b>{{#pos: MediaWiki|ia}}</b></p>
+        {{#replace: {{FULLPAGENAME}}
+        | 模板
+        | <span style="color: red;">模板</span>
+        }}
+      </p>
      </div>
@@ 第171行： / 第170行： @@
    <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
      <div style="margin: 10px;">
-      <div style="font-size: 2em; font-weight: bold;">{{#len: {{FULLPAGENAME}}}}</div>
+       <div style="font-size: 2em; font-weight: bold;">{{#expr: {{CURRENTHOUR}}*60 + {{CURRENTMINUTE}}}}</div>
-      <div>页面名称长度</div>
-    </div>
-    <div style="margin: 10px;">
-       <div style="font-size: 2em; font-weight: bold;">{{#expr: ({{CURRENTHOUR}}*60 + {{CURRENTMINUTE}})/1}}</div>
        <div>今日已过分钟数</div>
      </div>
@@ 第181行： / 第176行： @@
        <div style="font-size: 2em; font-weight: bold;">{{#time: z}}</div>
        <div>年内第几天</div>
+    </div>
+    <div style="margin: 10px;">
+      <div style="font-size: 2em; font-weight: bold;">{{CURRENTTIMESTAMP}}</div>
+      <div>当前时间戳</div>
      </div>
    </div>
@@ 第196行： / 第195行： @@
 </div>
-<!-- 响应式设计媒体查询 -->
+<!-- CSS样式和动画 -->
 <style>
+.hover-demo:hover {
+  background: #0056b3 !important;
+  transform: scale(1.2);
+  cursor: pointer;
+}
+.pulse-demo {
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+% { transform: scale(1); }
+% { transform: scale(1.1); }
+% { transform: scale(1); }
+}
 @media (max-width: 768px) {
    .mw-tech-showcase {
@@ 第211行： / 第226行： @@
 <noinclude>
-== 示例模板A ==
+== 示例模板A - 技术展示 ==
 这是一个展示MediaWiki所有核心技术的综合性演示模板。