查看“模板:图鉴导航”的源代码

<includeonly><div class="map-dh"><div class="map-dh-left">{{#if:{{{标题|}}}|{{{标题|}}}|展示模式}}</div><div class="map-dh-right">
{{#loop:i|1|{{{页面数|}}}|[[{{{链接页面{{#var:i}}|}}}|<span class="map-dh-an">{{{展示名称{{#var:i}}|{{{链接页面{{#var:i}}|}}}}}}</span>]]}}
</div></div>{{#css:
.map-dh {
width:100%;overflow:hidden;margin:10px 0px;display:table;border-radius: 4px;}
.map-dh-left {
display:table-cell;vertical-align: middle;width:110px;padding:10px;font-weight:bold;font-size:18px;background:#faf8fa;color:#846d7f;text-align:center;}
.map-dh-right {
display:table-cell;vertical-align: middle;width:calc(100% - 110px);padding:10px;background:#f3eae3cc;}
.map-dh-an {
  float:left;
  font-size:18px;
  width:fit-content;
  padding: 3px 15px 9px 15px;
  color: #6f6e74;
  margin-top:5px;
}
.map-dh-an:hover {
    cursor: pointer;
}
@media only screen and (max-width:759px){
  .map-dh {display: flex;  flex-direction: column;}
  .map-dh-left {width:100%;}
  .map-dh-right {width:100%;}
}
}}

{{#tag:bstyle|   
.map-dh-an{border-image-source: url({{filepath:导航盒按钮 未选中.png }});border-image-slice: 0% 20% 0% 20% fill;border-image-width: 0px 20px 0px 20px;color:#6f6e74;}
a.mw-selflink>span{border-image-source: url({{filepath:导航盒按钮 选中.png }}); border-image-slice: 0% 20% 0% 20% fill;border-image-width: 0px 20px 0px 20px;color:#906c6c;}
}}

</includeonly><noinclude>{{InfoBox|此模板出自原神同名模板}}[[分类:模板]]{{图鉴导航|页面数=8|链接页面1=角色图鉴|展示名称1=角色图鉴|链接页面2=角色一览|链接页面3=角色一览|链接页面4=角色一览|链接页面5=角色一览|链接页面6=角色一览|链接页面7=角色一览|链接页面8=角色一览}}</noinclude>