跳转到内容

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

来自osm&bio
下一编辑→
Magezeya​（留言 | 贡献）
341次编辑
可视化wikitext
Magezeya​（留言 | 贡献）
341次编辑
创建页面，内容为“<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…”
 
Magezeya​（留言 | 贡献）
341次编辑
无编辑摘要
第1行： 第1行：
<includeonly>
<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;">
<div class="mw-tech-showcase" style="font-family: 'Segoe UI', system-ui, sans-serif; max-width: 1200px; margin: 20px auto;">
  <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 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);">MediaWiki 技术全景展示</h1>
  <p style="font-size: 1.2em; opacity: 0.9;">探索 Wikitext、HTML、CSS 和解析器函数的无限可能</p>
  <div style="margin-top: 15px;">
    <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; margin: 0 5px;">{{CURRENTYEAR}}年{{CURRENTMONTH}}月{{CURRENTDAY}}日</span>
    <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; margin: 0 5px;">{{SITENAME}}</span>
    <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; margin: 0 5px;">{{PAGENAME}}</span>
  </div>
</div>
</div>


<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between;">
<!-- 主要内容区 -->
   <!-- Wikitext 示例 -->
<div style="display: flex; flex-wrap: wrap; margin: 0 -10px;">
   <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>
   <!-- 左侧：Wikitext 展示 -->
     <p>'''这是粗体文本'''</p>
   <div class="tech-section" style="flex: 1; min-width: 300px; padding: 20px; margin: 10px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">
    <p>''这是斜体文本''</p>
     <h2 style="color: #28a745; border-bottom: 2px solid #28a745; padding-bottom: 10px;">Wikitext 技术展示</h2>
     <p>[[{{{1|示例页面}}}]] - 内部链接</p>
      
    <p>[[{{{2|Special:RecentChanges}}}|最近更改]] - 带显示文字的链接</p>
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
    <p>== 二级标题 ==</p>
      <h3>文本格式化</h3>
     <p>* 列表项1<br>* 列表项2</p>
      <p>'''这是粗体文本''' → <strong>这是粗体文本</strong></p>
      <p>''这是斜体文本'' → <em>这是斜体文本</em></p>
      <p>'''''这是粗斜体''''' → <strong><em>这是粗斜体</em></strong></p>
      <p><nowiki>这是等宽字体</nowiki> → <code>这是等宽字体</code></p>
     </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>链接功能</h3>
      <p>[[Osm使用手册]] → [[Osm使用手册]]</p>
      <p>[[Osm使用手册|自定义链接文本]] → [[Osm使用手册|自定义链接文本]]</p>
      <p>[https://www.example.com 外部链接] → [https://www.example.com 外部链接]</p>
      <p>[[Special:RecentChanges]] → [[Special:RecentChanges]]</p>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>列表与结构</h3>
      <div style="display: flex;">
        <div style="flex: 1;">
          <p>无序列表:</p>
          <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
          </ul>
        </div>
        <div style="flex: 1;">
          <p>有序列表:</p>
          <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
          </ol>
        </div>
      </div>
      <p>== 二级标题 ==</p>
      <p>=== 三级标题 ===</p>
    </div>
  </div>
 
  <!-- 中间：HTML/CSS 展示 -->
  <div class="tech-section" style="flex: 1; min-width: 300px; padding: 20px; margin: 10px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">
    <h2 style="color: #dc3545; border-bottom: 2px solid #dc3545; padding-bottom: 10px;">HTML & CSS 技术展示</h2>
   
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>高级排版</h3>
      <p style="font-family: 'Georgia', serif; font-size: 1.2em;">这是使用自定义字体的文本</p>
      <p style="text-shadow: 2px 2px 4px rgba(0,0,0,0.3); color: #6f42c1; font-weight: bold;">带有阴影的文本效果</p>
      <p style="background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 1.5em;">彩虹渐变文字效果</p>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <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 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;">
          <style>
            @keyframes pulse {
              0% { transform: scale(1); }
              50% { transform: scale(1.1); }
              100% { transform: scale(1); }
            }
          </style>
          脉动动画
        </div>
      </div>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>Flexbox布局</h3>
      <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
        <div style="flex: 1; min-width: 120px; background: #17a2b8; color: white; padding: 10px; margin: 5px; text-align: center;">Flex项 1</div>
        <div style="flex: 1; min-width: 120px; background: #17a2b8; color: white; padding: 10px; margin: 5px; text-align: center;">Flex项 2</div>
        <div style="flex: 1; min-width: 120px; background: #17a2b8; color: white; padding: 10px; margin: 5px; text-align: center;">Flex项 3</div>
      </div>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>高级表单元素</h3>
      <div style="background: #e9ecef; padding: 15px; border-radius: 8px;">
        <label for="demo-range">范围滑块:</label>
        <input type="range" id="demo-range" min="0" max="100" style="width: 100%;">
       
        <label for="demo-color" style="display: block; margin-top: 15px;">颜色选择器:</label>
        <input type="color" id="demo-color" value="#ff0000" style="width: 100%; height: 40px;">
      </div>
    </div>
   </div>
   </div>


   <!-- HTML 示例 -->
   <!-- 右侧：解析器函数展示 -->
   <div style="flex: 1; min-width: 250px; border: 2px solid #2196F3; background-color: #e3f2fd; padding: 15px; border-radius: 10px;">
   <div class="tech-section" style="flex: 1; min-width: 300px; padding: 20px; margin: 10px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);">
     <h2 style="color: #1565C0; margin-top: 0;">HTML 示例</h2>
     <h2 style="color: #ffc107; border-bottom: 2px solid #ffc107; padding-bottom: 10px;">解析器函数技术展示</h2>
     <p><b>加粗文本</b> 和 <i>斜体文本</i></p>
   
    <p><span style="color: red;">红色文字</span> 和 <span style="font-size: 1.2em;">大号文字</span></p>
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
    <table border="1" cellpadding="5" style="border-collapse: collapse; width: 100%;">
      <h3>条件逻辑</h3>
       <tr><th>表头1</th><th>表头2</th></tr>
      <p>参数1: <b>{{{1|未提供}}}</b></p>
       <tr><td>数据1</td><td>数据2</td></tr>
      <p>参数2: <b>{{{2|未提供}}}</b></p>
     </table>
     
     <p><a href="/wiki/特殊:特殊页面" title="特殊页面">特殊页面链接</a></p>
      <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin: 10px 0;">
        {{#if: {{{1|}}}
        | ✅ <span style="color: #28a745;">已提供参数1: "{{{1}}}"</span>
        | ❌ <span style="color: #dc3545;">未提供参数1</span>
        }}
      </div>
     
      <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin: 10px 0;">
        {{#ifeq: {{{1|}}} | {{{2|}}}
        | ✅ <span style="color: #28a745;">参数1和参数2相同</span>
        | ❌ <span style="color: #dc3545;">参数1和参数2不同</span>
        }}
      </div>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
       <h3>数学计算</h3>
      <p>15 × 3 + 7 = <b>{{#expr: 15*3+7 }}</b></p>
      <p>2<sup>10</sup> = <b>{{#expr: 2^10 }}</b></p>
       <p>√49 = <b>{{#expr: sqrt(49) }}</b></p>
      <p>sin(π/2) = <b>{{#expr: sin(3.141592653589793/2) round 3 }}</b></p>
     </div>
   
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>字符串操作</h3>
      <p>当前时间: <b>{{#time: Y年m月d日 H:i:s }}</b></p>
      <p>字符串长度 "MediaWiki": <b>{{#len: MediaWiki}}</b></p>
      <p>字符串位置 "ia"在"MediaWiki"中: <b>{{#pos: MediaWiki|ia}}</b></p>
    </div>
   
    <div style="background: white; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h3>Switch语句</h3>
      <p>参数3: <b>{{{3|未提供}}}</b></p>
      <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin: 10px 0;">
        {{#switch: {{{3|default}}}
        | red = <span style="color: white; background: #dc3545; padding: 5px 10px; border-radius: 5px;">红色主题</span>
        | blue = <span style="color: white; background: #007bff; padding: 5px 10px; border-radius: 5px;">蓝色主题</span>
        | green = <span style="color: white; background: #28a745; padding: 5px 10px; border-radius: 5px;">绿色主题</span>
        | #default = <span style="background: #6c757d; color: white; padding: 5px 10px; border-radius: 5px;">默认主题</span>
        }}
      </div>
    </div>
   </div>
   </div>
</div>
</div>


<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; margin-top: 15px;">
<!-- 底部信息区 -->
   <!-- CSS 示例 -->
<div style="background: #343a40; color: white; padding: 20px; border-radius: 0 0 15px 15px; margin-top: 20px; text-align: center;">
   <div style="flex: 1; min-width: 250px; border: 2px solid #FF9800; background-color: #fff3e0; padding: 15px; border-radius: 10px;">
   <h3>技术统计</h3>
     <h2 style="color: #EF6C00; margin-top: 0;">CSS 示例</h2>
   <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
    <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 style="margin: 10px;">
       渐变背景效果
      <div style="font-size: 2em; font-weight: bold;">{{#len: {{FULLPAGENAME}}}}</div>
       <div>页面名称长度</div>
     </div>
     </div>
     <p style="font-family: 'Courier New', monospace; letter-spacing: 1px;">等宽字体与字母间距</p>
     <div style="margin: 10px;">
    <div style="transform: rotate(-2deg); background-color: #e8f5e9; padding: 10px; border-left: 5px solid #4CAF50;">
      <div style="font-size: 2em; font-weight: bold;">{{#expr: ({{CURRENTHOUR}}*60 + {{CURRENTMINUTE}})/1}}</div>
       轻微旋转的元素
       <div>今日已过分钟数</div>
     </div>
     </div>
     <div style="transition: all 0.3s; padding: 10px; background-color: #bbdefb; border-radius: 5px; margin-top: 10px; text-align: center;">
     <div style="margin: 10px;">
       悬停查看效果
      <div style="font-size: 2em; font-weight: bold;">{{#time: z}}</div>
       <div>年内第几天</div>
     </div>
     </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>
 
    
   <!-- 解析器函数示例 -->
   <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;">
   <div style="flex: 1; min-width: 250px; border: 2px solid #9C27B0; background-color: #f3e5f5; padding: 15px; border-radius: 10px;">
     <p>本模板展示了MediaWiki平台的核心技术能力，包括:</p>
    <h2 style="color: #7B1FA2; margin-top: 0;">解析器函数示例</h2>
     <div style="display: flex; justify-content: center; flex-wrap: wrap;">
     <p>当前站点名称: <b>{{SITENAME}}</b></p>
      <span style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; margin: 5px;">Wikitext</span>
     <p>当前页面: <b>{{PAGENAME}}</b></p>
       <span style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; margin: 5px;">HTML5</span>
    <p>当前命名空间: <b>{{NS:{{NAMESPACENUMBER}}}}</b></p>
       <span style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; margin: 5px;">CSS3</span>
    <p>参数1: <b>{{{1|未提供}}}</b></p>
       <span style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; margin: 5px;">解析器函数</span>
    <p>参数2: <b>{{{2|未提供}}}</b></p>
       <span style="background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; margin: 5px;">响应式设计</span>
    <p>条件判断:  
     </div>
      {{#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>
</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>
<style>
   <p>此模板展示了MediaWiki的多种技术：</p>
@media (max-width: 768px) {
   <ul>
  .mw-tech-showcase {
    <li><b>Wikitext</b> - MediaWiki的标记语言，用于格式化文本和创建链接</li>
    margin: 10px;
     <li><b>HTML</b> - 提供页面结构和语义</li>
   }
    <li><b>CSS</b> - 控制样式和布局</li>
   .tech-section {
    <li><b>解析器函数</b> - 实现逻辑判断和动态内容</li>
     min-width: 100% !important;
   </ul>
   }
  <p><b>使用方法</b>: <code><nowiki>{{示例模板A|参数1|参数2|参数3}}</nowiki></code></p>
}
</div>
</style>
</div>
</div>
</includeonly>
</includeonly>


<noinclude>
<noinclude>
== 模板文档 ==
== MediaWiki技术展示模板 ==
这是一个展示MediaWiki各种技术的演示模板。
这是一个展示MediaWiki所有核心技术的综合性演示模板。


=== 用法 ===
=== 使用方法 ===
<pre>
<pre>
{{示例模板A}}
{{MediaWiki技术展示}}
{{示例模板A|参数1值|参数2值|red}}
{{MediaWiki技术展示|参数1|参数2|red}}
</pre>
</pre>


=== 参数 ===
=== 参数说明 ===
; 参数1
; 参数1
: 任意文本 - 演示参数使用
: 任意文本 - 用于演示条件判断和参数使用
; 参数2
; 参数2
: 任意文本 - 演示参数使用
: 任意文本 - 用于演示比较和条件判断
; 参数3
; 参数3
: 可选值: red, blue, green - 用于演示switch函数
: 可选值: red, blue, green - 用于演示switch函数和主题切换
 
=== 技术特性 ===
此模板展示了以下MediaWiki技术:
* Wikitext标记语言
* HTML5语义化标签
* CSS3样式和动画
* 解析器函数和逻辑操作
* 响应式网页设计
* 魔术字和变量使用


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

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


MediaWiki技术展示模板

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

使用方法

{{MediaWiki技术展示}}
{{MediaWiki技术展示|参数1|参数2|red}}

参数说明

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

技术特性

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

  • Wikitext标记语言
  • HTML5语义化标签
  • CSS3样式和动画
  • 解析器函数和逻辑操作
  • 响应式网页设计
  • 魔术字和变量使用
检索自“https://osm.bio/index.php?title=模板:示例模板A&oldid=10962”