模板:連結圖組
跳至導覽
跳至搜尋
簡介
該模板可以生成一組連結圖片組,一般用於大家族模板(條目下方導航模板)。
為照顧靈活性,該模板只會生成數個<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>
更多實際運用請參考:{{天體的秩序}}、{{迷糊餐廳}}、{{乾物妹!小埋}}等。
參見
|