diff --git a/settings.yaml b/settings.yaml index 55ecdfea..b92d3935 100644 --- a/settings.yaml +++ b/settings.yaml @@ -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: 最新文章 diff --git a/templates/assets/zhheo/custom.css b/templates/assets/zhheo/custom.css index 4b7a8d7b..989fd8bb 100644 --- a/templates/assets/zhheo/custom.css +++ b/templates/assets/zhheo/custom.css @@ -293,4 +293,87 @@ ul li { #aside-content .card-announcement .item-headline i{ color: red; } -/* 小板报 */ \ No newline at end of file +/* 小板报 */ + + +/* 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卡片 */ \ No newline at end of file diff --git a/templates/modules/widgets/aside/steam.html b/templates/modules/widgets/aside/steam.html new file mode 100644 index 00000000..9d39a131 --- /dev/null +++ b/templates/modules/widgets/aside/steam.html @@ -0,0 +1,22 @@ + + + +
+
Steam卡片
+ +
+
+
+
+ +
+
+
+
+
+
+ + + \ No newline at end of file