Template:Link-box：修订间差异

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=
}}

效果：

废墟之春

废弃的都市里，满眼的初绿依然洋溢着蓬勃生机……

废弃的都市里，满眼的初绿依然洋溢着蓬勃生机……

@@ 第1行： / 第1行： @@
 <includeonly>
+<div  class="nomobile" style="display: flex; flex-wrap: wrap; column-gap: 2rem;transform: translateX(-2%) translateY(10%);">
 {{hovers}}
-[[{{{url}}}|
-<div class="hovers-fade-shallow" style="height: 90px;width: 300px;position:relative;margin-bottom:-22px;margin-left:10px;margin-right:10px;">
+[[{{{url1}}}|
-   <div style="height: 90px;width: 300px;background-color: {{#if:{{{background-color}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
+<div class="hovers-fade-shallow">
-    <div id="picture-box" style="height:90px;width:90px;position:absolute;top:0;left:0;text-align:center;overflow:hidden;">
+   <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;">
-     <img src="{{#if:{{{picture}}}|{{{picture}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" height="90px">
+    <div id="picture-box">
+     <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
     </div>
-    <div id="text-box" style="position:absolute;top:0;left:90px;widith:210px;height:90px;">
+    <div id="text-box">
-     <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text}}}|22|38}}px;left: {{#if:{{{text}}}|13|24}}px;color:black;width:190px;{{#if:{{{text}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title}}}|{{{title}}}|{{#if:{{{text}}}||{{{url}}}}}}}</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:{{{title}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text}}}</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>
    </div>
 </div>
 ]]
+[[{{{url2}}}|
+<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 id="picture-box">
+    <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
+   </div>
+   <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="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>
+  </div>
+</div>
+]]
+[[{{{url3}}}|
+<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 id="picture-box">
+    <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
+   </div>
+   <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="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>
+  </div>
+</div>
+]]
+</div>
+<div  class="mobileonly">
+{{hovers}}
+[[{{{url1}}}|
+<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 id="picture-box">
+    <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
+   </div>
+   <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="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>
+  </div>
+</div>
+]]
+[[{{{url2}}}|
+<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 id="picture-box">
+    <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
+   </div>
+   <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="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>
+  </div>
+</div>
+]]
+[[{{{url3}}}|
+<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 id="picture-box">
+    <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
+   </div>
+   <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="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>
+  </div>
+</div>
+]]
+</div>
 </includeonly>
 <noinclude>
-{{萌百:Link-box}}
+本模板旨在改善大量堆砌链接时的观感<br>
+以及提供一种通过90px*90px的图片与少量文本预览页面的方式{{ 黑幕| 剩下的玩法就看你自己发挥了~}}
+格式：(ps:请不要减少下面的内容，我也不知道为什么不输入属性的话就默认none了)
+<pre>
+{{link-box
+|url=
+|picture=
+|title=
+|text=
+|background-color=
+}}
+</pre>
+说明：
+{| class="wikitable"
+|-
+!属性
+!说明
+!补充
+|-
+|url
+|输入页面标题
+|因为换行的原因目前只支持内链
+|-
+|picture
+|输入图片链接
+|目前只支持完整链接（外链）， 萌百 内图片请选择“在媒体查看器里打开”后点击放大（一定要点一下）然后复制上方链接<br>ps:默认图片是{{color|#00000044|阿卡林}}
+|-
+|title
+|标题
+|请不要写的太长
+|-
+|text
+|正文内容
+|
+|-
+|background-color
+|背景颜色
+|默认加上86%的半透明效果
+|}
+示例：
+<pre>
+{{link-box
+|url=请问您今天要来点兔子吗
+|picture=https://i.loli.net/2020/04/22/DrmC8lw4vOqGhQY.jpg
+|title=废墟之春
+|text=废弃的都市里，满眼的初绿依然洋溢着蓬勃生机……
+|background-color=
+}}
+</pre>
+效果：
+{{link-box
+|url1=请问您今天要来点兔子吗
+|picture1=https://i.loli.net/2020/04/22/DrmC8lw4vOqGhQY.jpg
+|title1=废墟之春
+|text1=废弃的都市里，满眼的初绿依然洋溢着蓬勃生机……
+|background-color1=
+|url2= User:YEW-studio/Sandbox
+|picture2= https://img.moegirl.org.cn/common/b/bc/GTX_690.jpg
+|title2= 个人沙盒
+|text2= 其实现在只用于存放代码了...
+|background-color2=
+|url3= User:YEW-studio/插画列表
+|picture3= https://i.loli.net/2020/04/18/q7ZSInPerlVN2sC.png
+|title3= 插画列表
+|text3= 顾名思义，用来放喜欢的插画
+|background-color3=
+}}
 </noinclude>

Template:Link-box：修订间差异

2021年7月21日 (三) 12:30的最新版本

导航菜单

搜索