Chiyansama(留言 | 贡献) 无编辑摘要 |
小 (无障碍标记(迷惑行为?) |
||
(未显示4个用户的21个中间版本) | |||
第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的最新版本
示例
一行一个
不填写配音演员
填写配音演员
![四不像-角色按钮用图.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。但注意不应过分影响样式代码的可读性和复杂度。