置顶公告:【置顶】关于临时开启评论区所有功能的公告(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>


更多實際運用請參考:{{天體的秩序}}、{{迷糊餐廳}}、{{乾物妹!小埋}}等。

參見