「Template:Link-box」：修訂間差異
跳至導覽
跳至搜尋
imported>=海豚= 無編輯摘要 |
imported>=海豚= 無編輯摘要 |
||
| （未顯示同一使用者於中間所作的 10 次修訂） | |||
| 行 1： | 行 1： | ||
<includeonly> | <includeonly> | ||
<div class="nomobile" style="display: flex; flex-wrap: wrap; column-gap: 2rem;transform: translateX(-2%) translateY( | <div class="nomobile" style="display: flex; flex-wrap: wrap; column-gap: 2rem;transform: translateX(-2%) translateY(10%);"> | ||
{{hovers}} | {{hovers}} | ||
[[{{{url1}}}| | [[{{{url1}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div> | ||
| 行 18： | 行 18： | ||
[[{{{url2}}}| | [[{{{url2}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div> | ||
| 行 32： | 行 32： | ||
[[{{{url3}}}| | [[{{{url3}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div> | ||
| 行 48： | 行 48： | ||
{{hovers}} | {{hovers}} | ||
[[{{{url1}}}| | [[{{{url1}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div> | ||
| 行 61： | 行 61： | ||
]] | ]] | ||
[[{{{url2}}}| | [[{{{url2}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div> | ||
| 行 74： | 行 74： | ||
]] | ]] | ||
[[{{{url3}}}| | [[{{{url3}}}| | ||
<div class="hovers-fade-shallow | <div class="hovers-fade-shallow"> | ||
<div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;"> | ||
<div id="picture-box | <div id="picture-box"> | ||
<img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" | <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%"> | ||
</div> | </div> | ||
<div id="text-box | <div id="text-box"> | ||
<div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div> | <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div> | ||
<div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div> | <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div> | ||
於 2021年7月21日 (三) 12:30 的最新修訂
本模板旨在改善大量堆砌連結時的觀感
以及提供一種通過90px*90px的圖片與少量文本預覽頁面的方式 剩下的玩法就看你自己發揮了~
格式：(ps:請不要減少下面的內容，我也不知道為什麼不輸入屬性的話就默認none了)
{{link-box
|url=
|picture=
|title=
|text=
|background-color=
}}
說明：
| 屬性 | 說明 | 補充 |
|---|---|---|
| url | 輸入頁面標題 | 因為換行的原因目前只支持內鏈 |
| picture | 輸入圖片連結 | 目前只支持完整連結（外鏈），萌百內圖片請選擇「在媒體查看器里打開」後點擊放大（一定要點一下）然後複製上方連結 ps:默認圖片是阿卡林 |
| title | 標題 | 請不要寫的太長 |
| text | 正文內容 | |
| background-color | 背景顏色 | 默認加上86%的半透明效果 |
示例：
{{link-box
|url=请问您今天要来点兔子吗
|picture=https://i.loli.net/2020/04/22/DrmC8lw4vOqGhQY.jpg
|title=废墟之春
|text=废弃的都市里，满眼的初绿依然洋溢着蓬勃生机……
|background-color=
}}
效果：