halo-theme-hao/templates/modules/widgets/banner-group.html

229 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div id="bannerGroup" th:fragment="banner-group">
<!-- banners -->
<div id="banners">
<div class="banners-title">
<div class="banners-title-big"
th:if="${not #strings.isEmpty(theme.config.top.banners_title_big)}"
th:utext="${theme.config.top.banners_title_big}"></div>
<div class="banners-title-small"
th:if="${not #strings.isEmpty(theme.config.top.banners_title_small)}"
th:utext="${theme.config.top.banners_title_small}"></div>
</div>
<div class="tags-group-all">
<div class="tags-group-wrapper">
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8">
<img onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6302f0748a83b.png"
title="AfterEffect">
</div>
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63030a85d6458.png"
title="Sketch">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303102c049d1.png"
title="Docker">
</div>
<div class="tags-group-icon" style="background:#4082c3"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63030fe730a69.png"
title="Photoshop">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630310dea00f5.png"
title="FinalCutPro">
</div>
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63031127e8e2b.png"
title="Python">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630311760ca04.png"
title="Swift">
</div>
<div class="tags-group-icon" style="background:#8f55ba"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630311cf9dded.png"
title="Principle">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303121db0410.png"
title="illustrator">
</div>
<div class="tags-group-icon" style="background:#2c51db"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630312c06cdc5.png"
title="CSS3">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630312f898a1c.png"
title="JS">
</div>
<div class="tags-group-icon" style="background:#e9572b"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303132113bbb.png"
title="HTML">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/09/23/632d2d33b1e1b.webp"
title="Git">
</div>
<div class="tags-group-icon" style="background:#e65164"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/09/23/632d2e083fc9b.webp"
title="Apifox">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6302f0748a83b.png"
title="AfterEffect">
</div>
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63030a85d6458.png"
title="Sketch">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303102c049d1.png"
title="Docker">
</div>
<div class="tags-group-icon" style="background:#4082c3"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63030fe730a69.png"
title="Photoshop">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630310dea00f5.png"
title="FinalCutPro">
</div>
<div class="tags-group-icon" style="background:#fff"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/63031127e8e2b.png"
title="Python">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630311760ca04.png"
title="Swift">
</div>
<div class="tags-group-icon" style="background:#8f55ba"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630311cf9dded.png"
title="Principle">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303121db0410.png"
title="illustrator">
</div>
<div class="tags-group-icon" style="background:#2c51db"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630312c06cdc5.png"
title="CSS3">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/630312f898a1c.png"
title="JS">
</div>
<div class="tags-group-icon" style="background:#e9572b"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/08/22/6303132113bbb.png"
title="HTML">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/09/23/632d2d33b1e1b.webp"
title="Git">
</div>
<div class="tags-group-icon" style="background:#e65164"><img
onerror='this.onerror=null,this.src="https://cdn.zhheo.com/Guli/others/imgerror.png"'
src="https://img.zhheo.com/i/2022/09/23/632d2e083fc9b.webp"
title="Apifox">
</div>
</div>
</div>
</div>
<!-- 随机前往一篇文章 -->
<a id="banner-hover" onclick="randomPost()"><span class="bannerText">随便逛逛</span><i
class="fas fa-arrow-right banner-righticon"></i></a></div>
<!-- category -->
<div class="categoryGroup">
<div class="categoryItem" style="box-shadow:var(--heo-shadow-blue)">
<a class="categoryButton CB1 bikan" href="tags/%E5%BF%85%E7%9C%8B/index.html">
<span class="categoryButtonText">必看精选</span><i class="fas fa-dove"></i></a>
</div>
<div class="categoryItem" style="box-shadow:var(--heo-shadow-red)">
<a class="categoryButton remen" href="tags/%E7%83%AD%E9%97%A8/index.html">
<span class="categoryButtonText">热门文章</span><i class="fas fa-burn"></i></a>
</div>
<div class="categoryItem" style="box-shadow:var(--heo-shadow-green)">
<a class="categoryButton shiyong" href="tags/%E6%95%99%E7%A8%8B/index.html">
<span class="categoryButtonText">实用教程</span><i class="fas fa-book"></i></a>
</div>
</div>
<script th:inline="javascript">
function randomPost() {
// 随机跳转首页的一篇文章
// 后续改成跳转全站的文章,可以从 sitemap 中获取所有文章
let posts = [[${posts}]];
let datum = posts.total < posts.size ? posts.total : posts.size;
let number = Math.floor(Math.random() * datum);
console.log(number);
let post = posts.items[number];
// 当前窗口打开
window.location.href = post.status.permalink;
// window.open(post.status.permalink);
}
</script>
</div>
</html>