-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (61 loc) · 46.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="Hexo Theme Redefine"><meta name="author" content="hzihhuang"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="canonical" href="https://super-zihao.github.io/h-blog/"><meta name="robots" content="index,follow"><meta name="googlebot" content="index,follow"><meta name="revisit-after" content="1 days"><meta property="og:type" content="website"><meta property="og:title" content="Hexo"><meta property="og:url" content="https://super-zihao.github.io/h-blog/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:locale" content="zh_CN"><meta property="article:author" content="John Doe"><meta name="twitter:card" content="summary"><link rel="icon" type="image/png" href="/h-blog/./assets/images/logo.png" sizes="192x192"><link rel="apple-touch-icon" sizes="180x180" href="/h-blog/./assets/images/logo.png"><meta name="theme-color" content=""><link rel="shortcut icon" href="/h-blog/./assets/images/logo.png"><title>Yolo乀Blog</title><link rel="stylesheet" href="/h-blog/fonts/Chillax/chillax.css"><script data-swup-reload-script async src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script><script data-swup-reload-script async src="/h-blog/assets/js/mouse.js"></script><style>:root{--preloader-background-color:#fff;--preloader-text-color:#000}@media (prefers-color-scheme:dark){:root{--preloader-background-color:#202124;--preloader-text-color:#fff}}@media (prefers-color-scheme:light){:root{--preloader-background-color:#fff;--preloader-text-color:#000}}@media (max-width:600px){.ml13{font-size:2.6rem!important}}.preloader{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;position:fixed;padding:12px;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background-color:var(--preloader-background-color);z-index:1100;transition:opacity .2s ease-in-out}.ml13{font-size:3.2rem;color:var(--preloader-text-color);letter-spacing:-1px;font-weight:500;font-family:Chillax-Variable,sans-serif;text-align:center}.ml13 .word{display:inline-flex;flex-wrap:wrap;white-space:nowrap}.ml13 .letter{display:inline-block;line-height:1em}</style><div class="preloader"><script src="/h-blog/js/libs/anime.min.js"></script><h1 class="ml13">Yolo乀Blog</h1><script>var textWrapper = document.querySelector('.ml13');
// Split text into words
var words = textWrapper.textContent.trim().split(' ');
// Clear the existing content
textWrapper.innerHTML = '';
// Wrap each word and its letters in spans
words.forEach(function(word) {
var wordSpan = document.createElement('span');
wordSpan.classList.add('word');
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
textWrapper.appendChild(wordSpan);
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
});
anime.timeline({loop: true})
.add({
targets: '.ml13 .letter',
translateY: [100,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1400,
delay: (el, i) => 300 + 30 * i
}).add({
targets: '.ml13 .letter',
translateY: [0,-100],
opacity: [1,0],
easing: "easeInExpo",
duration: 1200,
delay: (el, i) => 100 + 30 * i
});
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
// If the theme status is not found in local storage, check the preferred color scheme
if (themeStatus === undefined || themeStatus === null) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
themeStatus = 'dark';
} else {
themeStatus = 'light';
}
}
// Now you can use the themeStatus variable in your code
if (themeStatus) {
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
} else {
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
document.documentElement.style.setProperty('--preloader-text-color', '#000');
}
window.addEventListener('load', function () {
hidePreloaderAfterTimeout(1000); // Hide after 1000 milliseconds once the window has loaded
});
// Backup failsafe: Hide preloader after a maximum of 5000 milliseconds, regardless of the window load event
hidePreloaderAfterTimeout(5000);
function hidePreloaderAfterTimeout(delay) {
setTimeout(function () {
var preloader = document.querySelector('.preloader');
preloader.style.opacity = '0';
setTimeout(function () {
preloader.style.display = 'none';
}, 200);
}, delay);
}</script></div><link rel="stylesheet" href="/h-blog/css/style.css"><link rel="stylesheet" href="/h-blog/assets/build/styles.css"><link rel="stylesheet" href="/h-blog/fonts/fonts.css"><link rel="stylesheet" href="/h-blog/fonts/Satoshi/satoshi.css"><script id="hexo-configurations">window.config={hostname:"super-zihao.github.io",root:"/h-blog/",language:"zh-CN"},window.theme={articles:{style:{font_size:"16px",line_height:1.5,image_border_radius:"14px",image_alignment:"center",image_caption:!1,link_icon:!0,title_alignment:"left",headings_top_spacing:{h1:"5rem",h2:"4rem",h3:"2.8rem",h4:"2.5rem",h5:"2.2rem",h6:"2rem"}},word_count:{enable:!0,count:!0,min2read:!0},author_label:{enable:!0,auto:!0,list:[]},code_block:{copy:!0,style:"mac",font:{enable:!1,family:null,url:null}},toc:{enable:!0,max_depth:3,number:!1,expand:!0,init_open:!0},copyright:{enable:!0,default:"cc_by_nc_sa"},lazyload:!0,recommendation:{enable:!0,title:"推荐阅读",limit:3,mobile_limit:2,placeholder:"/images/wallhaven-wqery6-light.webp",skip_dirs:[]}},colors:{primary:null,secondary:null,default_mode:"light"},global:{fonts:{chinese:{enable:!1,family:null,url:null},english:{enable:!1,family:null,url:null}},content_max_width:"1000px",sidebar_width:"210px",hover:{shadow:!0,scale:!0},scroll_progress:{bar:!0,percentage:!0},website_counter:{url:"https://cn.vercount.one/js",enable:!0,site_pv:!0,site_uv:!0,post_pv:!0},single_page:!0,preloader:!0,open_graph:!0,google_analytics:{enable:!1,id:null},chinese:{enable:!0},busuanzi_counter:{enable:!1,site_pv:!1,site_uv:!1}},home_banner:{enable:!0,style:"fixed",image:{light:"https://images.pexels.com/photos/290263/pexels-photo-290263.jpeg?auto=compress&cs=tinysrgb&w=1600",dark:"https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&w=1600"},title:"愿我们想要的都得到，得到的都美好。",subtitle:{text:["内心丰盈者，独行也如众","理想的生活需要一点热爱和心动","理想主义的少年永远不会向现实招安。","在人生的道路上，想哭就哭，想笑就笑吧，但是千万别忘记了赶路","喜欢就争取，的到就珍惜，错过就忘记。","你所期盼的都会稳稳妥妥的到来"],hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"},typing_speed:40,backing_speed:40,starting_delay:800,backing_delay:5e3,loop:!0,smart_backspace:!0},text_color:{light:"#fff",dark:"#d1d1b6"},text_style:{title_size:"2.8rem",subtitle_size:"1.5rem",line_height:1.2},custom_font:{enable:!1,family:null,url:null},social_links:{enable:!0,style:"default",links:{github:"https://github.com/hzihhuang",instagram:null,zhihu:null,twitter:null,email:null,"fa-solid fa-envelope":"mailto:[email protected]"},qrs:{weixin:"./assets/images/微信二维码.jpg",qq:"./assets/images/QQ二维码.jpg"}}},plugins:{feed:{enable:!1},aplayer:{enable:!0,type:"fixed",audios:[{name:"亦是此间少年",artist:"枯木逢春",url:"/h-blog/assets/backgroundMusics/亦是此间少年.mp3",cover:"https://p1.music.126.net/415A5Xt3bUegx4vyiY8dNQ==/109951164821961505.jpg?param=130y130",lrc:null},{name:"盐 (Witch’s Condiment)",artist:"沈以诚",url:"/h-blog/assets/backgroundMusics/盐.mp3",cover:"https://p1.music.126.net/gKb2PcbOKD6u89yRt_9HrQ==/109951165347972122.jpg?param=130y130"},{name:"夜色滚烫",artist:"烦烦",url:"/h-blog/assets/backgroundMusics/夜色滚烫.mp3",cover:"https://p2.music.126.net/UNQ0zGmQEhaIwh2ngGmaqw==/109951167964721730.jpg?param=177y177"}]},mermaid:{enable:!1,version:"9.3.0"}},version:"2.6.2",navbar:{auto_hide:!1,color:{left:"#f78736",right:"#367df7",transparency:35},width:{home:"1200px",pages:"1000px"},links:{Home:{path:"/",icon:"fa-regular fa-house"},"站点":{icon:"fa-regular fa-sitemap",path:"/site-collection/"},"日记本":{icon:"fa-regular fa-book",path:"/essays/"},"关于我":{icon:"fa-regular fa-user",path:"/about/"},"文章":{icon:"fa-regular fa-newspaper",submenus:{"归档":"/archives/","标签":"/tags/","分类":"/categories/"}},"其他":{icon:"fa-solid fa-link",submenus:{"组件库":"https://hzihhuang-site.github.io/h-design","工具箱":"https://hzihhuang-site.github.io/h-tools","照片墙":"/masonry/"}}},search:{enable:!1,preload:!0}},page_templates:{friends_column:2,tags_style:"blur"},home:{sidebar:{enable:!0,position:"right",first_item:"menu",announcement:"做一个温柔的人，浅浅笑，轻轻爱",show_on_mobile:!0,links:{"归档":{icon:"fa-solid fa-archive",path:"./archives"},"标签":{icon:"fa-solid fa-tags",path:"./tags"},"分类":{icon:"fa-solid fa-folder",path:"./categories"},"关于我":{icon:"fa-solid fa-user",path:"./about"}}},article_date_format:"auto",categories:{enable:!0,limit:3},tags:{enable:!0,limit:3}},footerStart:"2023/8/11 17:40:14"},window.lang_ago={second:"%s 秒前",minute:"%s 分钟前",hour:"%s 小时前",day:"%s 天前",week:"%s 周前",month:"%s 个月前",year:"%s 年前"},window.data={masonry:!0}</script><link rel="stylesheet" href="/h-blog/fontawesome/fontawesome.min.css"><link rel="stylesheet" href="/h-blog/fontawesome/brands.min.css"><link rel="stylesheet" href="/h-blog/fontawesome/solid.min.css"><link rel="stylesheet" href="/h-blog/fontawesome/regular.min.css"><meta name="generator" content="Hexo 6.3.0"></head><body><div class="progress-bar-container"><span class="scroll-progress-bar"></span> <span class="pjax-progress-bar"></span></div><main class="page-container" id="swup"><style>.home-banner-container{background:0 0!important}.home-article-item,.right-bottom-tools,.sidebar-content,.sidebar-links,.sidebar-links .links:hover,a.extend,a.page-number,footer.footer{background-color:var(--background-color-transparent-80)!important}.right-bottom-tools:hover,a.extend:hover,a.page-number:hover{background-color:var(--primary-color)!important}.home-article-sticky-label,.site-info{background-color:var(--background-color-transparent-15)!important}.home-article-sticky-label{backdrop-filter:none!important}</style><div class="home-banner-background transition-fade fixed top-0 left-0 w-screen h-screen scale-125 sm:scale-110 box-border will-change-transform bg-cover"><img src="https://images.pexels.com/photos/290263/pexels-photo-290263.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="home-banner-background" class="w-full h-full object-cover dark:hidden"> <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="home-banner-background" class="w-full h-full object-cover hidden dark:block"></div><div class="home-banner-container flex justify-center items-center transition-fade relative"><div class="content mt-8 flex flex-col justify-center items-center"><div class="description flex flex-col justify-center items-center w-screen font-medium text-center">愿我们想要的都得到，得到的都美好。<p><i id="subtitle"></i></p></div><div class="absolute bottom-0.5 flex flex-row justify-between max-w-[1340px] items-center w-full px-8 sm:px-12"><div class="flex p-3 bg-gray-300/50 dark:bg-gray-500/40 backdrop-blur-lg border border-white/20 dark:border-gray-500/30 group rounded-full cursor-pointer flex justify-center items-center aspect-square h-full shadow-redefine-flat hover:shadow-redefine-flat-hover transition-shadow" onclick="scrollToMain()"><i class="fa-solid fa-arrow-down fa-fw fa-lg group-hover:translate-y-1 transition-transform"></i></div><div class="social-contacts px-6 py-3 bg-gray-300/50 dark:bg-gray-500/40 backdrop-blur-lg border border-white/20 dark:border-gray-500/30 shadow-redefine-flat rounded-full flex flex-row gap-3 items-center"><span class="social-contact-item github"><a target="_blank" href="https://github.com/hzihhuang"><i class="fa-brands fa-fw fa-lg fa-github"></i> </a></span><span class="social-contact-item"><a target="_blank" href="mailto:[email protected]"><i class="fa-solid fa-envelope fa-fw fa-lg"></i></a></span><div class="social-links-divider vertical-separator w-[1px] h-4 bg-third-text-color mx-0.5"></div><span class="social-contact-item-qr weixin cursor-pointer group"><a target="_blank"><i class="fa-brands fa-fw fa-lg fa-weixin"></i><div class="social-qr-container absolute h-auto bg-background-color-transparent-40 border border-white/20 dark:border-gray-500/30 overflow-hidden rounded-2xl bottom-0 mb-14 right-0 invisible group-hover:visible opacity-0 group-hover:opacity-100 translate-y-0.5 group-hover:translate-y-0 transition-all"><img class="social-contacts-qr w-64" src="/h-blog/./assets/images/%E5%BE%AE%E4%BF%A1%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"></div></a></span><span class="social-contact-item-qr qq cursor-pointer group"><a target="_blank"><i class="fa-brands fa-fw fa-lg fa-qq"></i><div class="social-qr-container absolute h-auto bg-background-color-transparent-40 border border-white/20 dark:border-gray-500/30 overflow-hidden rounded-2xl bottom-0 mb-14 right-0 invisible group-hover:visible opacity-0 group-hover:opacity-100 translate-y-0.5 group-hover:translate-y-0 transition-all"><img class="social-contacts-qr w-64" src="/h-blog/./assets/images/QQ%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"></div></a></span></div></div></div><script>const scrollToMain=()=>{console.log("scroll");document.querySelector(".main-content-container").scrollIntoView({behavior:"smooth"})}</script></div><div class="main-content-container"><div class="main-content-header"><header class="navbar-container px-6 md:px-12"><div class="navbar-content has-home-banner"><div class="left"><a class="logo-image" href="/h-blog/"><img src="/h-blog/./assets/images/logo.png"> </a><a class="logo-title" href="/h-blog/"><h1>Yolo乀Blog</h1></a></div><div class="right"><div class="desktop"><ul class="navbar-list"><li class="navbar-item"><a class="active" href="/h-blog/"><i class="fa-regular fa-house fa-fw"></i> 首页</a></li><li class="navbar-item"><a href="/h-blog/site-collection/"><i class="fa-regular fa-sitemap fa-fw"></i> 站点</a></li><li class="navbar-item"><a href="/h-blog/essays/"><i class="fa-regular fa-book fa-fw"></i> 日记本</a></li><li class="navbar-item"><a href="/h-blog/about/"><i class="fa-regular fa-user fa-fw"></i> 关于我</a></li><li class="navbar-item"><a class="has-dropdown" href="#" onclick=""return" false;"><i class="fa-regular fa-newspaper fa-fw"></i> 文章 <i class="fa-solid fa-chevron-down fa-fw"></i></a><ul class="sub-menu"><li><a href="/h-blog/archives/">归档</a></li><li><a href="/h-blog/tags/">标签</a></li><li><a href="/h-blog/categories/">分类</a></li></ul></li><li class="navbar-item"><a class="has-dropdown" href="#" onclick=""return" false;"><i class="fa-solid fa-link fa-fw"></i> 其他 <i class="fa-solid fa-chevron-down fa-fw"></i></a><ul class="sub-menu"><li><a target="_blank" rel="noopener" href="https://hzihhuang-site.github.io/h-design">组件库</a></li><li><a target="_blank" rel="noopener" href="https://hzihhuang-site.github.io/h-tools">工具箱</a></li><li><a href="/h-blog/masonry/">照片墙</a></li></ul></li></ul></div><div class="mobile"><div class="icon-item navbar-bar"><div class="navbar-bar-middle"></div></div></div></div></div><div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between"><ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start"><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" href="/h-blog/"><span>首页 </span><i class="fa-regular fa-house fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full" href="/h-blog/site-collection/"><span>站点 </span><i class="fa-regular fa-sitemap fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full" href="/h-blog/essays/"><span>日记本 </span><i class="fa-regular fa-book fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full" href="/h-blog/about/"><span>关于我 </span><i class="fa-regular fa-user fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item-sub text-base my-1.5 flex flex-col w-full"><div class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary cursor-pointer text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" navbar-data-toggle="submenu-文章"><span>文章 </span><i class="fa-solid fa-chevron-right fa-sm fa-fw transition-all"></i></div><div class="flex-col items-start px-2 py-2 hidden" data-target="submenu-文章"><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" href="/h-blog/archives/">归档</a></div><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" href="/h-blog/tags/">标签</a></div><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" href="/h-blog/categories/">分类</a></div></div></li><li class="drawer-navbar-item-sub text-base my-1.5 flex flex-col w-full"><div class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary cursor-pointer text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" navbar-data-toggle="submenu-其他"><span>其他 </span><i class="fa-solid fa-chevron-right fa-sm fa-fw transition-all"></i></div><div class="flex-col items-start px-2 py-2 hidden" data-target="submenu-其他"><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" target="_blank" rel="noopener" href="https://hzihhuang-site.github.io/h-design">组件库</a></div><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" target="_blank" rel="noopener" href="https://hzihhuang-site.github.io/h-tools">工具箱</a></div><div class="drawer-navbar-item text-base flex flex-col justify-center items-start hover:underline active:underline hover:underline-offset-1 rounded-3xl"><a class="text-third-text-color text-xl" href="/h-blog/masonry/">照片墙</a></div></div></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" href="/h-blog/./archives"><span>归档</span> <i class="fa-solid fa-archive fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" href="/h-blog/./tags"><span>标签</span> <i class="fa-solid fa-tags fa-sm fa-fw"></i></a></li><li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full"><a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full active" href="/h-blog/./categories"><span>分类</span> <i class="fa-solid fa-folder fa-sm fa-fw"></i></a></li></ul><div class="statistics flex justify-around my-2.5"><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/tags"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">9</div><div class="label text-third-text-color text-sm">标签</div></a><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/categories"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">10</div><div class="label text-third-text-color text-sm">分类</div></a><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/archives"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">19</div><div class="label text-third-text-color text-sm">文章</div></a></div></div><div class="window-mask"></div></header></div><div class="main-content-body"><div class="main-content"><div class="home-content-container"><ul class="home-article-list"><li class="home-article-item"><div class="absolute top-[12px] right-[12px] text-[0.7rem] text-third-text-color rounded-medium bg-background-color-transparent-15 py-[2px] px-[10px] border border-border-color z-1 hover:text-first-text-color cursor-default"><i class="fa-regular fa-thumbtack mr-[3px] text-[0.65rem]"></i>置顶</div><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/09/01/%E5%89%8D%E7%AB%AF/js/JSDoc%E6%B3%A8%E9%87%8A/"><img src="https://img1.baidu.com/it/u=163326154,1068027404&fm=253&fmt=auto&app=138&f=JPEG" alt="JSDoc 注释" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/09/01/%E5%89%8D%E7%AB%AF/js/JSDoc%E6%B3%A8%E9%87%8A/">JSDoc 注释</a></h3><div class="home-article-content markdown-body"><p>使用 TypeScript 能够帮助我们使用很多面向对象的特性和类型系统。但是从 JavaScript 迁移到 TypeScript 也需要巨大的时间和精力去完成重构。在 VS Code 中基于 TypeScript 提供了对于 JSDoc 的支持，我们可以利用 JSDoc 来给我们的 JavaScript 代码增加注释，增强代码的可读性和可维护性。</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Fri Sep 01 2023 09:41:00 GMT+0800">2023-09-01 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/JavaScript/">JavaScript</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/JavaScript/">JavaScript</a> </li></ul></span></div><a href="/h-blog/2023/09/01/%E5%89%8D%E7%AB%AF/js/JSDoc%E6%B3%A8%E9%87%8A/">阅读全文<span class="seo-reader-text">JSDoc 注释</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div class="absolute top-[12px] right-[12px] text-[0.7rem] text-third-text-color rounded-medium bg-background-color-transparent-15 py-[2px] px-[10px] border border-border-color z-1 hover:text-first-text-color cursor-default"><i class="fa-regular fa-thumbtack mr-[3px] text-[0.65rem]"></i>置顶</div><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/04/20/%E5%90%8E%E7%AB%AF/nest/"><img src="https://img0.baidu.com/it/u=732048776,2472344964&fm=253&fmt=auto" alt="NestJS" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/04/20/%E5%90%8E%E7%AB%AF/nest/">NestJS</a></h3><div class="home-article-content markdown-body"><p>Nest (NestJS) 是一个用于构建高效、可扩展的 Node.js 服务器端应用的框架。</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Thu Apr 20 2023 16:00:47 GMT+0800">2023-04-20 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%90%8E%E7%AB%AF/">后端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%90%8E%E7%AB%AF/NodeJS/">NodeJS</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/%E6%A1%86%E6%9E%B6/">框架</a> </li><li>| <a href="/h-blog/tags/NodeJs/">NodeJs</a> </li></ul></span></div><a href="/h-blog/2023/04/20/%E5%90%8E%E7%AB%AF/nest/">阅读全文<span class="seo-reader-text">NestJS</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div class="absolute top-[12px] right-[12px] text-[0.7rem] text-third-text-color rounded-medium bg-background-color-transparent-15 py-[2px] px-[10px] border border-border-color z-1 hover:text-first-text-color cursor-default"><i class="fa-regular fa-thumbtack mr-[3px] text-[0.65rem]"></i>置顶</div><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2022/06/07/%E5%89%8D%E7%AB%AF/js/typescript/"><img src="https://img2.baidu.com/it/u=2238049457,3919805703&fm=253&fmt=auto&app=138&f=JPEG" alt="TypeScript" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2022/06/07/%E5%89%8D%E7%AB%AF/js/typescript/">TypeScript</a></h3><div class="home-article-content markdown-body"><p>TypeScript 是 JavaScript 的一个超集，主要提供了静态类型系统，在开发阶段报错，这样有利于提早发现错误，避免使用时报错。以及对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Tue Jun 07 2022 12:37:52 GMT+0800">2022-06-07 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/JavaScript/">JavaScript</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/%E8%AF%AD%E8%A8%80/">语言</a> </li><li>| <a href="/h-blog/tags/JavaScript/">JavaScript</a> </li></ul></span></div><a href="/h-blog/2022/06/07/%E5%89%8D%E7%AB%AF/js/typescript/">阅读全文<span class="seo-reader-text">TypeScript</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2024/01/12/%E5%89%8D%E7%AB%AF/css/css-nesting/"><img src="https://img0.baidu.com/it/u=2653173828,153052962&fm=253&fmt=auto&app=138&f=JPEG?w=947&h=500" alt="CSS Nesting(嵌套语法)" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2024/01/12/%E5%89%8D%E7%AB%AF/css/css-nesting/">CSS Nesting(嵌套语法)</a></h3><div class="home-article-content markdown-body"><p>CSS 新语法, 现代浏览器将开始支持原生 CSS 的嵌套功能，与 Less、Sass 等预处理器不同，CSS 嵌套功能可以直接在 CSS 文件中使用，无需再编译成 CSS 文件。</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Fri Jan 12 2024 14:48:00 GMT+0800">2024-01-12 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/CSS/">CSS</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/Style/">Style</a> </li></ul></span></div><a href="/h-blog/2024/01/12/%E5%89%8D%E7%AB%AF/css/css-nesting/">阅读全文<span class="seo-reader-text">CSS Nesting(嵌套语法)</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/09/14/%E5%89%8D%E7%AB%AF/react/auto-ratio-container/"><img src="https://p7.itc.cn/images01/20211123/ca47074f55954f32a596141cc77aeb17.jpeg" alt="自适应比例容器组件" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/09/14/%E5%89%8D%E7%AB%AF/react/auto-ratio-container/">自适应比例容器组件</a></h3><div class="home-article-content markdown-body"><p>一个能够更具元素尺寸变化并且保持自身展示比例放大缩小的 React 组件实现过程</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Thu Sep 14 2023 12:00:00 GMT+0800">2023-09-14 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/React/">React</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/%E7%BB%84%E4%BB%B6/">组件</a> </li></ul></span></div><a href="/h-blog/2023/09/14/%E5%89%8D%E7%AB%AF/react/auto-ratio-container/">阅读全文<span class="seo-reader-text">自适应比例容器组件</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/08/21/%E5%89%8D%E7%AB%AF/js/IndexedDB/"><img src="https://img1.baidu.com/it/u=163326154,1068027404&fm=253&fmt=auto&app=138&f=JPEG" alt="浏览器上的数据库 IndexedDB" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/08/21/%E5%89%8D%E7%AB%AF/js/IndexedDB/">浏览器上的数据库 IndexedDB</a></h3><div class="home-article-content markdown-body"><p>浏览器上的数据库</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Mon Aug 21 2023 16:46:09 GMT+0800">2023-08-21 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/JavaScript/">JavaScript</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a> </li><li>| <a href="/h-blog/tags/JavaScript/">JavaScript</a> </li></ul></span></div><a href="/h-blog/2023/08/21/%E5%89%8D%E7%AB%AF/js/IndexedDB/">阅读全文<span class="seo-reader-text">浏览器上的数据库 IndexedDB</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/08/18/%E5%85%B6%E4%BB%96/create_blog/"><img src="https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?auto=compress&cs=tinysrgb&h=400" alt="关于如何创建个人博客这件事。" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/08/18/%E5%85%B6%E4%BB%96/create_blog/">关于如何创建个人博客这件事。</a></h3><div class="home-article-content markdown-body"><p>响应好兄弟号召，出一篇关于这次博客的搭建过程。</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Fri Aug 18 2023 16:14:00 GMT+0800">2023-08-18 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%85%B6%E4%BB%96/">其他</a> </li><li>></li><li><a href="/h-blog/categories/%E5%85%B6%E4%BB%96/%E6%9D%82%E9%A1%B9/">杂项</a> </li></ul></span></div><a href="/h-blog/2023/08/18/%E5%85%B6%E4%BB%96/create_blog/">阅读全文<span class="seo-reader-text">关于如何创建个人博客这件事。</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/08/18/%E5%89%8D%E7%AB%AF/css/masonry/"><img src="https://img0.baidu.com/it/u=2653173828,153052962&fm=253&fmt=auto&app=138&f=JPEG?w=947&h=500" alt="Masonry 瀑布流" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/08/18/%E5%89%8D%E7%AB%AF/css/masonry/">Masonry 瀑布流</a></h3><div class="home-article-content markdown-body"><p>关于 CSS 实现瀑布流的几种方案和欠缺点…</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Fri Aug 18 2023 10:18:00 GMT+0800">2023-08-18 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/CSS/">CSS</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/Style/">Style</a> </li></ul></span></div><a href="/h-blog/2023/08/18/%E5%89%8D%E7%AB%AF/css/masonry/">阅读全文<span class="seo-reader-text">Masonry 瀑布流</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/08/17/%E5%89%8D%E7%AB%AF/css/counter/"><img src="https://img0.baidu.com/it/u=2653173828,153052962&fm=253&fmt=auto&app=138&f=JPEG?w=947&h=500" alt="CSS3 counter 计数器" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/08/17/%E5%89%8D%E7%AB%AF/css/counter/">CSS3 counter 计数器</a></h3><div class="home-article-content markdown-body"><p>CSS3 也能进行计数，在一些文章或目录类型的页面可以有奇效…</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Thu Aug 17 2023 10:28:00 GMT+0800">2023-08-17 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/CSS/">CSS</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/Style/">Style</a> </li></ul></span></div><a href="/h-blog/2023/08/17/%E5%89%8D%E7%AB%AF/css/counter/">阅读全文<span class="seo-reader-text">CSS3 counter 计数器</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li><li class="home-article-item"><div id="home-article-thumbnail" class="home-article-thumbnail relative h-[150px] overflow-hidden rounded-t-large"><a href="/h-blog/2023/08/16/%E5%89%8D%E7%AB%AF/css/clip-path/"><img src="https://img0.baidu.com/it/u=2653173828,153052962&fm=253&fmt=auto&app=138&f=JPEG?w=947&h=500" alt="CSS3 clip-path 裁剪路径" class="w-full h-full object-cover dark:brightness-75 transition-all"></a></div><div class="flex flex-col gap-5 px-7 pb-7 pt-5"><h3 class="home-article-title"><a href="/h-blog/2023/08/16/%E5%89%8D%E7%AB%AF/css/clip-path/">CSS3 clip-path 裁剪路径</a></h3><div class="home-article-content markdown-body"><p>使用 clip-path 实现一些简单的图案</p></div><div class="home-article-meta-info-container"><div class="home-article-meta-info"><span><i class="fa-solid fa-calendars"></i> <span class="home-article-date" data-date="Wed Aug 16 2023 15:40:00 GMT+0800">2023-08-16 </span></span><span class="home-article-category"><i class="fa-solid fa-folders"></i> <ul><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/">前端</a> </li><li>></li><li><a href="/h-blog/categories/%E5%89%8D%E7%AB%AF/CSS/">CSS</a> </li></ul></span><span class="home-article-tag"><i class="fa-solid fa-tags"></i> <ul><li><a href="/h-blog/tags/Style/">Style</a> </li></ul></span></div><a href="/h-blog/2023/08/16/%E5%89%8D%E7%AB%AF/css/clip-path/">阅读全文<span class="seo-reader-text">CSS3 clip-path 裁剪路径</span> <i class="fa-solid fa-angle-right"></i></a></div></div></li></ul><div class="home-paginator px-7 py-5"><div class="paginator"><span class="page-number current">1</span><a class="page-number" href="/h-blog/page/2/">2</a><a class="extend next" rel="next" href="/h-blog/page/2/"><i class="fa-regular fa-angle-right"></i></a></div></div></div><div class="comment-container pjax"></div></div><div class="home-sidebar-container"><div class="sticky-container sticky"><div class="sidebar-links"><div class="site-info"><div class="site-name">Yolo乀Blog</div><div class="announcement">做一个温柔的人，浅浅笑，轻轻爱</div></div><a class="links" href="/h-blog/./archives"><i class="fa-solid fa-archive icon-space"></i> <span class="link-name">归档</span> </a><a class="links" href="/h-blog/./tags"><i class="fa-solid fa-tags icon-space"></i> <span class="link-name">标签</span> </a><a class="links" href="/h-blog/./categories"><i class="fa-solid fa-folder icon-space"></i> <span class="link-name">分类</span> </a><a class="links" href="/h-blog/./about"><i class="fa-solid fa-user icon-space"></i> <span class="link-name">关于我</span></a></div><div class="sidebar-content" margintop><div class="avatar flex justify-center"><img src="/h-blog/./assets/images/photos/%E5%A4%A9%E6%96%87%E5%8F%B02.jpg"></div><div class="author flex flex-col justify-center my-2.5 mx-0"><div class="name">hzihhuang</div><div class="label">Lv3</div></div><div class="statistics flex justify-around my-2.5"><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/tags"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">9</div><div class="label text-third-text-color text-sm">标签</div></a><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/categories"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">10</div><div class="label text-third-text-color text-sm">分类</div></a><a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/h-blog/archives"><div class="number text-2xl sm:text-xl text-second-text-color font-semibold">19</div><div class="label text-third-text-color text-sm">文章</div></a></div></div></div></div></div><div class="main-content-footer"><footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color"><div class="info-container py-3 text-center"><div class="text-center">© <span>2023</span> - 2024 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration:0.5s;color:#f54545"></i> <a href="/h-blog/">hzihhuang</a><p class="post-count space-x-0.5"><span>共 19 篇文章 </span><span>共 38.7k 字</span></p></div><script data-swup-reload-script src="https://cn.vercount.one/js"></script><div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right"><span id="busuanzi_container_site_uv" class="lg:!block"><span class="text-sm">访问人数</span> <span id="busuanzi_value_site_uv"></span> </span><span id="busuanzi_container_site_pv" class="lg:!block"><span class="text-sm">总访问量</span> <span id="busuanzi_value_site_pv"></span></span></div><div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left"><span class="lg:block text-sm">由 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a> 驱动</span> <span class="text-sm lg:block">主题 <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.6.2</a></span></div><div>博客已运行 <span class="odometer" id="runtime_days"></span> 天 <span class="odometer" id="runtime_hours"></span> 小时 <span class="odometer" id="runtime_minutes"></span> 分钟 <span class="odometer" id="runtime_seconds"></span> 秒</div><script data-swup-reload-script>try{function odometer_init(){document.querySelectorAll(".odometer").forEach(e=>{new Odometer({el:e,format:"( ddd).dd",duration:200})})}odometer_init()}catch(e){}</script><link rel="stylesheet" href="/h-blog/assets/css/footer.css?1"></div></footer></div></div><div class="right-side-tools-container"><div class="side-tools-container"><ul class="hidden-tools-list"><li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center"><i class="fa-regular fa-magnifying-glass-plus"></i></li><li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center"><i class="fa-regular fa-magnifying-glass-minus"></i></li><li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center"><i class="fa-regular fa-moon"></i></li><li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center"><i class="fa-regular fa-arrow-down"></i></li></ul><ul class="visible-tools-list"><li class="right-bottom-tools toggle-tools-list flex justify-center items-center"><i class="fa-regular fa-cog fa-spin"></i></li><li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center"><i class="arrow-up fas fa-arrow-up"></i> <span class="percent"></span></li></ul></div></div><div class="image-viewer-container"><img src=""></div></main><script src="/h-blog/js/libs/Swup.min.js"></script><script src="/h-blog/js/libs/SwupSlideTheme.min.js"></script><script src="/h-blog/js/libs/SwupScriptsPlugin.min.js"></script><script src="/h-blog/js/libs/SwupProgressPlugin.min.js"></script><script src="/h-blog/js/libs/SwupScrollPlugin.min.js"></script><script src="/h-blog/js/libs/SwupPreloadPlugin.min.js"></script><script>const swup=new Swup({plugins:[new SwupScriptsPlugin({optin:!0}),new SwupProgressPlugin,new SwupScrollPlugin({offset:80}),new SwupSlideTheme({mainElement:".main-content-body"}),new SwupPreloadPlugin],containers:["#swup"]})</script><script src="/h-blog/js/tools/imageViewer.js" type="module"></script><script src="/h-blog/js/utils.js" type="module"></script><script src="/h-blog/js/main.js" type="module"></script><script src="/h-blog/js/layouts/navbarShrink.js" type="module"></script><script src="/h-blog/js/tools/scrollTopBottom.js" type="module"></script><script src="/h-blog/js/tools/lightDarkSwitch.js" type="module"></script><script src="/h-blog/js/layouts/categoryList.js" type="module"></script><script src="/h-blog/js/tools/codeBlock.js" type="module"></script><script src="/h-blog/js/layouts/lazyload.js" type="module"></script><script src="/h-blog/js/tools/runtime.js"></script><script src="/h-blog/js/libs/odometer.min.js"></script><link rel="stylesheet" href="/h-blog/assets/odometer-theme-minimal.css"><script src="/h-blog/js/libs/Typed.min.js"></script><script src="/h-blog/js/plugins/typed.js" type="module"></script><script src="/h-blog/js/libs/minimasonry.min.js"></script><script src="/h-blog/js/plugins/masonry.js" type="module"></script><div class="post-scripts" data-swup-reload-script><script src="/h-blog/js/tools/tocToggle.js" type="module"></script><script src="/h-blog/js/layouts/toc.js" type="module"></script><script src="/h-blog/js/plugins/tabs.js" type="module"></script></div><div id="aplayer"></div><script src="/h-blog/js/libs/APlayer.min.js"></script><script src="/h-blog/js/plugins/aplayer.js"></script></body></html>