Chiyansama（留言 | 貢獻） （// Edit via Wikiplus） 標籤：半角方括号不配对 |
小 （无障碍标记（迷惑行为？） |
||
| （未顯示由 4 位使用者於中間所作的 18 次修訂） | |||
| 第1行： | 第1行： | ||
<div class="character"> |
|||
{{#switch:{{{type|{{{条目类型|漫画}}}}}}|漫画=<div class="character"><span class="c-avatar">[[File:{{{1|天禄}}}-角色按钮用图.png|link=https://wiki.zorua.top/wiki/{{{1}}}]]</span><div class="character-bg">[[File:灰色背景.png|120px|link=https://wiki.zorua.top/wiki/{{{1|天禄}}}]]</div><span class="character-name">[[{{{1|天禄}}}]]</span></div> |
|||
{{#if:{{{2|}}} |
|||
|有声漫/动画=<div class="character"><span class="c-avatar">[[{{{2|File:{{{1|天禄}}}-角色按钮用图.png}}}|link=https://wiki.zorua.top/wiki/{{{1|天禄}}}]]</span><div class="character-bg">[[File:灰色背景.png|120px|link=https://wiki.zorua.top/wiki/{{{1|天禄}}}]]</div><p href="https://wiki.zorua.top/wiki/{{{1|天禄}}}]]" class="character-name">角色:[[{{{1|天禄}}}]]<br>配音:{{{3|山新}}}</p></div>|漫画}} |
|||
|<span class="character-avatar-anime">[[File:{{{自定义图片|{{{1|天禄}}}-角色按钮用图.png}}}|link=]]</span> |
|||
{{#switch:{{{type|{{{条目类型|漫画}}}}}}| 漫画=<templatestyles src='漫画角色信息按键/styles.css'/>|有声漫/动画<templatestyles src='有声漫角色信息按键/style.css'/>|漫画}} |
|||
|<span class="character-avatar-comic">[[File:{{{自定义图片|{{{1|天禄}}}-角色按钮用图.png}}}|link=]]</span> |
|||
}}<div class="character-bg" aria-hidden="true">[[{{{1|天禄}}}|<nowiki />]]</div>{{#if:{{{2|}}} |
|||
| ⚫ | |||
|<span class="character-name-anime"><span class="character-name-comic">[[{{{1|天禄}}}]]</span><br>配音:{{{2|山新}}}</span> |
|||
|<span class="character-name-comic">[[{{{1|天禄}}}]]</span> |
|||
}} |
|||
</div> |
|||
<templatestyles src='Template:角色信息按键/style.css'/><!-- |
|||
| ⚫ | |||
於 2024年5月12日 (日) 20:01 的最新修訂
模板文件
示例
一行一個
不填寫配音演員
填寫配音演員
四不像配音:圖特哈蒙
一行多個
使用 <div class='characters-list'>...</div> 將按鍵包裹
樣板
<div class='characters-list'>
{{角色信息按键|辟邪}}
{{角色信息按键|二两}}
{{角色信息按键|兔爷}}
{{角色信息按键|谛听|藤新}}
{{角色信息按键|金角|咩咩}}
{{角色信息按键|银角|阎么么}}
</div>
模板數據
此模板用於顯示出場角色。
| 參數 | 描述 | 類型 | 狀態 | |
|---|---|---|---|---|
| 角色姓名 | 1 | 角色姓名
| 行 | 必填 |
| 配音演員姓名 | 2 | 配音演員名稱，不填寫時將不會顯示。
| 行 | 必填 |
| 自定義圖片 | 自定义图片 | 此參數用於自定義按鈕使用圖片。 | 行 | 不建議使用 |
連結實現細節
MediaWiki要求wikitext中的連結只能使用[[]]或[]的格式。模板引擎會自動移除<a>等禁止直接使用的HTML元素。此外，模板引擎也不允許在連結文本中嵌入另一個連結（注意HTML標準並不允許嵌套<a>元素）或者圖片（即使通過link=移除了可點擊的<a>）。這限制了連結的靈活度，不方便使整個按鈕區域都成為可點擊的hotspot。為了繞過這一技術限制，本模板使用了一個占位元素<div class="character-bg">覆蓋在按鈕上作為連結的點擊區域。在版本53726前，本模板使用File:灰色背景.png作為連結的占位符並利用圖片連結才可使用的link=參數建立了到角色頁的連結。
即使MediaWiki沒有限制<a>元素，想僅憑模板魔術字模擬wikitext原生連結的效果也是較為困難的。到不存在頁面的連結應該顯示為紅鏈，模板中判斷目標頁面是否存在可以使用#ifexist解析器函數，但大量使用它會帶來性能問題。
版本53727嘗試使用aria-hidden="true"屬性來對屏幕閱讀器隱藏占位符.character-bg內的連結，以避免與.character-name-comic內的連結重複。然而僅這麼做不能改變<a>連結的focusable狀態，使用鍵盤Tab鍵仍能選中占位元素連結。解決此問題需要給<a>元素設置tabindex="-1"屬性，然而受上文提到的技術限制無法在wikitext的層面做到（另見 commit b186b20），若確實有此需求可能更適合用javascript完成。
有意移除占位元素的編者亦可嘗試給.character-name-comic內的<a>設置較大的padding。但注意不應過分影響樣式代碼的可讀性和複雜度。