侧边栏添加Steam卡片
This commit is contained in:
1152958806@qq.com
parent
92992e9677
commit
10bf621437
|
|
@ -427,7 +427,7 @@ spec:
|
||||||
- $formkit: group
|
- $formkit: group
|
||||||
name: widgetss
|
name: widgetss
|
||||||
label: 侧边栏内容
|
label: 侧边栏内容
|
||||||
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,welcome（小板报）,music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
|
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,welcome（小板报）, steam（Steam卡片）,music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
|
||||||
value:
|
value:
|
||||||
indexWidgets:
|
indexWidgets:
|
||||||
postWidgets:
|
postWidgets:
|
||||||
|
|
@ -654,6 +654,22 @@ spec:
|
||||||
label: 深色翻页卡片
|
label: 深色翻页卡片
|
||||||
value: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
|
value: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
|
||||||
help: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
|
help: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
|
||||||
|
- $formkit: group
|
||||||
|
name: steam
|
||||||
|
label: Steam卡片
|
||||||
|
help: 文档请看：https://github.com/yuyinws/steam-card
|
||||||
|
value:
|
||||||
|
key:
|
||||||
|
children:
|
||||||
|
- $formkit: url
|
||||||
|
name: steamUrl
|
||||||
|
label: 跳转地址
|
||||||
|
value: /
|
||||||
|
- $formkit: textarea
|
||||||
|
name: cardSteam
|
||||||
|
label: 卡片
|
||||||
|
value: https://card-steam.0206.ink/card/76561198144527983/gradient1,badge,bg-game-1111460,games,screenshots,badges
|
||||||
|
help: https://card-steam.0206.ink/card/76561198144527983/gradient1,badge,bg-game-1111460,games,screenshots,badges
|
||||||
- $formkit: number
|
- $formkit: number
|
||||||
name: recentPost
|
name: recentPost
|
||||||
label: 最新文章
|
label: 最新文章
|
||||||
|
|
|
||||||
|
|
@ -294,3 +294,86 @@ ul li {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
/* 小板报 */
|
/* 小板报 */
|
||||||
|
|
||||||
|
|
||||||
|
/* Steam卡片 */
|
||||||
|
#aside-content .item-headline-steam {
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 700;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-o-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
#aside-content .item-headline-steam span {
|
||||||
|
margin-left: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#flip-steam {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: transform .3s
|
||||||
|
}
|
||||||
|
|
||||||
|
#flip-steam::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 200%;
|
||||||
|
background: linear-gradient(to right,transparent,#fff,transparent);
|
||||||
|
transform: translateX(-200%);
|
||||||
|
transition: transform .5s linear;
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
#flip-steam:hover::before {
|
||||||
|
transform: translateX(100%) skewX(-60deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
#aside-content #flip-wrapper-card #flip-steam .stimg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#aside-content #flip-wrapper-card #flip-steam .back.stimg {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.card-steam {
|
||||||
|
height:130px!important
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-steam {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
padding: 0!important;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none!important;
|
||||||
|
height: 105px;
|
||||||
|
margin-top: 0!important;
|
||||||
|
background: 0 0!important
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Steam卡片 */
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
<!-- Steam卡片 -->
|
||||||
|
<div th:fragment="steam">
|
||||||
|
<div class="item-headline-steam"><i class="fa-brands fa-steam"></i><span>Steam卡片</span></div>
|
||||||
|
|
||||||
|
<div class="card-widget card-steam"
|
||||||
|
th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.steam.steamUrl} +'\')'">
|
||||||
|
<div id="flip-wrapper-card">
|
||||||
|
<div id="flip-steam">
|
||||||
|
<div class="stimg"
|
||||||
|
th:style="'background:url('+${theme.config.sidebar.steam.cardSteam}+') center center/100% no-repeat'">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="back stimg" th:style="'background:url(' + assets_link + '/images/blank.webp) center center/100% no-repeat'"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue