Chiyansama(對話 | 貢獻) 無編輯摘要 |
Chiyansama(對話 | 貢獻) (// Edit via Wikiplus) |
||
第1行: | 第1行: | ||
{{#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> |
{{#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> |
||
|有声漫=<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>|漫画}} |
|有声漫=<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>|漫画}} |
||
{{#switch:{{{type|{{{条目类型|}}}}}}| 漫画=<templatestyles src='漫画角色信息按键/styles.css'/>|有声漫=<templatestyles src='有声漫角色信息按键/style.css'/>|漫画}} |
{{#switch:{{{type|{{{条目类型|漫画}}}}}}| 漫画=<templatestyles src='漫画角色信息按键/styles.css'/>|有声漫=<templatestyles src='有声漫角色信息按键/style.css'/>|漫画}} |
||
<noinclude>{{doc}}</noinclude> |
<noinclude>{{doc}}</noinclude> |
於 2023年7月31日 (一) 15:18 的修訂
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
示例
一行一個
不填寫配音演員
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
填寫配音演員
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
一行多個
使用 <div class='characters-list'>...</div>
將按鍵包裹
樣板
<div class='characters-list'>
{{角色信息按键|辟邪}}
{{角色信息按键|二两}}
{{角色信息按键|兔爷}}
{{角色信息按键|谛听|藤新}}
{{角色信息按键|金角|咩咩}}
{{角色信息按键|银角|阎么么}}
</div>
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
頁面Template:漫畫角色信息按鍵/styles.css沒有內容。
模板數據
此模板用於顯示出場角色。
參數 | 描述 | 類型 | 狀態 | |
---|---|---|---|---|
角色姓名 | 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。但注意不應過分影響樣式代碼的可讀性和複雜度。