github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整 index top

This commit is contained in:
liuzhihang 2022-10-14 08:39:17 +08:00
parent e2fdde76ad
commit 7678f18d2f
6 changed files with 348 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
settings.yaml
View File

@ -17,6 +17,28 @@ spec:
label: 标题 label: 标题
placeholder: 请输入标题 placeholder: 请输入标题
help: 支持 HTML 语法，比如 <span id="site-name-icon">Hao</span>，默认为站点名称 help: 支持 HTML 语法，比如 <span id="site-name-icon">Hao</span>，默认为站点名称
- group: top
label: 顶部
formSchema:
- $formkit: radio
name: content_header
label: 首页顶部
value: true
options:
- label: 显示
value: true
- label: 隐藏
value: false
- $formkit: text
name: banners_title_big
label: Banners 大标题
placeholder: 请输入大标题
help: 支持 HTML 语法
- $formkit: text
name: banners_title_small
label: Banners 小标题
placeholder: 请输入小标题
help: 支持 HTML 语法
- group: layout - group: layout
label: 布局 label: 布局
formSchema: formSchema:

2
templates/index.html
View File

@ -278,7 +278,7 @@
<!-- 每日说说 --> <!-- 每日说说 -->
<div th:replace="modules/time-list :: time-list"></div> <div th:replace="modules/time-list :: time-list"></div>
<!-- 置顶内容 --> <!-- 置顶内容 -->
<div th:replace="modules/top-post :: top-post"></div> <div th:replace="modules/recent-top :: recent-top"></div>
</div> </div>
<main class="layout" id="content-inner"> <main class="layout" id="content-inner">
<div class="recent-posts" id="recent-posts"> <div class="recent-posts" id="recent-posts">

14
templates/modules/recent-top.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 置顶的文章-->
<div class="recent-top-post-group" id="recent-top-post-group" th:fragment="recent-top">
<div class="recent-post-top" id="recent-post-top">
<!-- banner -->
<div th:replace="modules/widgets/banner-group :: banner-group"></div>
<!-- top -->
<div th:replace="modules/widgets/top-group :: top-group"></div>
</div>
</div>
</html>

307
templates/modules/top-post.html
View File

@ -1,307 +0,0 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 置顶的文章-->
<div class="recent-top-post-group" id="recent-top-post-group" th:fragment="top-post">
<div class="recent-post-top" id="recent-post-top">
<div id="bannerGroup">
<div id="banners">
<div class="banners-title">
<div class="banners-title-big">分享设计</div>
<div class="banners-title-big">与科技生活</div>
<div class="banners-title-small">ZHHEO.COM</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="toRandomPost()"><span class="bannerText">随便逛逛</span><i
class="fas fa-arrow-right banner-righticon"></i></a></div>
<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>
</div>
<div class="topGroup">
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/1b0d95ef.html"
title="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/1b0d95ef.html&quot;)">荐</span> <img
alt="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面"
class="post_bg"
data-lazy-src="https://p.zhheo.com/eHesos21190681656557411689.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/1b0d95ef.html&quot;)"><a
class="article-title" href="p/1b0d95ef.html"
title="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面">摸鱼 for Mac -
系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/5115d869.html" title="微信表情：熊猫二憨已上线！"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/5115d869.html&quot;)">荐</span> <img
alt="微信表情：熊猫二憨已上线！"
class="post_bg"
data-lazy-src="https://p.zhheo.com/PvbpiY20190381646706601470.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/5115d869.html&quot;)"><a
class="article-title" href="p/5115d869.html"
title="微信表情：熊猫二憨已上线！">微信表情：熊猫二憨已上线！</a>
</div>
</div>
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/9df485ea.html"
title="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/9df485ea.html&quot;)">荐</span> <img
alt="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器"
class="post_bg"
data-lazy-src="https://p.zhheo.com/BDDRvO24291281640141622573.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/9df485ea.html&quot;)"><a
class="article-title" href="p/9df485ea.html"
title="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器">比例计
for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/a170ac02.html"
title="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/a170ac02.html&quot;)">荐</span> <img
alt="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换"
class="post_bg"
data-lazy-src="https://p.zhheo.com/rcVHOw24491281640158664890.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/a170ac02.html&quot;)"><a
class="article-title" href="p/a170ac02.html"
title="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换">DelSpace3 for Mac
- 文本处理工具|去空行 去空格 正则表达式替换</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/4db484b3.html"
title="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/4db484b3.html&quot;)">荐</span> <img
alt="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！"
class="post_bg"
data-lazy-src="https://p.zhheo.com/7rZ69c20991281640144589173.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/4db484b3.html&quot;)"><a
class="article-title" href="p/4db484b3.html"
title="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！">轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！</a>
</div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/2daa6a7b.html"
title="Sticker-Heo表情发布：个人博客的基础表情系列"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/2daa6a7b.html&quot;)">荐</span> <img
alt="Sticker-Heo表情发布：个人博客的基础表情系列"
class="post_bg"
data-lazy-src="https://p.zhheo.com/Kjhrny22490581621235364737.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/2daa6a7b.html&quot;)"><a
class="article-title" href="p/2daa6a7b.html"
title="Sticker-Heo表情发布：个人博客的基础表情系列">Sticker-Heo表情发布：个人博客的基础表情系列</a>
</div>
</div>
<div class="todayCard" id="todayCard"
onclick='window.open("https://www.bilibili.com/video/BV1A841147Ef/")'>
<div class="todayCard-info">
<div class="todayCard-tips">音乐推荐</div>
<div class="todayCard-title">逐星</div>
</div>
<div class="todayCard-cover"
style="background:url(https://img.zhheo.com/i/2022/09/23/632d1625aa0d7.webp) no-repeat center/cover"></div>
<div class="banner-button-group"><a class="banner-button"
onclick="window.event.cancelBubble=!0,heo.hideTodayCard()"><i
class="fas fa-circle-plus"></i><span class="banner-button-text">更多推荐</span></a>
</div>
</div>
</div>
</div>
</div>
</html>

