置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:链接图组/doc

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索

简介

该模板可以生成一组链接图片组,一般用于大家族模板(条目下方导航模板)。

为照顾灵活性,该模板只会生成数个<li>,其中每个<li>都包含一个角色图片以及该角色的链接,外部需要手动包裹一组<ul>标签作为容器。

用法

该模板有两种使用方法。

单独图片

虽然不是强制规定,但请尽可能保证所有图片规格一致。

具体请参考#示例四

雪碧图

这个模板只能作用于以下格式的雪碧图:

  • 雪碧图中的小图片按角色横向排列。
  • 所有小图片大小均匀,小图片与小图片之间间距相等
  • 若有点击进入角色页面要变化的图片,要置于同一角色下方,垂直于一条直线。
样例
无切换图片

Nav-干物妹.png

有切换图片

Nav-Blend s.png

若有其他格式的雪碧图或应用情形,请单独使用{{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|古宫乃乃香}}(使用单独图片时,参见#示例五)
  • 以上参数若有不使用的请删除,否则可能导致出现错误。

示例

示例一~三均为雪碧图的用法。

示例一

Nav-ikamusume.png

<ul>{{链接图组
|image= Nav-ikamusume.png
|charas= 乌贼娘(侵略!乌贼娘)=乌贼娘,相泽荣子,相泽千鹤,齐藤渚
|start= 1
|size= 2400
|width= 157.5
|height= 188
|offsetX= 30
|offsetY= 17
|scale= 0.5
}}</ul>
  • Nav-ikamusume.png

    乌贼娘
  • Nav-ikamusume.png

    相泽荣子
  • Nav-ikamusume.png

    相泽千鹤
  • Nav-ikamusume.png

    齐藤渚

示例二

可按照需要调整角色图片顺序: Nav-天体的秩序.png

<ul>{{链接图组
|image= Nav-天体的秩序.png
|charas= 古宫乃乃香,诺艾尔(天体的秩序)=诺艾尔,椎原小春,水坂柚季,水坂凑太,户川汐音
|size= 2600
|width= 332
|height= 332
|offsetX= 30
|targetSize= 90
|blockStyle= margin:0 7px;
|诺艾尔|古宫乃乃香|水坂柚季|@space,怪兽先生|户川汐音}}</ul>

示例三

最先的雪碧图:Nav-干物妹.png

后加的角色图片:Kongou Hikari Icon.png

{{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>


更多实际运用请参考:{{天体的秩序}}、{{迷糊餐厅}}、{{干物妹!小埋}}等。

参见