添加回 sidebar
This commit is contained in:
liuzhihang
parent
e244b2c186
commit
54f1953f4e
|
|
@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
const sidebarFn = () => {
|
||||
const $toggleMenu = document.getElementById('toggle-menu')
|
||||
const $mobileSidebarMenus = document.getElementById('sidebar-menus')
|
||||
// const $menuMask = document.getElementById('menu-mask')
|
||||
const $menuMask = document.getElementById('menu-mask')
|
||||
const $body = document.body
|
||||
|
||||
function openMobileSidebar() {
|
||||
|
|
@ -53,11 +53,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
$toggleMenu.addEventListener('click', openMobileSidebar)
|
||||
|
||||
// $menuMask.addEventListener('click', e => {
|
||||
// if ($mobileSidebarMenus.classList.contains('open')) {
|
||||
// closeMobileSidebar()
|
||||
// }
|
||||
// })
|
||||
$menuMask.addEventListener('click', e => {
|
||||
if ($mobileSidebarMenus.classList.contains('open')) {
|
||||
closeMobileSidebar()
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('resize', e => {
|
||||
if (btf.isHidden($toggleMenu)) {
|
||||
|
|
|
|||
|
|
@ -43,6 +43,235 @@
|
|||
<!-- 控制台 -->
|
||||
<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="前往敲木鱼app（iOS）" 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="前往轻节食app（iOS）" 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="前往Delspace3（mac）" 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="查看比例计app（mac）" 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="查看摸鱼app（mac）" 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&t=shop/detail&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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue