查看“︁Widget:GF立绘切换”︁的源代码

<!--
  Widget:GF立绘切换
  参数（由模板传入，Widget 扩展用 {{{param}}} 语法接收）：
    立绘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>