203
templates/modules/widgets/banner-group.html Normal file
View File

@ -0,0 +1,203 @@
<!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:utext="${theme.config.top.banners_title_big}"></div>
<div class="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="toRandomPost()"><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>
</div>
</html>

108
templates/modules/widgets/top-group.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="topGroup" th:fragment="top-group">
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/1b0d95ef.html"
title="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/1b0d95ef.html&quot;)">荐</span> <img
alt="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面"
class="post_bg"
data-lazy-src="https://p.zhheo.com/eHesos21190681656557411689.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/1b0d95ef.html&quot;)"><a
class="article-title" href="p/1b0d95ef.html"
title="摸鱼 for Mac - 系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面">摸鱼 for Mac -
系统更新界面模拟器，高仿苹果macOS系统升级黑屏界面</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/5115d869.html" title="微信表情：熊猫二憨已上线！"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/5115d869.html&quot;)">荐</span> <img
alt="微信表情：熊猫二憨已上线！"
class="post_bg"
data-lazy-src="https://p.zhheo.com/PvbpiY20190381646706601470.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/5115d869.html&quot;)"><a
class="article-title" href="p/5115d869.html"
title="微信表情：熊猫二憨已上线！">微信表情：熊猫二憨已上线！</a>
</div>
</div>
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/9df485ea.html"
title="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/9df485ea.html&quot;)">荐</span> <img
alt="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器"
class="post_bg"
data-lazy-src="https://p.zhheo.com/BDDRvO24291281640141622573.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/9df485ea.html&quot;)"><a
class="article-title" href="p/9df485ea.html"
title="比例计 for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器">比例计
for Mac - 设计师的比例计算工具｜比例计算 尺寸计算 常用比例 比例计算器</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/a170ac02.html"
title="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/a170ac02.html&quot;)">荐</span> <img
alt="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换"
class="post_bg"
data-lazy-src="https://p.zhheo.com/rcVHOw24491281640158664890.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/a170ac02.html&quot;)"><a
class="article-title" href="p/a170ac02.html"
title="DelSpace3 for Mac - 文本处理工具|去空行 去空格 正则表达式替换">DelSpace3 for Mac
- 文本处理工具|去空行 去空格 正则表达式替换</a></div>
</div>
<div class="recent-post-item">
<div class="post_cover left_radius"><a href="p/4db484b3.html"
title="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/4db484b3.html&quot;)">荐</span> <img
alt="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！"
class="post_bg"
data-lazy-src="https://p.zhheo.com/7rZ69c20991281640144589173.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/4db484b3.html&quot;)"><a
class="article-title" href="p/4db484b3.html"
title="轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！">轻节食APP正式上线！快速减肥可以从今天开始，定个小目标，坚持一个月！</a>
</div>
</div>
<div class="recent-post-item">
<div class="post_cover right_radius"><a href="p/2daa6a7b.html"
title="Sticker-Heo表情发布：个人博客的基础表情系列"><span
class="recent-post-top-text"
onclick="pjax.loadUrl(&quot;/p/2daa6a7b.html&quot;)">荐</span> <img
alt="Sticker-Heo表情发布：个人博客的基础表情系列"
class="post_bg"
data-lazy-src="https://p.zhheo.com/Kjhrny22490581621235364737.png!cover"
onerror='this.onerror=null,this.src="https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"'></a>
</div>
<div class="recent-post-info" onclick="pjax.loadUrl(&quot;/p/2daa6a7b.html&quot;)"><a
class="article-title" href="p/2daa6a7b.html"
title="Sticker-Heo表情发布：个人博客的基础表情系列">Sticker-Heo表情发布：个人博客的基础表情系列</a>
</div>
</div>
<div class="todayCard" id="todayCard"
onclick='window.open("https://www.bilibili.com/video/BV1A841147Ef/")'>
<div class="todayCard-info">
<div class="todayCard-tips">音乐推荐</div>
<div class="todayCard-title">逐星</div>
</div>
<div class="todayCard-cover"
style="background:url(https://img.zhheo.com/i/2022/09/23/632d1625aa0d7.webp) no-repeat center/cover"></div>
<div class="banner-button-group"><a class="banner-button"
onclick="window.event.cancelBubble=!0,heo.hideTodayCard()"><i
class="fas fa-circle-plus"></i><span class="banner-button-text">更多推荐</span></a>
</div>
</div>
</div>
</html>