模板:链接图组
跳到导航
跳到搜索
简介
该模板可以生成一组链接图片组,一般用于大家族模板(条目下方导航模板)。
为照顾灵活性,该模板只会生成数个<li>
,其中每个<li>
都包含一个角色图片以及该角色的链接,外部需要手动包裹一组<ul>
标签作为容器。
用法
该模板有两种使用方法。
单独图片
虽然不是强制规定,但请尽可能保证所有图片规格一致。
具体请参考#示例四。
雪碧图
这个模板只能作用于以下格式的雪碧图:
- 雪碧图中的小图片按角色横向排列。
- 所有小图片大小均匀,小图片与小图片之间间距相等
- 若有点击进入角色页面要变化的图片,要置于同一角色下方,垂直于一条直线。
样例 |
---|
|
若有其他格式的雪碧图或应用情形,请单独使用{{image}}模板或{{sprites}}模板。
参数
开启注释
{{链接图组 |image= <!-- 雪碧图文件,只支持内链 --> |charas=<!-- 要使用到的所有角色名,中间用全角逗号【,】隔开,若想规定图片下方链接显示的文字,请使用:页面名=显示名 的写法。 --> |start=<!-- 起始位置,默认为1 --> |size=<!-- 图片大小,固定单位为px,请填写数字,以下多个参数均是这样 --> |width=<!-- 小图片宽度,格式同上 --> |height<!-- 小图片高度 --> |fitWidth=<!-- 调节宽度,所有小图片容器本身的大小会加上该值,用于图片规格不均或小图片间距没有完全相等时使用,该参数不受缩放的影响 --> |fitHeight=<!-- 调节高度,同上 --> |offsetX=<!-- 雪碧图小图片的横向偏移,可以理解为小图片之间的间距 --> |offsetY=<!-- 雪碧图小图片的纵向偏移,无切换图片就不要填 --> |scale=<!-- 对所有小图片进行缩放,默认为1(也就是不缩放),绝大多数情况下都要缩放 --> |targetSize=<!-- 将所有小图片缩放到指定的大小,默认为width参数的大小(也就是不缩放),该值的缩放会被scale参数的缩放所覆盖 --> |radius=<!-- 对小图片四角进行裁剪,在雪碧图背景非透明时使用 --> |blockStyle=<!-- 对每个小图片+对应链接块的样式,默认为margin:0 5px --> |imgContainerStyle=<!- 图片外层div容器样式,默认样式为:display:inline-block; width:对应参数值; height:对应参数值; position:relative;,若没有特殊要求,请不要覆盖这些值 ---> |class= 为每个小图片的最外层容器添加class,一般用于添加hover过渡效果 |角色名|角色名|角色名...<!-- 此处规定角色的排列位置,默认按雪碧图中角色的从左到右排列,若无需调换位置请不要填写,角色名使用charas参数中的显示名 --> |add1=<!-- 向大家族末尾添加一组新的角色图片+链接,一般在使用雪碧图需要追加新角色时使用 --> |add2= |add3= ... }}
关闭注释
{{链接图组 |image= |charas= |start= |size= |width= |height |fitWidth= |fitHeight= |offsetX= |offsetY= |scale= |targetSize= |radius= |blockStyle= |imgContainerStyle= |class= }}
- 其中:【角色名...】以及【add...】中的语法都为【图片文件(若无图片可以用「@space」代替生成一个空白),页面名,显示名】。
- 图片文件只支持内链,若页面名和显示名相同,则不需要再填显示名。
- 显示名中可以为链接添加样式,如:
古宫乃乃香={{color|pink|古宫乃乃香}}
(使用雪碧图时,参见#示例二)、xxx.jpg,古宫乃乃香,{{color|pink|古宫乃乃香}}
(使用单独图片时,参见#示例五)
- 以上参数若有不使用的请删除,否则可能导致出现错误。
示例
示例一~三均为雪碧图的用法。
示例一
<ul>{{链接图组 |image= Nav-ikamusume.png |charas= 乌贼娘(侵略!乌贼娘)=乌贼娘,相泽荣子,相泽千鹤,齐藤渚 |start= 1 |size= 2400 |width= 157.5 |height= 188 |offsetX= 30 |offsetY= 17 |scale= 0.5 }}</ul>
示例二
<ul>{{链接图组 |image= Nav-天体的秩序.png |charas= 古宫乃乃香,诺艾尔(天体的秩序)=诺艾尔,椎原小春,水坂柚季,水坂凑太,户川汐音 |size= 2600 |width= 332 |height= 332 |offsetX= 30 |targetSize= 90 |blockStyle= margin:0 7px; |诺艾尔|古宫乃乃香|水坂柚季|@space,怪兽先生|户川汐音}}</ul>
示例三
{{hovers}} <ul>{{链接图组 |image= Nav-干物妹.png |charas= 土间埋,海老名菜菜,本场切绘,橘·希尔芬福特 |size= 1900 |width= 200 |height= 200 |offsetX= 10 |scale= 0.5 |blockStyle= margin:0 10px; |class= hovers-grow-shallow |add1=Kongou Hikari Icon.png,金刚光 }}</ul>
示例四
这是该模板使用单独图片时的写法。
{{hovers}} <ul>{{链接图组 |width= 130 |height= 130 |targetSize= 130 |blockStyle= margin:0 10px; |class= hovers-fade-shallow |nav-koias-mira.png,木之幡米拉,{{color|orange|木之幡米拉}} |nav-koias-ao.png,真中苍 |nav-koias-mai.png,猪濑舞 |nav-koias-mikage.png,樱井美景 |nav-koias-mari.png,森野真理 |@space,远藤幸 }}</ul>
更多实际运用请参考:{{天体的秩序}}、{{迷糊餐厅}}、{{干物妹!小埋}}等。
参见
|