侧边栏添加Steam卡片
This commit is contained in:
1152958806@qq.com
parent
92992e9677
commit
10bf621437
|
|
@ -427,7 +427,7 @@ spec:
|
|||
- $formkit: group
|
||||
name: widgetss
|
||||
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:
|
||||
indexWidgets:
|
||||
postWidgets:
|
||||
|
|
@ -654,6 +654,22 @@ spec:
|
|||
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
|
||||
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
|
||||
name: recentPost
|
||||
label: 最新文章
|
||||
|
|
|
|||
|
|
@ -293,4 +293,87 @@ ul li {
|
|||
#aside-content .card-announcement .item-headline i{
|
||||
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