halo-theme-hao/templates/modules/layouts/layout.html

352 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" th:fragment="layout(content, htmlType)" xmlns:th="http://www.thymeleaf.org">
<!-- head 中自定义的 -->
<head th:replace="modules/head :: head(metas = null, links = null, scripts = ~{::head/script})">
<!-- 声明一些公共信息 -->
<script th:inline="javascript">
const GLOBAL_CONFIG = {
siteTitle : [[${site.title}]],
// 页面类型 index,page,post,tag,category
htmlType: [[${htmlType}]],
postTitle: [[${htmlType == 'post' ? post.spec.title : ''}]],
isanchor: true,
isPost: [[${htmlType == 'post'}]],
isHome: [[${htmlType == 'index'}]],
isHighlightShrink: false,
isToc: [[${htmlType == 'post'}]] && document.getElementById("card-toc"),
postUpdate: '2022-11-04 20:08:15',
Snackbar: {
chs_to_cht: "你已切换为繁体",
cht_to_chs: "你已切换为简体",
day_to_night: "你已切换为深色模式",
night_to_day: "你已切换为浅色模式",
bgLight: "#49b1f5",
bgDark: "#121212",
position: "top-center",
},
};
</script>
</head>
<body>
<!-- loading 页面 -->
<div th:replace="modules/loading-box :: loading-box"></div>
<!-- 网站背景 -->
<div id="web_bg"></div>
<!-- 控制台 -->
<div th:replace="modules/widgets/console :: console"></div>
<div id="sidebar">
<div id="menu-mask"></div>
<div id="sidebar-menus"><span class="sidebar-menu-item-title">功能</span>
<div class="sidebar-menu-item"><a class="darkmode_switchbutton menu-child" onclick="rm.switchDarkMode()"
title="显示模式切换" href="javascript:void(0);" rel="external nofollow"><i class="fas fa-moon"
style="font-size: 1rem;"></i><span>显示模式</span></a></div>
<div class="back-menu-list-groups">
<div class="back-menu-list-group">
<div class="back-menu-list-title">博客</div>
<div class="back-menu-list"><a class="back-menu-item" href="https://zhheo.com/"
rel="external nofollow" title="前往张洪Heo主页" target="_blank"><img class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/www-mini.png" /><span
class="back-menu-item-text">主页</span></a><a class="back-menu-item" href="index.html"
title="前往Blog博客主页" target="_blank"><img class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/08/31/630f01a3755aa.webp" /><span
class="back-menu-item-text">博客</span></a><a class="back-menu-item"
href="https://plog.zhheo.com/" rel="external nofollow" title="前往图集" target="_blank"><img
class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/10/08/6340fc3173131.png" /><span
class="back-menu-item-text">图片博客</span></a><a class="back-menu-item"
href="https://apps.zhheo.com/" rel="external nofollow" title="前往开发博客" target="_blank"><img
class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/10/12/634699939e5db.png" /><span
class="back-menu-item-text">开发博客</span></a></div>
<div class="back-menu-list-title">服务</div>
<div class="back-menu-list"><a class="back-menu-item" href="https://support.qq.com/product/335533"
rel="external nofollow" title="前往产品反馈" target="_blank"><img class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/10/12/63469a1036e15.png" /><span
class="back-menu-item-text">产品反馈</span></a><a class="back-menu-item"
href="wechat/index.html" title="前往公众号订阅" target="_blank"><img class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/wechat-mini.webp" /><span
class="back-menu-item-text">公众号</span></a><a class="back-menu-item"
href="https://pan.zhheo.com/" rel="external nofollow" title="前往海鸥云盘" target="_blank"><img
class="back-menu-item-icon" src="https://cdn.zhheo.com/Guli/img/pan-mini.png" /><span
class="back-menu-item-text">海鸥云</span></a><a class="back-menu-item"
href="https://img.zhheo.com/" rel="external nofollow" title="前往海鸥图床" target="_blank"><img
class="back-menu-item-icon" src="https://cdn.zhheo.com/Guli/img/lsky-mini.webp" /><span
class="back-menu-item-text">海鸥图床</span></a></div>
</div>
<div class="back-menu-list-group">
<div class="back-menu-list-title">应用</div>
<div class="back-menu-list"><a class="back-menu-item"
href="https://apps.apple.com/cn/app/%E6%95%B2%E6%9C%A8%E9%B1%BC/id6443798663"
title="前往敲木鱼appiOS" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/10/17/634cf6d6d02f5.png" /><span
class="back-menu-item-text">敲木鱼</span></a><a class="back-menu-item"
href="https://apps.apple.com/cn/app/%E8%BD%BB%E8%8A%82%E9%A3%9F/id1576166369"
title="前往轻节食appiOS" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/lightFasting-mini.png" /><span
class="back-menu-item-text">轻节食</span></a><a class="back-menu-item"
href="https://apps.apple.com/cn/app/delspace3-%E6%96%87%E6%9C%AC%E5%A4%84%E7%90%86%E5%B7%A5%E5%85%B7%E5%8E%BB%E7%A9%BA%E8%A1%8C%E5%8E%BB%E7%A9%BA%E6%A0%BC/id1586939835"
title="前往Delspace3mac" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/delSpace-mini.png" /><span
class="back-menu-item-text">DelSpace3</span></a><a class="back-menu-item"
href="https://apps.apple.com/cn/app/%E6%AF%94%E4%BE%8B%E8%AE%A1-%E8%AE%BE%E8%AE%A1%E5%B8%88%E7%9A%84%E6%AF%94%E4%BE%8B%E8%AE%A1%E7%AE%97%E5%B7%A5%E5%85%B7/id1598247700"
title="查看比例计appmac" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/proportion-mini.png" /><span
class="back-menu-item-text">比例计</span></a><a class="back-menu-item"
href="p/1b0d95ef.html" title="查看摸鱼appmac" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/touchFish-mini.png" /><span
class="back-menu-item-text">摸鱼</span></a></div>
</div>
<div class="back-menu-list-group">
<div class="back-menu-list-title">表情</div>
<div class="back-menu-list"><a class="back-menu-item" href="https://github.com/zhheo/Sticker-Heo"
title="前往Sticker-Heo项目GitHub" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/stickerHeo-mini.png" /><span
class="back-menu-item-text">Sticker-Heo</span></a><a class="back-menu-item"
href="https://sticker.weixin.qq.com/cgi-bin/mmemoticon-bin/emoticonview?oper=single&amp;t=shop/detail&amp;productid=aL2PCfwK/89qO7sF6/+I+UDhfwEjhec2ZNvdnLLJRd/OqBzHjwUqwm3ply5is1hrAMAek8PzArzYabms/g/+7rIwKPLrNPoyTaWny+axv1ho="
title="前往熊猫二憨微信表情页面" target="_blank" rel="noopener nofollow"><img
class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/pandaErHan-mini.png" /><span
class="back-menu-item-text">熊猫二憨</span></a></div>
</div>
<div class="back-menu-list-group">
<div class="back-menu-list-title">主题</div>
<div class="back-menu-list"><a class="back-menu-item" href="https://butterfly.zhheo.com/"
rel="external nofollow" title="前往美化文档" target="_blank"><img class="back-menu-item-icon"
src="https://cdn.zhheo.com/Guli/img/butterfly-mini.png" /><span
class="back-menu-item-text">美化文档</span></a><a class="back-menu-item"
href="https://blog.zhheo.com/p/bed74f41.html" title="前往TimePlus主题介绍" target="_blank"
rel="noopener nofollow"><img class="back-menu-item-icon"
src="https://img.zhheo.com/i/2022/10/20/63509631163c2.png" /><span
class="back-menu-item-text">TimePlus</span></a></div>
</div>
</div>
<div class="menus_items">
<div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow"><span>
文库</span><i class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="archives/index.html"><i
class="fa-fw fas fa-box-archive"></i><span> 文章列表</span></a></li>
<li><a class="site-page child" href="categories/index.html"><i
class="fa-fw fas fa-cube"></i><span> 全部分类</span></a></li>
<li><a class="site-page child" href="tags/index.html"><i class="fa-fw fas fa-tags"></i><span>
全部标签</span></a></li>
<li><a class="site-page child" href="essay/index.html"><i
class="fa-fw fas fa-bars-staggered"></i><span> 即刻短文</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow"><span>
专栏</span><i class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="tags/%E8%AE%BE%E8%AE%A1%E6%8A%A5%E5%91%8A/index.html"><i
class="fa-fw fas fa-swatchbook"></i><span> 设计报告</span></a></li>
<li><a class="site-page child" href="tags/Heocan/index.html"><i
class="fa-fw fas fa-object-group"></i><span> 设计分享</span></a></li>
<li><a class="site-page child" href="tags/Sketch/index.html"><i
class="fa-fw fas fa-palette"></i><span> 设计工具</span></a></li>
<li><a class="site-page child" href="tags/%E6%B7%B7%E5%89%AA/index.html"><i
class="fa-fw fas fa-scissors"></i><span> 视频混剪</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow"><span>
友链</span><i class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="moments/index.html"><i
class="fa-fw fas fa-fish-fins"></i><span> 友链鱼塘</span></a></li>
<li><a class="site-page child" href="link/index.html"><i
class="fa-fw fas fa-user-group"></i><span> 友情链接</span></a></li>
<li><a class="site-page child" href="javascript:travelling()" rel="external nofollow"><i
class="fa-fw fas fa-bus"></i><span> 宝藏博主</span></a></li>
</ul>
</div>
<div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow"><span>
我的</span><i class="fas fa-chevron-down expand"></i></a>
<ul class="menus_item_child">
<li><a class="site-page child" href="tlink/index.html"><i
class="fa-fw fas fa-screwdriver-wrench"></i><span> 在线工具</span></a></li>
<li><a class="site-page child" href="movies/index.html"><i
class="fa-fw fas fa-clapperboard"></i><span> 电影推荐</span></a></li>
<li><a class="site-page child" href="about/index.html"><i
class="fa-fw fas fa-sailboat"></i><span> 关于本站</span></a></li>
</ul>
</div>
</div><span class="sidebar-menu-item-title">标签</span>
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">
<div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div>
<div class="card-tag-cloud"><a href="tags/AfterEffects/index.html"
style="font-size: 1em; color: #d3d3d3">AfterEffects<sup>11</sup></a> <a
href="tags/Chrome/index.html" style="font-size: 1em; color: #d3d3d3">Chrome<sup>10</sup></a> <a
href="tags/Docker/index.html" style="font-size: 1em; color: #d3d3d3">Docker<sup>1</sup></a> <a
href="tags/Dribbble/index.html" style="font-size: 1em; color: #d3d3d3">Dribbble<sup>9</sup></a>
<a href="tags/FinalCutPro/index.html"
style="font-size: 1em; color: #d3d3d3">FinalCutPro<sup>5</sup></a> <a
href="tags/Heocan/index.html" style="font-size: 1em; color: #d3d3d3">Heocan<sup>21</sup></a> <a
href="tags/Heomagic/index.html" style="font-size: 1em; color: #d3d3d3">Heomagic<sup>5</sup></a>
<a href="tags/Hexo/index.html" style="font-size: 1em; color: #d3d3d3">Hexo<sup>46</sup></a> <a
href="tags/HomePod/index.html" style="font-size: 1em; color: #d3d3d3">HomePod<sup>2</sup></a> <a
href="tags/Mac/index.html" style="font-size: 1em; color: #d3d3d3">Mac<sup>53</sup></a> <a
href="tags/PHP/index.html" style="font-size: 1em; color: #d3d3d3">PHP<sup>1</sup></a> <a
href="tags/Photoshop/index.html"
style="font-size: 1em; color: #d3d3d3">Photoshop<sup>23</sup></a> <a
href="tags/Principle/index.html"
style="font-size: 1em; color: #d3d3d3">Principle<sup>2</sup></a> <a
href="tags/Python/index.html" style="font-size: 1em; color: #d3d3d3">Python<sup>9</sup></a> <a
href="tags/Sketch/index.html" style="font-size: 1em; color: #d3d3d3">Sketch<sup>77</sup></a> <a
href="tags/Sketch-Data/index.html"
style="font-size: 1em; color: #d3d3d3">Sketch-Data<sup>3</sup></a> <a
href="tags/Swift/index.html" style="font-size: 1em; color: #d3d3d3">Swift<sup>100</sup></a> <a
href="tags/SwiftUI-100days/index.html"
style="font-size: 1em; color: #d3d3d3">SwiftUI-100days<sup>48</sup></a> <a
href="tags/VI/index.html" style="font-size: 1em; color: #d3d3d3">VI<sup>10</sup></a> <a
href="tags/VLOG/index.html" style="font-size: 1em; color: #d3d3d3">VLOG<sup>2</sup></a> <a
href="tags/iOS/index.html" style="font-size: 1em; color: #d3d3d3">iOS<sup>30</sup></a> <a
href="tags/illustrator/index.html"
style="font-size: 1em; color: #d3d3d3">illustrator<sup>8</sup></a> <a
href="tags/%E4%BA%A7%E5%93%81/index.html"
style="font-size: 1em; color: #d3d3d3">产品<sup>16</sup></a> <a
href="tags/%E4%BC%98%E8%B4%A8%E6%8A%A5%E5%91%8A/index.html"
style="font-size: 1em; color: #d3d3d3">优质报告<sup>3</sup></a> <a
href="tags/%E4%BD%93%E9%AA%8C%E5%AE%98/index.html"
style="font-size: 1em; color: #d3d3d3">体验官<sup>3</sup></a> <a
href="tags/%E5%8A%9E%E5%85%AC/index.html"
style="font-size: 1em; color: #d3d3d3">办公<sup>1</sup></a> <a
href="tags/%E5%AD%97%E4%BD%93/index.html"
style="font-size: 1em; color: #d3d3d3">字体<sup>10</sup></a> <a
href="tags/%E5%B9%B2%E8%B4%A7/index.html"
style="font-size: 1em; color: #d3d3d3">干货<sup>140</sup></a> <a
href="tags/%E5%BC%80%E5%8F%91/index.html"
style="font-size: 1em; color: #d3d3d3">开发<sup>185</sup></a> <a
href="tags/%E5%BF%85%E7%9C%8B/index.html"
style="font-size: 1em; color: #d3d3d3">必看<sup>49</sup></a> <a
href="tags/%E6%95%99%E7%A8%8B/index.html"
style="font-size: 1em; color: #d3d3d3">教程<sup>263</sup></a> <a
href="tags/%E6%97%A5%E5%B8%B8/index.html"
style="font-size: 1em; color: #d3d3d3">日常<sup>28</sup></a> <a
href="tags/%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97/index.html"
style="font-size: 1em; color: #d3d3d3">更新日志<sup>7</sup></a> <a
href="tags/%E6%B7%B7%E5%89%AA/index.html"
style="font-size: 1em; color: #d3d3d3">混剪<sup>5</sup></a> <a
href="tags/%E7%83%AD%E9%97%A8/index.html"
style="font-size: 1em; color: #d3d3d3">热门<sup>50</sup></a> <a
href="tags/%E7%94%B5%E5%AD%90%E4%B9%A6/index.html"
style="font-size: 1em; color: #d3d3d3">电子书<sup>1</sup></a> <a
href="tags/%E7%BD%91%E9%A1%B5%E5%89%8D%E7%AB%AF/index.html"
style="font-size: 1em; color: #d3d3d3">网页前端<sup>47</sup></a> <a
href="tags/%E8%A1%A8%E6%83%85/index.html"
style="font-size: 1em; color: #d3d3d3">表情<sup>2</sup></a> <a
href="tags/%E8%A7%86%E9%A2%91/index.html"
style="font-size: 1em; color: #d3d3d3">视频<sup>17</sup></a> <a
href="tags/%E8%AE%BE%E8%AE%A1/index.html"
style="font-size: 1em; color: #d3d3d3">设计<sup>219</sup></a> <a
href="tags/%E8%AE%BE%E8%AE%A1%E6%8A%A5%E5%91%8A/index.html"
style="font-size: 1em; color: #d3d3d3">设计报告<sup>12</sup></a> <a
href="tags/%E8%AF%84%E6%B5%8B/index.html"
style="font-size: 1em; color: #d3d3d3">评测<sup>11</sup></a> <a
href="tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html"
style="font-size: 1em; color: #d3d3d3">读书笔记<sup>6</sup></a> <a
href="tags/%E8%BD%AF%E4%BB%B6/index.html"
style="font-size: 1em; color: #d3d3d3">软件<sup>50</sup></a> <a
href="tags/%E8%BF%90%E7%BB%B4/index.html"
style="font-size: 1em; color: #d3d3d3">运维<sup>8</sup></a> <a
href="tags/%E8%BF%90%E8%90%A5/index.html"
style="font-size: 1em; color: #d3d3d3">运营<sup>4</sup></a> <a
href="tags/%E9%97%B2%E8%81%8A/index.html"
style="font-size: 1em; color: #d3d3d3">闲聊<sup>19</sup></a> <a
href="tags/%E9%9F%B3%E4%B9%90/index.html"
style="font-size: 1em; color: #d3d3d3">音乐<sup>6</sup></a></div>
</div>
</div>
</div>
<!-- 内容 -->
<th:block th:replace="${content}"></th:block>
<!-- todo 暂时没显示,是右下角悬浮操作按钮 -->
<div id="rightside">
<div id="rightside-config-hide">
<button id="translateLink" title="简繁转换" type="button"></button>
<button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
<button id="hide-aside-btn" title="单栏和双栏切换" type="button"><i class="fas fa-arrows-alt-h"></i></button>
</div>
<div id="rightside-config-show">
<button id="rightside_config" title="设置" type="button"><i class="fas fa-cog fa-spin"></i></button>
<button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
</div>
</div>
<div th:replace="modules/right-menu :: right-menu"></div>
<div>
<script th:src="@{/assets/js/utils.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>
<script charset="utf-8" data-pjax="" th:src="@{/assets/zhheo/blogex.js}"></script>
<!-- https://instant.page/ 网站预加载, 放在 </body> 之前 -->
<script th:src="@{/assets/libs/instantpage/instantpage.min.js}" type="module"></script>
<!-- 右下角通知 https://www.polonel.com/snackbar/ -->
<!-- todo head 中有它的 css应该可以写一块并改成后台可配置的功能代码中应该还有他的 js -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
<!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
<!-- 应该是文章页分享使用 -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- todo 不知道是否可以抽到 right-menu.html 中,做到后台可配置 -->
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<!-- https://raphamorim.io/waterfall.js/ 应该是这个 还有相关的 js 代码 是否可以调整-->
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
<!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
<!--<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>-->
<script th:src="@{/assets/libs/fast-average-color/index.browser.min.js}"></script>
</div>
<div>
<script th:inline="javascript">
coverColor();
if ([[${theme.config.other.loading_box} and not ${#strings.isEmpty(theme.config.other.loading_box_img)}]]) {
// 移除加载动画
removeLoading();
}
addRightMenuClickEvent();
navTitle();
heo.topPostScroll();
heo.topCategoriesBarScroll();
heo.sayhi();
heo.addTag();
heo.stopImgRightDrag();
heo.qrcodeCreate();
heo.onlyHome();
heo.addNavBackgroundInit();
heo.reflashEssayWaterFall();
heo.addMediumInEssay();
heo.darkModeStatus();
heo.categoriesBarActive();
heo.initThemeColor();
</script>
</div>
</body>
</html>