Chiyansama(對話 | 貢獻) (// Edit via Wikiplus) |
小 (无障碍标记(迷惑行为?) |
||
(未顯示由 4 位使用者於中間所作的 16 次修訂) | |||
第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='Template:角色信息按键/漫画角色信息按键/styles.css'/>|有声漫/动画<templatestyles src='Template:角色信息按键/有声漫&动画角色信息按键/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 的最新修訂
示例
一行一個
不填寫配音演員
填寫配音演員
![四不像-角色按鈕用圖.png](/images/f/f1/%E5%9B%9B%E4%B8%8D%E5%83%8F-%E8%A7%92%E8%89%B2%E6%8C%89%E9%92%AE%E7%94%A8%E5%9B%BE.png)
配音:圖特哈蒙
一行多個
使用 <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。但注意不應過分影響樣式代碼的可讀性和複雜度。