Widget:GF立绘切换：修订间差异

下一编辑→

可视化wikitext

2026年5月15日 (五) 06:17的版本

此 Widget 用于少女前线信息框的立绘切换展示。

@@ 第1行： / 第1行： @@
-<!--
+<noinclude>
-  Widget:GF立绘切换
+<div>此 Widget 用于少女前线信息框的立绘切换展示。</div>
-  参数（由模板传入，Widget 扩展用 {{{param}}} 语法接收）：
+</noinclude><includeonly><div class="gf-sw" data-f1="{{{立绘1|}}}" data-f2="{{{立绘2|}}}" data-f3="{{{立绘3|}}}" data-f4="{{{立绘4|}}}" data-f5="{{{立绘5|}}}" data-l1="{{{立绘1说明|常态}}}" data-l2="{{{立绘2说明|立绘2}}}" data-l3="{{{立绘3说明|立绘3}}}" data-l4="{{{立绘4说明|立绘4}}}" data-l5="{{{立绘5说明|立绘5}}}"><div class="gf-sw-slides"></div></div><style>.gf-sw{width:100%;display:flex;flex-direction:column;}.gf-sw-slides{width:100%;}.gf-sw-slide{display:none;flex-direction:column;align-items:center;width:100%;}.gf-sw-slide.gf-active{display:flex;}.gf-sw-slide img{width:100%;height:auto;display:block;}.gf-sw-tabs{display:flex;flex-wrap:wrap;border-top:1px solid #c8ccd1;background:#f8f9fa;}.gf-sw-tab{flex:1 1 0;min-width:0;padding:5px 3px;font-size:.82em;text-align:center;cursor:pointer;border:none;border-right:1px solid #c8ccd1;background:transparent;color:#202122;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}.gf-sw-tab:last-child{border-right:none;}.gf-sw-tab:hover{background:#eaecf0;}.gf-sw-tab.gf-active{background:#fff;color:#3366cc;font-weight:bold;box-shadow:inset 0 -2px 0 #3366cc;}.gf-sw-missing{padding:24px 8px;text-align:center;color:#54595d;font-size:.9em;line-height:1.8;}</style><script>document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".gf-sw").forEach(function(wrap){var d=wrap.dataset;var files=[d.f1,d.f2,d.f3,d.f4,d.f5];var labels=[d.l1,d.l2,d.l3,d.l4,d.l5];var slides=wrap.querySelector(".gf-sw-slides");var valid=[];files.forEach(function(f,i){if(!f)return;var div=document.createElement("div");div.className="gf-sw-slide"+(valid.length===0?" gf-active":"");var img=document.createElement("img");img.src="/wiki/Special:FilePath/"+encodeURIComponent(f);img.alt=labels[i];div.appendChild(img);slides.appendChild(div);valid.push({el:div,label:labels[i]});});if(valid.length===0){slides.innerHTML='<div class="gf-sw-missing">啊嘞？！<br/>怎么回事<br/>这个妹子怎么没有头的样子……</div>';return;}if(valid.length===1)return;var bar=document.createElement("div");bar.className="gf-sw-tabs";valid.forEach(function(item,i){var btn=document.createElement("button");btn.className="gf-sw-tab"+(i===0?" gf-active":"");btn.textContent=item.label;btn.addEventListener("click",function(){valid.forEach(function(s,j){s.el.classList.toggle("gf-active",j===i);});bar.querySelectorAll(".gf-sw-tab").forEach(function(b,j){b.classList.toggle("gf-active",j===i);});});bar.appendChild(btn);});wrap.appendChild(bar);});});</script></includeonly>
-    立绘1~5      图片文件名（含扩展名）
-    立绘1说明~5  标签文字
-    页面         SUBPAGENAME，用于隔离同页多个 infobox 的 id
--->
-<style>
-.gf-sw{width:100%;display:flex;flex-direction:column;}
-.gf-sw-slides{width:100%;position:relative;}
-.gf-sw-slide{display:none;flex-direction:column;align-items:center;width:100%;}
-.gf-sw-slide.gf-active{display:flex;}
-.gf-sw-slide img{width:100%;height:auto;display:block;}
-.gf-sw-tabs{display:flex;flex-wrap:wrap;border-top:1px solid #c8ccd1;background:#f8f9fa;}
-.gf-sw-tab{flex:1 1 0;min-width:0;padding:5px 3px;font-size:.82em;text-align:center;cursor:pointer;border:none;border-right:1px solid #c8ccd1;background:transparent;color:#202122;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}
-.gf-sw-tab:last-child{border-right:none;}
-.gf-sw-tab:hover{background:#eaecf0;}
-.gf-sw-tab.gf-active{background:#fff;color:#3366cc;font-weight:bold;box-shadow:inset 0 -2px 0 #3366cc;}
-.gf-sw-missing{padding:24px 8px;text-align:center;color:#54595d;font-size:.9em;line-height:1.8;}
-</style>
-<div class="gf-sw" id="gf-sw-{{{页面}}}">
-  <div class="gf-sw-slides">
-    <!-- 有立绘才渲染对应 slide，文件名由 MediaWiki 解析后传入 -->
-    {{{立绘1|__MISSING__}}}<!--SPLITHERE-->
-    {{{立绘2|}}}<!--SPLITHERE-->
-    {{{立绘3|}}}<!--SPLITHERE-->
-    {{{立绘4|}}}<!--SPLITHERE-->
-    {{{立绘5|}}}<!--SPLITHERE-->
-    {{{立绘1说明|常态}}}<!--SPLITHERE-->
-    {{{立绘2说明|立绘2}}}<!--SPLITHERE-->
-    {{{立绘3说明|立绘3}}}<!--SPLITHERE-->
-    {{{立绘4说明|立绘4}}}<!--SPLITHERE-->
-    {{{立绘5说明|立绘5}}}<!--SPLITHERE-->
-  </div>
-</div>
-<script>
-(function(){
-  var wrap = document.currentScript.previousElementSibling;
-  // Widget 扩展把参数直接渲染进 HTML，我们用注释分隔符拆出来
-  var raw = wrap.querySelector('.gf-sw-slides').innerHTML;
-  var parts = raw.split('<!--SPLITHERE-->').map(function(s){ return s.trim(); });
-  // parts[0..4] = 立绘1..5 文件名（MediaWiki 已将 [[Image:X]] 渲染成 <img>，
-  //   但这里传的是纯文件名，需要我们自己构造 wiki 图片 URL）
-  // ── 注意：Widget 里无法用 [[Image:]] 语法，文件名要拼 URL ──
-  // gf-ogas.wiki 的图片路径规则与标准 MediaWiki 相同：
-  //   /wiki/Special:FilePath/文件名
-  var files  = parts.slice(0,5);
-  var labels = parts.slice(5,10);
-  var slides = wrap.querySelector('.gf-sw-slides');
-  var validSlides = [];
-  slides.innerHTML = '';
-  files.forEach(function(fname, i){
-    fname = fname.replace(/<!--.*?-->/g,'').trim();
-    if(!fname || fname === '__MISSING__'){
-      if(i === 0){
-        slides.innerHTML = '<div class="gf-sw-missing">啊嘞？！<br/>怎么回事<br/>这个妹子怎么没有头的样子……</div>';
-      }
-      return;
-    }
-    var div = document.createElement('div');
-    div.className = 'gf-sw-slide' + (validSlides.length === 0 ? ' gf-active' : '');
-    var img = document.createElement('img');
-    img.src = '/wiki/Special:FilePath/' + encodeURIComponent(fname);
-    img.alt = labels[i] || fname;
-    img.style.width = '100%';
-    div.appendChild(img);
-    slides.appendChild(div);
-    validSlides.push({el: div, label: labels[i] || ('立绘' + (i+1))});
-  });
-  // 只有多张时才渲染标签栏
-  if(validSlides.length <= 1) return;
-  var tabBar = document.createElement('div');
-  tabBar.className = 'gf-sw-tabs';
-  validSlides.forEach(function(item, i){
-    var btn = document.createElement('button');
-    btn.className = 'gf-sw-tab' + (i === 0 ? ' gf-active' : '');
-    btn.textContent = item.label;
-    btn.addEventListener('click', function(){
-      validSlides.forEach(function(s, j){
-        s.el.classList.toggle('gf-active', j === i);
-      });
-      tabBar.querySelectorAll('.gf-sw-tab').forEach(function(b, j){
-        b.classList.toggle('gf-active', j === i);
-      });
-    });
-    tabBar.appendChild(btn);
-  });
-  wrap.appendChild(tabBar);
-})();
-</script>