微件:GF立绘切换

<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>

   __MISSING__
   
   
   
   
   常态
   立绘2
   立绘3
   立绘4
   立绘5

<script> (function(){

 var wrap = document.currentScript.previousElementSibling;
 // Widget 扩展把参数直接渲染进 HTML，我们用注释分隔符拆出来
 var raw = wrap.querySelector('.gf-sw-slides').innerHTML;
 var parts = raw.split().map(function(s){ return s.trim(); });
 // parts[0..4] = 立绘1..5 文件名（MediaWiki 已将 File: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 = '

啊嘞？！
怎么回事
这个妹子怎么没有头的样子……

';

     }
     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>