卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top odd "
         onclick="pjax.loadUrl(&#39;/archives/1744624747454&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1744624747454" title="RAP2在线MOCK接口定义API">
                <img class="post_bg"
                     alt="RAP2在线MOCK接口定义API"
                     data-lazy-src="https://www.msirknightblog.cn/blog/static/2025/04/14/FDC6AC3D-9B1C-462E-B80F-2F369458E2B9.png?imageslim/zlevel/2"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/tools"
                              title="工具"
                              class="original">工具</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1744624747454" title="RAP2在线MOCK接口定义API"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1744624747454"
                   title="RAP2在线MOCK接口定义API">RAP2在线MOCK接口定义API</a>
                <div class="content">RAP2 可以快速在线上定义测试接口，供前端测试数据使用! http://rap2.taobao.or</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/jie-kou-gong-ju"
                           title="接口工具">
                            <span class="tags-punctuation">接口工具</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    
                    <time style="display: inline;"
                          datetime="2025-04-14T10:22:34.386442597Z"
                          title="2025-04-14创建">30天前</time>
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top even "
         onclick="pjax.loadUrl(&#39;/archives/1743297724245&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1743297724245" title="vite打包解构控制">
                <img class="post_bg"
                     alt="vite打包解构控制"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;vite打包解构控制"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1743297724245" title="vite打包解构控制"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1743297724245"
                   title="vite打包解构控制">vite打包解构控制</a>
                <div class="content">vite打包默认将打包结果统一放入assets文件夹内，如何通过打包配置，来将不同静态资源分别打包在不同文件夹内，如 js css img等!</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/vite"
                           title="Vite">
                            <span class="tags-punctuation">Vite</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          datetime="2025-03-30T01:43:48.345827542Z"
                          title="2025-03-30创建">2025-03-30</time>
                    
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top odd "
         onclick="pjax.loadUrl(&#39;/archives/1742817481897&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1742817481897" title="vue3-typescript-pro">
                <img class="post_bg"
                     alt="vue3-typescript-pro"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;vue3-typescript-pro"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1742817481897" title="vue3-typescript-pro"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1742817481897"
                   title="vue3-typescript-pro">vue3-typescript-pro</a>
                <div class="content">https://www.bilibili.com/video/BV1RUxWemEEn?spm_id_from=333.788.player.switch&amp;vd_source=eecc2c8229facae90</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/front-end-project"
                           title="前端项目">
                            <span class="tags-punctuation">前端项目</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          datetime="2025-03-24T11:58:00Z"
                          title="2025-03-24创建">2025-03-24</time>
                    
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2025/03"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  三月 2025
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2025/02"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  二月 2025
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2025/01"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  一月 2025
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">3</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
          
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/12"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  十二月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/11"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  十一月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/10"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  十月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/09"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  九月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">8</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/08"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  八月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">2</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/07"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  七月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2024/06"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  六月 2024
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">4</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
          
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2023/07"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  七月 2023
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">1</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2023/06"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  六月 2023
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">1</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
          
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2022/08"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  八月 2022
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">2</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
          
        </ul>
      </div>
    </div>
  </div>

  
  <div class="button-group">
    <div class="console-btn-item">
      <a class="darkmode_switchbutton" href="javascript:void(0);" onclick="navFn.switchDarkMode();" rel="external nofollow"
         title="显示模式切换"><i class="haofont hao-icon-moon-clear-fill" style="font-size:1rem"></i>
      </a>
    </div>
    <div class="console-btn-item" id="consoleHideAside" onclick="heo.hideAsideBtn()" title="边栏显示控制"><a
            class="asideSwitch" data-pjax-state=""><i class="haofont hao-icon-arrows-left-right"></i></a></div>
    <div class="console-btn-item on" id="consoleCommentBarrage" onclick="heo.switchCommentBarrage()" title="热评开关"><a
            class="commentBarrage" data-pjax-state=""><i class="haofont hao-icon-chat--fill"></i></a></div>

    <!--<div class="console-btn-item" id="consoleKeyboard" onclick="heo.keyboardToggle()" title="快捷键开关"><a-->
    <!--        class="keyboard-switch"><i class="fa-duotone fa-keyboard"></i>  
                    <time style="display: inline;"
                          datetime="2025-04-21T06:26:00Z"
                          title="2025-04-21创建">23天前</time>
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top even "
         onclick="pjax.loadUrl(&#39;/archives/1744888161019&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1744888161019" title="taro跨端开发">
                <img class="post_bg"
                     alt="taro跨端开发"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;taro跨端开发"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/kua-duan"
                              title="跨端"
                              class="original">跨端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1744888161019" title="taro跨端开发"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1744888161019"
                   title="taro跨端开发">taro跨端开发</a>
                <div class="content">Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 / 快手 小程序 / H5 / RN 等应用。 现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/Taro"
                           title="taro">
                            <span class="tags-punctuation">taro</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    
                    <time style="display: inline;"
                          datetime="2025-04-17T14:19:00Z"
                          title="2025-04-17创建">27天前</time>
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top odd "
         onclick="pjax.loadUrl(&#39;/archives/1744775797368&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1744775797368" title="快速入门React">
                <img class="post_bg"
                     alt="快速入门React"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;快速入门React"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1744775797368" title="快速入门React"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1744775797368"
                   title="快速入门React">快速入门React</a>
                <div class="content">react 是一个用于构建用户界面的前端框架，具有很丰富的生态工具，包括 ReactRouter AntDesign Redux Nexthttps://zh-hans.react.dev/learn/creating-a-react-app</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    
                    <time style="display: inline;"
                          datetime="2025-04-17T01:26:30.669386103Z"
                          title="2025-04-17创建">27天前</time>
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top even "
         onclick="pjax.loadUrl(&#39;/archives/1744770559516&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1744770559516" title="vue前端项目优化手段">
                <img class="post_bg"
                     alt="vue前端项目优化手段"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;vue前端项目优化手段"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1744770559516" title="vue前端项目优化手段"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1744770559516"
                   title="vue前端项目优化手段">vue前端项目优化手段</a>
                <div class="content">Vue 项目优化汇总 优化类型 优化手段 描述 Webpack Vite 首屏页面加载优化 路由懒加载 (Lazy Loading) 将路由组件分割成不同的代码块，按需加载，减少初始加载时间。 ✅ ✅ 组件按需引入 对于第三方组件库，只引入需要的组件，避免全量引入。 ✅ ✅ 图片懒加载 使用 v-l</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/qian-duan-you-hua"
                           title="前端优化">
                            <span class="tags-punctuation">前端优化</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    
                    <time style="display: inline;"
                          datetime="2025-04-16T02:33:00Z"
                          title="2025-04-16创建">28天前</time>
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章   
        </div>
    </div>
    

    



<!-- 右键菜单 -->
<div class="js-pjax">
    <div id="rightMenu">
        <div class="rightMenu-group rightMenu-small">
            <div class="rightMenu-item" id="menu-backward"><i class="haofont hao-icon-arrow-left"></i></div>
            <div class="rightMenu-item" id="menu-forward"><i class="haofont hao-icon-arrow-right"></i></div>
            <div class="rightMenu-item" id="menu-refresh"><i class="haofont hao-icon-arrow-rotate-right"></i></div>
            <div class="rightMenu-item" id="menu-top"><i class="haofont hao-icon-arrow-up"></i></div>
        </div>
        <div class="rightMenu-group rightMenu-line rightMenuPlugin">
            <div class="rightMenu-item" id="menu-copytext">
                <i class="haofont hao-icon-copy"></i>
                <span>复制选中文本</span>
            </div>
            <div class="rightMenu-item" id="menu-pastetext">
                <i class="haofont hao-icon-paste"></i>
                <span>粘贴文本</span>
            </div>
            <a class="rightMenu-item" id="menu-commenttext">
                <i class="haofont hao-icon-comment-medical"></i>
                <span>引用到评论</span>
            </a>
            <div class="rightMenu-item" id="menu-newwindow">
                <i class="haofont hao-icon-window-restore"></i>
                <span>新窗口打开</span>
            </div>
            <div class="rightMenu-item" id="menu-copylink">
                <i class="haofont hao-icon-link"></i>
                <span>复制链接地址</span>
            </div>
            <div class="rightMenu-item" id="menu-copyimg">
                <i class="haofont hao-icon-images"></i>
                <span>复制此图片</span>
            </div>
            <div class="rightMenu-item" id="menu-downloadimg">
                <i class="haofont hao-icon-download"></i>
                <span>下载此图片</span>
            </div>
            <div class="rightMenu-item" id="menu-newwindowimg" >
                <i class="haofont hao-icon-window-restore"></i>
                <span>新窗口打开图片</span>
            </div>
            <div class="rightMenu-item" id="menu-search">
                <i class="haofont hao-icon-search--line"></i>
                <span>站内搜索</span>
            </div>
            <div class="rightMenu-item" id="menu-searchBaidu">
                <i class="haofont hao-icon-baidu"></i>
                <span>百度搜索</span>
            </div>
            <div class="rightMenu-item" id="menu-music-toggle" style="">
                <i class="haofont hao-icon-play"></i>
                <span>播放音乐</span>
            </div>
            <div class="rightMenu-item" id="menu-music-back" style="">
                <i class="haofont hao-icon-backward"></i>
                <span>切换到上一首</span>
            </div>
            <div class="rightMenu-item" id="menu-music-forward" style="">
                <i class="haofont hao-icon-forward"></i>
                <span>切换到下一首</span>
            </div>
            <div class="rightMenu-item" id="menu-music-playlist"
                 style="" onclick="javascript:window.open(&#39;https://music.163.com/#/playlist?id=2018857277&#39;)">
                <i class="haofont hao-icon-radio"></i>
                <span>查看所有歌曲</span>
            </div>
            <div class="rightMenu-item" id="menu-music-copyMusicName" style="">
                <i class="haofont hao-icon-copy"></i>
                <span>复制歌名</span>
            </div>
        </div>
        <div class="rightMenu-group rightMenu-line rightMenuOther">
            <a class="rightMenu-item menu-link" id="menu-randomPost" onclick="toRandomPost()">
                <i class="haofont hao-icon-shuffle"></i>
                <span>随便逛逛</span>
            </a>
            <a class="rightMenu-item menu-link" href="../categories">
                <i class="haofont hao-icon-cube"></i>
                <span>博客分类</span>
            </a>
            <a class="rightMenu-item menu-link" href="../tags">
                <i class="haofont hao-icon-tags"></i>
                <span>文章标签</span>
            </a>
        </div>
        <!-- <div class="rightMenu-group rightMenu-line">
            <a class="rightMenu-item menu-link" href="cc/index.html">
                <i class="haofont icon-hand-holding"></i>
                <span>隐私协议</span>
            </a>
            <a class="rightMenu-item menu-link" href="cc/index.html">
                <i class="haofont icon-closed-captioning"></i>
                <span>版权协议</span>
            </a>
        </div> -->
        <div class="rightMenu-group rightMenu-line rightMenuOther">
            <div class="rightMenu-item" id="menu-copy">
                <i class="haofont hao-icon-copy"></i>
                <span>复制地址</span>
            </div>
            <div class="rightMenu-item" id="menu-commentBarrage"
                 rel="external nofollow noreferrer" draggable="false" style="display: flex;">
                <i class="haofont hao-icon-chat--fill" style="font-size: 19px;"></i>
                <span class="menu-commentBarrage-text">关闭热评</span>
            </div>
            <div class="rightMenu-item" id="menu-darkmode">
                <i class="haofont hao-icon-moon-clear-fill" style="font-size: 19px;"></i>
                <span class="menu-darkmode-text">深色模式</span>
            </div>
            <div class="rightMenu-item" id="menu-translate">
                <i class="haofont hao-icon-fanti" style="font-size: 19px;"></i>
                <span>轉為繁體</span>
            </div>
        </div>
    </div>
    <div id="rightmenu-mask"></div>
</div>


<div>
    <script src="/themes/theme-hao/assets/js/utils.js?v=1.6.0"></script>
    <script src="/themes/theme-hao/assets/js/halo.js?v=1.6.0"></script>
    <script src="/themes/theme-hao/assets/js/main.js?v=1.6.0"></script>
    <script charset="utf-8" data-pjax src="/themes/theme-hao/assets/zhheo/blogex.js?v=1.6.0"></script>
    <script src="/themes/theme-hao/assets/js/tw_cn.js?v=1.6.0"></script>
    <!-- https://instant.page/ 网站预加载， 放在 </body> 之前 -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js"
            type="module"></script>
    
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script>
    
    <!-- 右下角通知 https://www.polonel.com/snackbar/ -->
    <!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script>
    
    <div class="js-pjax">
        <!-- 动态标题 -->
        <!-- 动态标题 -->
<script>
    var leaveTitle = 'w(ﾟДﾟ)w 不要走！再看看嘛！';
    var backTitle = '♪(^∇^*)欢迎肥来！';
    var OriginTitile = "皮皮熊 - mjw ·sir blog"
    var titleTime
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            //离开当前页面时标签显示内容
            document.title = leaveTitle
            clearTimeout(titleTime)
        } else {
            //返回当前页面时标签显示内容
            document.title = backTitle + OriginTitile
            //两秒后变回正常标题
            titleTime = setTimeout(function () {
                document.title = OriginTitile
            }, 2000)
        }
    })
</script>
    </div>
    
    <!-- 评论 -->
    
        

    <div class="js-pjax">
        <script src="/themes/theme-hao/assets/js/comment/twikoo.js"></script>
    </div>
    <!-- 最近评论 -->
    <script>
        window.addEventListener('load', () => {
            const getComment = () => {
                const runTwikoo = () => {
                    twikoo.getRecentComments({
                        envId: "https://knight-twikoo.cn/",
                        region: '',
                                  <a class="site-page" href="javascript:void(0);" rel="external nofollow">
                            <span>我的</span>
                        </a>
                        
                            <ul class="menus_item_child">
                                <li>
                                    <a class="site-page child" href="/to-do">
                                        
                                        <span>待办</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/bangumis">
                                        
                                        <span>追播</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/gallery">
                                        
                                        <span>图库</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/liu-yan-ban">
                                        
                                        <span>留言板</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/online-tools">
                                        
                                        <span>工具</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/messageWall">
                                        
                                        <span>信息墙</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/1740911804816">
                                        
                                        <span>音乐</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="https://ppxiong.msirknightblog.cn/">
                                        
                                        <span>hexo版博客</span>
                                    </a>
                                </li>
                            </ul>
                        
                    
                </div>
                <div class="menus_item">
                    
                </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"></div>
            <div class="card-tag-cloud">
                <a class="tag-item" style="font-size:1em" href="/tags/typescript"
                   title="TypeScript">
                    <!-- 角标 -->
                    TypeScript<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/webpack"
                   title="Webpack">
                    <!-- 角标 -->
                    Webpack<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/node"
                   title="Node">
                    <!-- 角标 -->
                    Node<sup>2</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/vue2"
                   title="Vue2">
                    <!-- 角标 -->
                    Vue2<sup>5</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/nestjs"
                   title="NestJs">
                    <!-- 角标 -->
                    NestJs<sup></sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/ubuntu"
                   title="Ubuntu">
                    <!-- 角标 -->
                    Ubuntu<sup>3</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/flutter"
                   title="Flutter">
                    <!-- 角标 -->
                    Flutter<sup></sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/linux"
                   title="Centos">
                    <!-- 角标 -->
                    Centos<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/vue-router"
                   title="Vue-router">
                    <!-- 角标 -->
                    Vue-router<sup>0</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/zhi-yu"
                   title="治愈">
                    <!-- 角标 -->
                    治愈<sup>13</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/zhuang-xiu"
                   title="装修">
                    <!-- 角标 -->
                    装修<sup>0</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/build-tools"
                   title="构建工具">
                    <!-- 角标 -->
                    构建工具<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/qian-duan-you-hua"
                   title="前端优化">
                    <!-- 角标 -->
                    前端优化<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/vue3"
                   title="Vue3">
                    <!-- 角标 -->
                    Vue3<sup>1</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/html"
                   title="Html">
                    <!-- 角标 -->
                    Html<sup>2</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/css"
                   title="CSS">
                    <!-- 角标 -->
                    CSS<sup>3</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/docker"
                   title="Docker">
                    <!-- 角标 -->
                    Docker<sup>0</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/vite"
                   title="Vite">
                    <!-- 角标 -->
                    Vite<sup>3</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/uniapp"
                   title="Uniapp">
                    <!-- 角标 -->
                    Uniapp<sup>2</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/front-end-project"
                   title="前端项目">
                    <!-- 角标 -->
                    前端项目<sup>3</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/windows"
                   title="Windows">
                    <!-- 角标 -->
                    Windows<sup></sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/chao-cai"
                   title="炒菜">
                    <!-- 角标 -->
                    炒菜<sup>0</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/data-large-screen"
                   title="数据大屏">
                    <!-- 角标 -->
                    数据大屏<sup>2</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/react"
                   title="React">
                    <!-- 角标 -->
                    React<sup>0</sup>
                </a><a class="tag-item" style="font-size:1em" href="/tags/qian-duan"
                   title="JavaScript">
                    <!-- 角标 -->
                    JavaScript<sup>6</sup>
                </a>
            </div>
        </div>
    </div>
</div>


<!-- 左下角音乐 -->

    <!-- 音乐 -->
<div  class="needEndHide" id="nav-music" >
    <a id=               top: 0;
                left: 0;
                opacity: 1;
                position: fixed;
                z-index: -999;
                background: var(--heo-background);
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
        
        @media screen and (max-width: 1300px) {
            .global_background_img {
                display: none;
            }
        }
    
    </style>


<script>
    
    function toRandomPost() {
        // 随机跳转首页的一篇文章
        // 后续改成跳转全站的文章，可以从 sitemap 中获取所有文章
        let posts = {"page":1,"size":10,"total":62,"items":[{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"e1eec908-665a-46bb-8ac6-88e32433cde7","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2024","content.halo.run\/archive-month":"10","content.halo.run\/archive-day":"26"},"annotations":{"copyrightEnable":"true","copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"e20ba02cfce04c3a4e1e4e937739921d5f2b36e4ee931e4954ec8f24eae27936","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/last-associated-tags":"[]","content.halo.run\/last-released-snapshot":"fb9a4cad-cb95-4dc3-b819-1fa62e466592","content.halo.run\/stats":"{\"visit\":23,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","checksum\/content":"57fd5dfa66c7f26819b8dddcf107eb7cbf59b54a68551c8c488aa2e1a8fb2d4e"},"version":75,"creationTimestamp":"2024-10-26T06:34:16.805024325Z","deletionTimestamp":null},"spec":{"title":"\u524D\u7AEF\u5B66\u4E60\u8DEF\u7EBF","slug":"1729924450927","releaseSnapshot":"fb9a4cad-cb95-4dc3-b819-1fa62e466592","headSnapshot":"fb9a4cad-cb95-4dc3-b819-1fa62e466592","baseSnapshot":"e2b94b65-14ff-404a-87c7-0d5dbb11a039","owner":"ppxiong","template":"","cover":"https:\/\/www.msirknightblog.cn\/blog\/static\/2025\/01\/25\/C80AD266-73D1-410A-8DA4-F1B106748BC8.jpg?imageslim\/zlevel\/2","deleted":false,"publish":true,"publishTime":"2024-10-26T06:51:09.405139461Z","pinned":true,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":[],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2024-10-26T06:51:09.405113052Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2024-10-26T06:34:16.831776164Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1729924450927","excerpt":"","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-01-25T13:45:15.875939697Z","observedVersion":75},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":23,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"2b825f43-014e-4210-9585-51f27087b5ca","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2024","content.halo.run\/archive-month":"07","content.halo.run\/archive-day":"01"},"annotations":{"ai":"true","copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"6de9986c79fb9e1779399a4a25d6609ba9695ead1a6474b2dcda11c6af6fd811","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-tags":"[\"tag-hYuDa\"]","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/last-released-snapshot":"3cfe15e1-7e03-4cae-8f6b-e9e1f709373e","content.halo.run\/stats":"{\"visit\":183,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","checksum\/content":"f704002f0ed09414c65e2de84e6f0a834be4bb8963f5900783873750e71bacfa"},"version":216,"creationTimestamp":"2024-07-01T03:26:59.653185292Z","deletionTimestamp":null},"spec":{"title":"JS\u5E38\u7528\u5DE5\u5177\u51FD\u6570\u5C01\u88C5","slug":"1719804419484","releaseSnapshot":"3cfe15e1-7e03-4cae-8f6b-e9e1f709373e","headSnapshot":"3cfe15e1-7e03-4cae-8f6b-e9e1f709373e","baseSnapshot":"33c89ca9-9d13-468e-8b6c-d4d155b5b628","owner":"ppxiong","template":"","cover":"https:\/\/www.msirknightblog.cn\/static\/images\/front_end\/javascript\/javascript.jpeg?imageMogr2\/thumbnail\/640x640\/format\/webp\/blur\/1x0\/quality\/50","deleted":false,"publish":true,"publishTime":"2024-07-01T03:27:00Z","pinned":true,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":["tag-hYuDa"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2024-07-01T03:29:56.570357876Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2024-07-01T03:26:59.677737522Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1719804419484","excerpt":"\u968F\u673A\u751F\u621016\u8FDB\u5236\u989C\u8272 console.log(\"#\" + Math.random().toString(16).substring(2,8))\n\/\/ \u8F93\u51FA: #f9eb3a \u5B57\u8282\u5355\u4F4D\u5927\u5C0F\u8F6C\u6362 export function byteSizeTransfer( kb ){\n  let units = ","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-02-27T01:39:31.495753858Z","observedVersion":216},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-hYuDa","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":20,"creationTimestamp":"2024-06-19T10:53:42.554196850Z","deletionTimestamp":null},"spec":{"displayNam        pageSize: 20,
                        includeReply: true
                    }).then(function (res) {
                        const twikooArray = res.map(e => {
                            return {
                                'content': btf.changeContent(e.comment,150),
                                'avatar': e.avatar,
                                'nick': e.nick,
                                'url': e.url + '#' + e.id,
                                'date': new Date(e.created).toISOString()
                            }
                        })

                        saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
                        generateHtml(twikooArray)
                        document.querySelector('#newcomm') && necommHtml(twikooArray)
                    }).catch(function (err) {
                        const $dom = document.querySelector('#card-newest-comments .aside-list')
                        const $newcomm = document.querySelector('#newcomm')
                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
                        if($newcomm){
                            $newcomm.innerHTML = "无法获取评论，请确认相关配置是否正确"
                        }

                    })
                }

                if (typeof twikoo === 'object') {
                    runTwikoo()
                } else {
                    getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
                }
            }

            const generateHtml = array => {
                let result = ''

                if (array.length) {
                    for (let i = 0; i < array.length; i++) {
                        if (i == 6) {
                            break;
                        }
                        result += '<div class=\'aside-list-item\'>'

                        if (true) {
                            let name = 'src'
                            if(true){
                                name = 'data-lazy-src'
                            }
                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
                        }

                        result += `<div class='content'>
                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
                                </div>`
                    }
                } else {
                    result += '没有评论'
                }

                let $dom = document.querySelector('#card-newest-comments .aside-list')
                $dom.innerHTML = result
                window.lazyLoadInstance && window.lazyLoadInstance.update()
                window.pjax && window.pjax.refresh($dom)
            }

            const necommHtml = array => {
                let result = ''

                const pagesize = 5;
                const defaultpagesize = 5;
                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;

                if (array.length) {
                    for (let i = 0; i < array.length; i++) {

                        if (i == finalpagesize) {
                            break;
                        }
                        result += '<div class="aside-list-item">'

                        if (true) {
                            let name = 'src'
                            if(true){
                                name = 'data-lazy-src'
                            }
                            result += `
                            <a class="thumbnail" href="${array[i].url}">
                                <img alt="dasda" ${name}="${array[i].avatar}">
                            </a>
                        `
                        }

                        result += `
                        <div class="content">
                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
                            href="${array[i].url}" title="${array[i].content}">
                            ${array[i].content}
                            </a>
                            <div class="name">
                                <span>${array[i].nick} / </span>
                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
                            </div>
                        </div>
                    </div>
                  `

                    }
                } else {
                    result += '没有评论'
                }

                let $dom = document.querySelector('#newcomm')
                $dom.innerHTML = result
                window.lazyLoadInstance && window.lazyLoadInstance.update()
                window.pjax && window.pjax.refresh($dom)
            }

            const newestCommentInit = () => {
                if (document.querySelector('#card-newest-comments .aside-list')) {
                    const data = saveToLocal.get('twikoo-newest-comments')
                    if (data) {
                        generateHtml(JSON.parse(data))
                        document.querySelector('#newcomm') &&  necommHtml(JSON.parse(data))
                    } else {
                        getComment()
                    }
                }
            }

            newestCommentInit()
            document.addEventListener('pjax:complete', newestCommentInit)
        })</script>


        <script>var visitorMail = "visitor@xxx.com";</script>
    
    
    <!--音乐-->
    <script>var meting_api = "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r"; </script>
    
    <!-- 深色模式下添加粒子效果canvas -->
    <canvas id="universe" width="1312" height="880"></canvas>
    <script async="" src="/themes/theme-hao/assets/libs/canvas/dark.js"></script>
    
    <!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
    <!-- 应该是文章页分享使用 -->
    <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
    
    <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
    <script src="/themes/theme-hao/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 src="/themes/theme-hao/assets/libs/fast-average-color/index.browser.min.js"></script>
    
    <script src="/themes/theme-hao/assets/libs/view-image/view-image.min.js"></script>
    
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"
          media="all" onload="this.media='all'">
    
    <script src="/themes/theme-hao/assets/libs/aplayer/APlayer.min.js"></script>
    
    <script src="/themes/theme-hao/assets/libs/aplayer/Meting2.min.js"></script>
    
    <script src="/themes/theme-hao/assets/libs/pjax/pjax.min.js"></script>
    
    <!-- swiper 在瞬间滚动时会使用 -->
    <script data-pjax
            src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>
    
    <!-- 右键菜单 -->
    <script src="/themes/theme-hao/assets/zhheo/rightmenu.js"></script>
    
    <!-- 评论弹幕 -->
    <script data-pjax=""
            src="/themes/theme-hao/assets/zhheo/commentBarrage.js"></script>
    
    <!-- Tocbot 目录生成 start -->
    <!-- Tocbot 目录生成 start -->
<th:bloc>
    <script src="/themes/theme-hao/assets/libs/tocbot/4.18.2/tocbot.min.js"></script>
    <link href="/themes/theme-hao/assets/libs/tocbot/4.18.2/tocbot.css" rel="stylesheet">
</th:bloc>
    
    <!-- 51统计 -->
    <!-- 51统计 -->

    
    <script>
        let pjaxSelectors = ['       <a class="site-page child" target="_self" href="/tags">
                    
                    <span>标签</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/archives">
                    
                    <span>归档</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
        </div>
    

        </div>
        <div class="menus_item">

            <!-- javascript:void(0);" -->
            <a class="site-page" rel="external nofollow"
               target="_self"
               href="/links">
                <span>友链</span>
            </a>

            
            <!--递归调用-->
            
    <!-- 有子菜单则显示子菜单 -->
    

        </div>
        <div class="menus_item">

            <!-- javascript:void(0);" -->
            

            <a class="site-page" rel="external nofollow">
                <span>我的</span>
            </a>
            <!--递归调用-->
            
    <!-- 有子菜单则显示子菜单 -->
    
        <!-- 子菜单 -->
        <div class="menus_item_child">
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/to-do">
                    
                    <span>待办</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/bangumis">
                    
                    <span>追播</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/gallery">
                    
                    <span>图库</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/liu-yan-ban">
                    
                    <span>留言板</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/online-tools">
                    
                    <span>工具</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_blank" href="/messageWall">
                    
                    <span>信息墙</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/1740911804816">
                    
                    <span>音乐</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
                <a class="site-page child" target="_blank" href="https://ppxiong.msirknightblog.cn/">
                    
                    <span>hexo版博客</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
        </div>
    

        </div>
        <div class="menus_item">

            <!-- javascript:void(0);" -->
            <a class="site-page" rel="external nofollow"
               href="/about">
                <span>关于</span>
            </a>

            
            <!--递归调用-->
            
    <!-- 有子菜单则显示子菜单 -->
    

        </div>

    </div>
</div>

        <!-- 导航栏右侧 -->
        <!-- 导航栏菜单栏 -->
<div id="nav-right">

    <!-- 功能都需要添加开关 -->

    <!-- 随机前往一个开往项目网站 -->
    <div class="nav-button only-home" id="travellings_button" title="随机前往一个开往项目网站">
        <a class="site-page" href="https://www.travellings.cn/go.html"  rel="external nofollow"
           title="随机前往一个开往项目网站">
            <i class="haofont hao-icon-eicon_train-line"></i>
        </a>
    </div>

    <div class="nav-button" id="randomPost_button">
        <a class="site-page" href="javascript:void(0);" onclick="toRandomPost()" title="随机文章">
            <i class="haofont hao-icon-signal-tower-fill"></i>
        </a>
    </div>

    <!-- 切换模式 -->
    <div class="nav-button" id="darkmode_button">
        <a class="console_switchbutton" href="javascript:void(0);"  onclick="navFn.switchDarkMode();" rel="external nofollow"
           title="切换模式 - 日夜交替，黑白互换。">
            <i class="haofont hao-icon-moon-clear-fill" style="font-size: 1rem;"></i>
        </a>
    </div>

    <!-- 搜索使用搜索插件 -->
    <div class="nav-button" id="search-button">
        <a class="site-page social-icon search" href="javascript:SearchWidget.open();" rel="external nofollow"
           title="站内搜索">
            <i class="haofont hao-icon-search--line"></i>
        </a>
    </div>

    
    <div class="nav-button" id="nav-console">
        <a class="console_switchbutton" href="javascript:void(0);" onclick="heo.showConsole()" rel="external nofollow"
           title="显示中控台">
            <i class="haofont hao-icon-dashboard"></i>
        </a>
    </div>

    <div class="nav-button" id="nav-totop" onclick="btf.scrollToDest(0,500)">
        <a class="totopbtn">
            <i class="haofont hao-icon-arrow-up" style="font-size: 1rem;"></i><span id="percent">0</span>
        </a>
    </div>

    <div id="toggle-menu">
        <a class="site-page">
            <i class="haofont hao-icon-bars"></i>
        </a>
    </div>
</div>


    </div>
</nav>
            <!-- 问候语 -->
            <!-- 第一屏 -->

    <div id="greetingBox"></div>
    <style>
        #greetingBox {
            position: fixed;
            top: 10px;
            left: 15%;
            width: 400px;
            text-align: center;
            z-index: 10000;
            pointer-events: none
        }

        #greeting {
            display: inline-block;
            position: relative;
            opacity: 0;
            top: -110px;
            padding: 5px 40px;
            border-radius: 50px;
            background-color: #fff;
            color: #000;
            font-size: small;
            transition: .5s;
            box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
        }

        #greeting.shown {
            opacity: 1;
            top: 0
        }
    </style>
    <script>
        (() => {
            const greeting = [{"realNode":{"greeting":"\u665A\u5B89\uD83D\uDE34","start_time":0,"end_time":5}},{"realNode":{"greeting":"\u65E9\u4E0A\u597D\u9E2D\uD83D\uDC4B, \u795D\u4F60\u4E00\u5929\u597D\u5FC3\u60C5\uFF01","start_time":6,"end_time":9}},{"realNode":{"greeting":"\u4E0A\u5348\u597D\uD83D\uDC4B, \u72B6\u6001\u5F88\u597D\uFF0C\u9F13\u52B1\u4E00\u4E0B","start_time":10,"end_time":10}},{"realNode":{"greeting":"11\u70B9\u591A\u5566, \u5728\u575A\u6301\u4E00\u4E0B\u5C31\u5403\u996D\u5566\uFF5E","start_time":11,"end_time":11}},{"realNode":{"greeting":"\u5348\u5B89\uD83D\uDC4B, \u5B9D\u8D1D","start_time":12,"end_time":14}},{"realNode":{"greeting":"\uD83C\uDF08\u5145\u5B9E\u7684\u4E00\u5929\u8F9B\u82E6\u5566\uFF01","start_time":14,"end_time":18}},{"realNode":{"gre     <a href="/categories/mian-shi-ti">面试题</a>
            </div>

            <div class="category-bar-item"
                 id="治愈">
                <a href="/categories/zhi-yu">治愈</a>
            </div>

            <div class="category-bar-item"
                 id="摄影">
                <a href="/categories/she-ying">摄影</a>
            </div>

            <div class="category-bar-item"
                 id="菜肴">
                <a href="/categories/cai-yao">菜肴</a>
            </div>

            <div class="category-bar-item"
                 id="工具">
                <a href="/categories/tools">工具</a>
            </div>

            <div class="category-bar-item"
                 id="装修">
                <a href="/categories/zhuang-xiu">装修</a>
            </div>

        
    </div>
    <!-- 目录条，这里使用和 category-bar 同样的 css -->

    <a class="category-bar-more" href="/categories">更多</a>
    
    

</div>
                
                
    
    <!-- card，需要添加在没有图片时使用随机图片 -->
    <div class="recent-post-item col2 top odd pinned-post-item"
         onclick="pjax.loadUrl(&#39;/archives/1729924450927&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1729924450927" title="前端学习路线">
                <img class="post_bg"
                     alt="前端学习路线"
                     data-lazy-src="https://www.msirknightblog.cn/blog/static/2025/01/25/C80AD266-73D1-410A-8DA4-F1B106748BC8.jpg?imageslim/zlevel/2"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    <span class="sticky-warp sticky">置顶</span></span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1729924450927" title="前端学习路线"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1729924450927"
                   title="前端学习路线">前端学习路线</a>
                <div class="content"></div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          datetime="2024-10-26T06:51:09.405139461Z"
                          title="2024-10-26创建">2024-10-26</time>
                    
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top even pinned-post-item"
         onclick="pjax.loadUrl(&#39;/archives/1719804419484&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1719804419484" title="JS常用工具函数封装">
                <img class="post_bg"
                     alt="JS常用工具函数封装"
                     data-lazy-src="https://www.msirknightblog.cn/static/images/front_end/javascript/javascript.jpeg?imageMogr2/thumbnail/640x640/format/webp/blur/1x0/quality/50"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    <span class="sticky-warp sticky">置顶</span></span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1719804419484" title="JS常用工具函数封装"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1719804419484"
                   title="JS常用工具函数封装">JS常用工具函数封装</a>
                <div class="content">随机生成16进制颜色 console.log(&quot;#&quot; + Math.random().toString(16).substring(2,8))
// 输出: #f9eb3a 字节单位大小转换 export function byteSizeTransfer( kb ){
  let units = </div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/qian-duan"
                           title="JavaScript">
                            <span class="tags-punctuation">JavaScript</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          datetime="2024-07-01T03:27:00Z"
                          title="2024-07-01创建">2024-07-01</time>
                    
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    <div class="recent-post-item col2 top odd "
         onclick="pjax.loadUrl(&#39;/archives/1745216409748&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1745216409748" title="electron 打包vue项目到桌面端">
                <img class="post_bg"
                     alt="electron 打包vue项目到桌面端"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;electron 打包vue项目到桌面端"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/qian-duan"
                              title="前端"
                              class="original">前端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1745216409748" title="electron 打包vue项目到桌面端"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1745216409748"
                   title="electron 打包vue项目到桌面端">electron 打包vue项目到桌面端</a>
                <div class="content">https://segmentfault.com/a/1190000039197022?sort=newest#item-3-6</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                   -->
        
    </div>
    <div class="recent-post-item col2 top even "
         onclick="pjax.loadUrl(&#39;/archives/1741959358551&#39;)">
        <div class="post_cover left_radius">
            <a href="/archives/1741959358551" title="uniapp-小兔鲜项目">
                <img class="post_bg"
                     alt="uniapp-小兔鲜项目"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;uniapp-小兔鲜项目"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2">
            </a>
        </div>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <div class="recent-post-info-top-tips">
                    </span>
                    <!-- 类别非空时 -->
                    
                        <span href="/categories/kua-duan"
                              title="跨端"
                              class="original">跨端</span>
                    
                    <!--                    <span class="lastestpost">最新</span>-->
                    <a class="unvisited-post" href="/archives/1741959358551" title="uniapp-小兔鲜项目"
                       data-pjax-state="">未读</a>
                </div>
                <a class="article-title"
                   href="/archives/1741959358551"
                   title="uniapp-小兔鲜项目">uniapp-小兔鲜项目</a>
                <div class="content">项目技术栈 项目搭建 HbuilderX HbuilderX 是DClude官方开发的一款Idea编辑器，通过HbuilderX工具，可以和方便的去开发小程序、H5以及APP等发布预览功能! 下载HbuilderX</div>
            </div>
            
            <div class="article-meta-wrap">
                <!-- tag -->
                
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/uniapp"
                           title="Uniapp">
                            <span class="tags-punctuation">Uniapp</span>
                        </a><a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           href="/tags/front-end-project"
                           title="前端项目">
                            <span class="tags-punctuation">前端项目</span>
                        </a>
                    </span>
                
                <!-- 创建时间 -->
                <span class="post-meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          datetime="2025-03-14T14:13:00Z"
                          title="2025-03-14创建">2025-03-14</time>
                    
                    
                </span>
            </div>
        
        </div>
        
        <!-- 文章卡片擦亮效果 -->
        
    </div>
    
    <!-- 分页 -->
    <nav id="pagination">
    <div class="pagination">

        <!-- 页码按钮 -->
        

        
            
            
        
            
            
        
            <span class="page-number current">1</span>
            
        
            
            <a class="page-number" href="/page/2"
               onclick="scrollToPost()">2</a>
        
            
            <a class="page-number" href="/page/3"
               onclick="scrollToPost()">3</a>
        

        
            <span class="space">…</span>
            <a class="page-number"
               href="/page/7"
               onclick="scrollToPost()">7</a>
        
        <!-- 翻页按钮 -->
        

        <a class="extend next"
           rel="next" href="/page/2"
           onclick="scrollToPost()">
            <div class="pagination_tips_next">下页</div>
            <i class="haofont hao-icon-chevron-right fa-fw"></i>
        </a>
        <div class="toPageGroup">
            <input id="toPageText" maxlength="3" title="跳转到指定页面"
                   oninput="value=value.replace(/[^0-9]/g,'')"
                   onkeyup="if (this.value === '0') this.value = ''">
            <a id="toPageButton" onclick="heo.toPage();"><i class="haofont hao-icon-angles-right"></i>
            </a>
        </div>

        
        <script>
            function scrollToPost() {
            }
        </script>

    </div>
</nav>



            
            </div>
            <div class="aside-content" id="aside-content">

    <!-- 侧栏部件，不包含 toc 则直接遍历 -->
    
        
            
                
                    <!-- 侧边栏自我介绍 -->

<div class="card-widget card-info" >

    <!-- 默认 -->
    
        <!-- 描述信息 -->
        <div class="card-content" style="background-image: url(https://www.msirknightblog.cn/blog/static/2024/10/26/994024D1-EA56-4674-ACEA-B9DED3A7F370.jpeg);">
            <div class="card-info-avatar is-center">
                <div class="author-info__top-group">
                    <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
                    </div>
                    <img class="avatar-img"
                         src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&amp;refer=http___img.alicdn.webp">
                </div>
                <div class="author-info__name">皮皮熊</div>
                
                <div class="author-info__description"></div>
            </div>
        </div>

        <!-- 跳转信息 -->
        <div class="banner-button-group">
            <a class="banner-button" href="/about">
                <i class="haofont hao-icon-circle-arrow-right"></i>
                <span class="banner-button-text">了解更多</span>
            </a>
        </div>

        

        <style>
            /* 社交按钮 */
            #aside-content .card-info #card-info-btn {
                display: none;
            }

            #aside-content .card-info .card-info-social-icons {
                margin: 0;
                padding-top: 10px;
                display: flex;
                justify-content: flex-start;
                flex-direction: row;
                flex-wrap: wrap;
                cursor: pointer;
                position: absolute;
                bottom: 1rem;
                left: 1rem;
            }

            #aside-content .card-info .card-info-social-icons .social-icon {
                margin: 0;
                margin-right: 8px;
            }

            #aside-content .card-info .card-info-social-icons i {
                background: var(--heo-white-op);
                color: var(--heo-white);
                font-size: 1.2rem;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
            }

            #aside-content .card-info .card-info-social-icons i:hover {
                background: var(--heo-white-op);
                transform: scale(1.1);
                color: var(--heo-white);
                box-shadow: none;
            }

            #aside-content .card-info .banner-button {
                height: 40px;
                width: 124px;
                border-radius: 20px;
                justify-content: center;
            }

            @media screen and (min-width: 1300px) {
                #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white);
                }

                [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white);
                }
            }

            #aside-content .card-info img {
                width: 28px;
                righ return
                    link.onload = link.onreadystatechange = null
                    resolve()
                }
                document.head.appendChild(link)
            })

            win.activateDarkMode = function () {
                document.documentElement.setAttribute('data-theme', 'dark')
                document.documentElement.classList.add('color-scheme-dark')
                heo.initThemeColor()
            }
            win.activateLightMode = function () {
                document.documentElement.setAttribute('data-theme', 'light')
                document.documentElement.classList.remove('color-scheme-dark')
                heo.initThemeColor()
            }
            const t = saveToLocal.get('theme')

            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
            const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
            const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
            const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

            if (t === undefined) {
                if (isLightMode) activateLightMode()
                else if (isDarkMode) activateDarkMode()
                else if (isNotSpecified || hasNoSupport) {
                    const now = new Date()
                    const hour = now.getHours()
                    const isNight = hour <= 6 || hour >= 18
                    isNight ? activateDarkMode() : activateLightMode()
                }
                window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
                    if (saveToLocal.get('theme') === undefined) {
                        e.matches ? activateDarkMode() : activateLightMode()
                    }
                })
            } else if (t === 'light') activateLightMode()
            else activateDarkMode()

            if("system" === 'dark')
                activateDarkMode()
            if("system" === 'light')
                activateLightMode()

            const asideStatus = saveToLocal.get('aside-status')
            if (asideStatus !== undefined) {
                if (asideStatus === 'hide') {
                    document.documentElement.classList.add('hide-aside')
                } else {
                    document.documentElement.classList.remove('hide-aside')
                }
            }
        })(window)
    </script>

    <!-- 动态加载条 -->
    <script data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"
            src="/themes/theme-hao/assets/libs/pace/pace.min.js">
    </script>

    <!-- 复制 https://githubfast.com/zenorocha/clipboard.js -->
    <script src="/themes/theme-hao/assets/libs/clipboard/clipboard.min.js"></script>

    <!-- 关于统计-->
    <script src="/themes/theme-hao/assets/libs/countup/countup.js"></script>

    <!-- icon图标 -->
    <link rel="stylesheet" href="/themes/theme-hao/assets/icon/iconfont.css?v=1.6.0">

    <!-- 声明一些公共信息 -->
<script id="site-config">
    var GLOBAL_CONFIG = {
        // 页面类型 index,page,post,tag,category
        htmlType: "index",
        postTitle: "",
        isPost: false,
        isHome: true,
        copyright: undefined,
        lightbox: 'fancybox',
        lazyload: {
            enable: true,
            error: "\/themes\/theme-hao\/assets\/images\/404.gif"
        },
        isFriendLinksInFooter: false,
        loadingBox: true,
        loadProgressBar: true,
        navMusicEnable: true,
        isMusic: false,
        helloText: ["\uD83E\uDD16\uFE0F \u6570\u7801\u79D1\u6280\u7231\u597D\u8005"," \uD83D\uDD0D \u5206\u4EAB\u4E0E\u70ED\u5FC3\u5E2E\u52A9"," \uD83C\uDFE0 \u667A\u80FD\u5BB6\u5C45\u5C0F\u80FD\u624B"," \uD83D\uDD28 \u8BBE\u8BA1\u5F00\u53D1\u4E00\u6761\u9F99"," \uD83E\uDD1D \u4E13\u4FEE\u4EA4\u4E92\u4E0E\u8BBE\u8BA1"," \uD83C\uDFC3 \u811A\u8E0F\u5B9E\u5730\u884C\u52A8\u6D3E"," \uD83E\uDDF1 \u56E2\u961F\u5C0F\u7EC4\u53D1\u52A8\u673A"," \uD83D\uDCA2 \u58EE\u6C49\u4EBA\u72E0\u8BDD\u4E0D\u591A"],
        profileStyle: "default",
        rightMenuEnable: true,
        date_suffix: {
            just: '刚刚',
            min: '分钟前',
            hour: '小时前',
            day: '天前',
            month: '个月前'
        },
        Snackbar: {
            chs_to_cht: "你已切换为繁体",
            cht_to_chs: "你已切换为简体",
            day_to_night: "你已切换为深色模式",
            night_to_day: "你已切换为浅色模式",
            bgLight: "#425AEF",
            bgDark: "#4171d2",
            position: "top-center",
        },
        translate: {
            defaultEncoding: 2,
            translateDelay: 0,
            msgToTraditionalChinese: "繁",
            msgToSimplifiedChinese: "简",
            rightMenuMsgToTraditionalChinese: "轉為繁體",
            rightMenuMsgToSimplifiedChinese: "转为简体"
        },
        prism: {
            enable: true,
            enable_title: true,
            enable_hr: false,
            enable_line: true,
            enable_copy: true,
            enable_expander: true,
            prism_limit: Number("300") + 30,
            enable_height_limit: true
        },
        source: {
            power: {
                powerLink: "\/",
                showNum: 3
            },
            links: {
                linksUrl: "\/links",
                linksNum: 3,
            },
            jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
            justifiedGallery: {
                js: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js',
                css: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.css'
            },
            fancybox: {
                js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
                css: '/null'
            },
            comments: {
                use: "Twikoo",
                maxBarrage: "5",
                barrageTime: 4000,
                mailMd5: "c0a399d8db53bb8adb441926df0f35de",
                lazyload: false,
                textarea: "el-textarea__inner"
            },
            post: {
                dynamicBackground: true
            },
            tool: {
                switch: true
            },
            postAi: {
                ai: "",
                randomNum: 3,
                basicWordCount: 1000,
                btnLink: "https://afdian.net/item/f18c2e08db4411eda2f25254001e7c00",
                gptName: "ppxiong",
                modeName: "tianli",
                switchBtn: false,
                keys: "xxxx",
                Referers: "http://8.140.26.203:8086/",
            },
            img: {
                src: "data-lazy-src"
            },
            twikoo: {
                js: "\/themes\/theme-hao\/assets\/libs\/twikoo\/twikoo.all.min.js",
                twikooUrl: "https://knight-twikoo.cn/",
                accessToken: "8aa24539bf324829b0d843ae646b386e",
            },
            artalk: {
                js: "\/themes\/theme-hao\/assets\/libs\/artalk\/Artalk.js",
                css: "\/themes\/theme-hao\/assets\/libs\/artalk\/Artalk.css",
                artalkUrl: "",
                siteName: "",
            },
            waline: {
                js: "https:\/\/cdn.cbd.int\/@waline\/client@2.15.7\/dist\/waline.js",
                serverURL: "",
                locale: "{'placeholder': '\u6B22\u8FCE\u8BC4\u8BBA', 'sofa': '\u6765\u53D1\u8BC4\u8BBA\u5427~1'}"
            },
            footer: {
                default_enable: true
            },
            about: {
                rewardList: [],
                rewardAmount: 10
            }
        }
    };

</script>




    
    <!--  解决 katex pjax问题 -->
    
    <script src="/themes/theme-hao/assets/js/custom.js?v=1.6.0"></script>
    
        
    
    <!-- Open Graph Start -->
    <meta property="og:site_name" content="皮皮熊" />
    <meta property="og:type" content="website" />
    <meta property= title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img src="/themes/theme-hao/assets/images/icons/illustrator.png"
                             title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img src="/themes/theme-hao/assets/images/icons/CSS3.png"
                             title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img src="/themes/theme-hao/assets/images/icons/JS.png"
                             title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img src="/themes/theme-hao/assets/images/icons/HTML.png"
                             title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img src="/themes/theme-hao/assets/images/icons/Git.webp"
                             title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img src="/themes/theme-hao/assets/images/icons/Apifox.webp"
                             title="Apifox">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img src="/themes/theme-hao/assets/images/icons/AfterEffect.png"
                             title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/Sketch.png"
                             title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img src="/themes/theme-hao/assets/images/icons/Docker.png"
                             title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img src="/themes/theme-hao/assets/images/icons/Photoshop.png"
                             title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/FinalCutPro.png"
                             title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/Python.png"
                             title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img src="/themes/theme-hao/assets/images/icons/Swift.png"
                             title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img src="/themes/theme-hao/assets/images/icons/Principle.png"
                             title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img src="/themes/theme-hao/assets/images/icons/illustrator.png"
                             title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img src="/themes/theme-hao/assets/images/icons/CSS3.png"
                             title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img src="/themes/theme-hao/assets/images/icons/JS.png"
                             title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img src="/themes/theme-hao/assets/images/icons/HTML.png"
                             title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img src="/themes/theme-hao/assets/images/icons/Git.webp"
                             title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img src="/themes/theme-hao/assets/images/icons/Apifox.webp"
                             title="Apifox">
                    </div>
                </div>
            </div>

            <!--  banners 使用默认值-->
            
        </div>
        <div class="banners-title">
            <div class="banners-title-big">皮皮熊</div><div class="banners-title-big">可爱小熊</div>
            <div class="banners-title-small">更多信息请关注 GitHub</div>
        </div>
        <div class="banners-link">
            <a class="banners-link-btn blb-hot" href="/about">
                <i class="haofont hao-icon-book"></i>
                
                <div class="banners-link-title">必看</div>
            </a>
            <a class="banners-link-btn blb-top" href="/">
                <i class="haofont hao-icon-fire"></i>
                
                <div class="banners-link-title">热门</div>
            </a>
        </div>
    </div>

    <!-- category -->
    <div class="categoryGroup">
        
            <div class="categoryItem">
                <a class="categoryButton CB1 bikan" href="/about">
                    <span class="categoryButtonText">必看</span>
                    <i class="haofont hao-icon-book"></i>
                    
                </a>
            </div>
            <div class="categoryItem">
                <a class="categoryButton remen" href="/">
                    <span class="categoryButtonText">热门</span>
                    <i class="haofont hao-icon-fire"></i>
                    
                </a>
            </div>
        
    </div>
    
        <style>
            a.categoryButton.bikan {
                background: linear-gradient(to right, #358bff, #15c6ff);
                background-size: 200%;
            }

            a.categoryButton.remen {
                background: linear-gradient(to right, #ff6655, #ffbf37);
                background-size: 200%;
            }
            [data-theme=dark] a.categoryButton.bikan {
                background: linear-gradient(to right, #0653b8, #2fcbff);
                background-size: 200%;
            }

            [data-theme=dark] a.categoryButton.remen {
                background: linear-gradient(to right, #e22a16, #da980c);
                background-size: 200%;
            }

            .banners-link-btn.blb-hot {
                background: linear-gradient(to right, #358bff, #15c6ff);
                background-size: 200%
            }

            .banners-link-btn.blb-hot:hover,
            .banners-link-btn.blb-top:hover {
                background-position: 100% 0;
                cursor: pointer;
                color: var(--heo-white)
            }

            .banners-link-btn.blb-top {
                background: linear-gradient(to right, #ff6655, #ffbf37);
                background-size: 20"nav-music-hoverTips" onclick="heo.musicToggle()" accesskey="m">播放音乐</a>
    <div id="console-music-bg"></div><meting-js id="2018857277" server="netease" type="playlist" mutex="true"
                                                preload="none" theme="var(--heo-main)" data-lrctype="0" order="random"></meting-js>

</div>


<!-- 内容 -->

    
    <div class="page" id="body-wrap">
        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav class="show" id="nav">
    <div id="nav-group">

        <!-- 导航栏左侧 -->
        <!-- 导航栏左侧 -->
<div id="blog_name" >

    
        <!-- 菜单栏左侧按钮，没有配置时，则不展示-->
        <div class="back-home-button" tabindex="-1">

            <i class="back-home-button-icon haofont hao-icon-apps-fill" style="font-size: 1rem"></i>
            <div class="back-menu-list-groups">
                <div class="back-menu-list-group">
                    <!-- 菜单必须有子项才会展示 -->
                    

                </div>
                <div class="back-menu-list-group">
                    <!-- 菜单必须有子项才会展示 -->
                    
                        <div class="back-menu-list-title">文库</div>
                        <div class="back-menu-list">
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/categories">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">分类</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/tags">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">标签</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/archives">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">归档</span>
                                </a>
                            
                        </div>
                    

                </div>
                <div class="back-menu-list-group">
                    <!-- 菜单必须有子项才会展示 -->
                    

                </div>
                <div class="back-menu-list-group">
                    <!-- 菜单必须有子项才会展示 -->
                    
                        <div class="back-menu-list-title">我的</div>
                        <div class="back-menu-list">
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/to-do">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">待办</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/bangumis">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">追播</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/gallery">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">图库</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/liu-yan-ban">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">留言板</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/online-tools">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">工具</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/messageWall">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">信息墙</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_self" href="/1740911804816">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">音乐</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="https://ppxiong.msirknightblog.cn/">
                                    <!-- icon 预留 -->
                                    
                                    <span class="back-menu-item-text">hexo版博客</span>
                                </a>
                            
                        </div>
                    

                </div>
                <div class="back-menu-list-group">
                    <!-- 菜单必须有子项才会展示 -->
                    

                </div>
            </div>
        </div>
    
    <!-- 返回主页 -->
    <!-- 这里可以指定使用什么作为图标，默认使用站点名称 -->
    <a href="/" id="site-name" title="返回博客主页">
        <span>皮皮熊</span>
    </a>
</div>

        <div id="page-name-mask">
            <div id="page-name" >
                <a id="page-name-text" onclick="btf.scrollToDest(0,500)">皮皮熊 - mjw ·sir blog</a>
            </div>
        </div>

        <!-- 导航栏中间 -->
        <div id="menus">

    <div class="menus_items">

        <!-- 第一层仅展示使用，不做跳转 -->
        <div class="menus_item">

            <!-- javascript:void(0);" -->
            <a class="site-page" rel="external nofollow"
               href="/">
                <span>首页</span>
            </a>

            
            <!--递归调用-->
            
    <!-- 有子菜单则显示子菜单 -->
    

        </div>
        <div class="menus_item">

            <!-- javascript:void(0);" -->
            

            <a class="site-page" rel="external nofollow">
                <span>文库</span>
            </a>
            <!--递归调用-->
            
    <!-- 有子菜单则显示子菜单 -->
    
        <!-- 子菜单 -->
        <div class="menus_item_child">
            <div class="recursion_menus_item">
                <a class="site-page child" target="_self" href="/categories">
                    
                    <span>分类</span>
                </a>
                <!--递归调用-->
                
    <!-- 有子菜单则显示子菜单 -->
    

            </div>
            <div class="recursion_menus_item">
         "og:title" content="皮皮熊" />
    <meta property="og:url" content="http://8.140.26.203:8086" />
    
        <meta property="og:description" content="皮皮熊" />
        <meta property="og:image" content="https://www.msirknightblog.cn/static/images/blog/bg.jpg-webp" />
    
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="皮皮熊" />
    <meta name="twitter:url" content="http://8.140.26.203:8086" />
    
        <meta name="twitter:description" content="皮皮熊" />
        <meta name="twitter:image" content="https://www.msirknightblog.cn/static/images/blog/bg.jpg-webp" />
    

    <!-- Open Graph End -->


    

<link rel="stylesheet" type="text/css" href="https://www.msirknightblog.cn/blog/static/assets/css/hao-sytle-custom.css" />
<style>
  .card-widget .card-content{
    background-position-x: 65%;
  }
  #post .columns{
    margin-top: 15px;
  }
  #post .columns .column{
    padding: 10px 30px;
  }
  [data-theme=light] #post .columns > .column{
    box-shadow: var(--heo-shadow-black);
    border-radius: 15px;
  }
  [data-theme=dark] #post .columns > .column{
    box-shadow: var(--heo-shadow-white);
    border-radius: 15px;
  }
  
</style>
<meta name="generator" content="Halo 2.20.16"/><!-- plugin-comment-widget start -->
<script src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js?version=2.4.0"></script>
<link rel="stylesheet" href="/plugins/PluginCommentWidget/assets/static/style.css?version=2.4.0" />
<!-- plugin-comment-widget end -->
<!-- PluginSearchWidget start -->
<script src="/plugins/PluginSearchWidget/assets/static/search-widget.iife.js?version=1.6.2" async></script>
<link rel="stylesheet" href="/plugins/PluginSearchWidget/assets/static/style.css?version=1.6.2" />
<!-- PluginSearchWidget end -->
<link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/swiper@8/swiper-bundle.min.css">
<script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/swiper@8/swiper-bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/custom/customEle.css?version=1.0.1" />
<script src="/plugins/plugin-blog-hao/assets/static/custom/bloghaoTag.js?version=1.0.1" type="text/javascript"></script>
<script data-pjax src="/plugins/plugin-blog-hao/assets/static/custom/swipperExecute.js?version=1.0.1" type="text/javascript" defer></script>
      <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reset.css" />
      <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reveal.css" />
      <link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/theme/black.css" id="theme">
      <script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/dist/reveal.js"></script>
<script data-pjax src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/markdown/markdown.js" defer></script>
<link rel="stylesheet" href="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/monokai.css">
<script src="/plugins/plugin-blog-hao/assets/static/libs/revealjs/plugin/highlight/highlight.js" data-pjax=""></script>
<script data-pjax src="/plugins/plugin-blog-hao/assets/static/custom/slideExecute.js?version=1.0.1" type="text/javascript" defer></script>
<script data-pjax="" type="text/javascript" defer>
    document.addEventListener("DOMContentLoaded", () => {
        new executeSlideInit();
    })
    document.addEventListener("pjax:complete", () => {
        new executeSlideInit();
    })
</script>
    <script data-pjax type="text/javascript">
        function contentParse(content) {
            let parsed = content;
            parsed = parsed.replaceAll("#url", window.location.href);
            parsed = parsed.replaceAll("#site", window.location.host);
            return parsed;
        }
        window.addEventListener("copy", (event) => {
            let clipboard = event.clipboardData || window.clipboardData
            let clipboardText = window.getSelection().toString()
            if (!clipboard || clipboardText.length <= 10) {
                return;
            }else if (clipboardText !== "") {
                event.preventDefault()
                clipboard.setData("text/plain", clipboardText + contentParse(" 请遵循站内知识共享协议,出处：#url；站点：#site"))
            }
        })
    </script>
<!-- plugin-editor-hyperlink-card start -->
<script defer src="/plugins/editor-hyperlink-card/assets/static/hyperlink-card.iife.js?version=1.0.3"></script>
<link rel="stylesheet" href="/plugins/editor-hyperlink-card/assets/static/var.css?version=1.0.3" />
<!-- plugin-editor-hyperlink-card end -->
<link rel="icon" href="/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&refer=http___img.alicdn.webp" />
</head>

<body>

<!-- loading 页面 -->
<!-- loading页面 -->

    <style type="text/css">
        #loading-box {
            -webkit-user-select: none;
        }

        #loading-box .loading-bg {
            display: flex;
            width: 100%;
            height: 100%;
            position: fixed;
            background: var(--heo-card-bg);
            z-index: 1999;
            opacity: 1;
            transition: 0.2s;
            pointer-events: all;
            animation: showLoading 0.3s 0s backwards;
        }

        #loading-box.loaded .loading-bg {
            pointer-events: none;
            transition: 0.2s;
            animation: hideLoading 0.3s 0s forwards;
        }

        #loading-box .loading-img {
            width: 100px;
            margin: auto;
            animation-duration: 0.2s;
            animation-name: loadingAction;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        #loading-box .loading-image-dot {
            width: 30px;
            height: 30px;
            background: #6bdf8f;
            position: absolute;
            border-radius: 50%;
            border: 6px solid #fff;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(18px, 24px);
            -moz-transform: translate(18px, 24px);
            -o-transform: translate(18px, 24px);
            -ms-transform: translate(18px, 24px);
            transform: translate(18px, 24px);
        }

        @keyframes loadingAction {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.6;
            }
        }

        @keyframes hideLoading {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        @keyframes showLoading {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
    <div id="loading-box" onclick="heo.hideLoading()">
        <div class="loading-bg">
            <img class="loading-img" style="border-radius: 50%;" src="https://www.msirknightblog.cn/blog/static/2024/12/07/C7949578-835B-4C45-AA9F-FDADF37F3374.gif?imageslim/zlevel/2">
            <div class="loading-image-dot"></div>
        </div>
    </div>
    <script>
        var preloader = {
            endLoading: () => {
                //- document.body.style.overflow = 'auto';
                document.getElementById('loading-box').classList.add("loaded")
            },
            initLoading: () => {
                //- document.body.style.overflow = '';
                document.getElementById('loading-box').classList.remove("loaded")
            }
        }
        window.addEventListener('load', preloader.endLoading())
        setTimeout(function () {
            preloader.endLoading();
        }, 3000)
    </script>




<!-- 网站背景 -->
<div id="web_bg">
    <div>
        <img class="global_background_img"
             src=""
        />
        
    </div>
</div>


    <style>
        @media screen and (min-width: 1300px) {
            .global_background_img {
                width: 100%;
                height: 100%;
 .959908727Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF\u4F18\u5316","slug":"qian-duan-you-hua","color":"#499c57","cover":""},"status":{"permalink":"\/tags\/qian-duan-you-hua","visiblePostCount":1,"postCount":1,"observedVersion":2},"postCount":1}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":5,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"ca000f2d-865f-41c7-b95e-db9c07cb2321","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"04","content.halo.run\/archive-day":"14"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"a0dde035c9177354a9a485e6ba667e1a606b135b778283d421c515a08a04d1a4","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-CCALc\"]","content.halo.run\/last-associated-tags":"[\"tag-nObNx\"]","content.halo.run\/last-released-snapshot":"2c2f224f-b4dc-4bd2-a7a1-1a71dc22b7bc","checksum\/content":"ec4826809fcd68e6ed977a832bdbe01d9bfbf946a0b7fb6d7b6c7d804bcffdb0","content.halo.run\/stats":"{\"visit\":2,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}"},"version":42,"creationTimestamp":"2025-04-14T09:59:08.672633246Z","deletionTimestamp":null},"spec":{"title":"RAP2\u5728\u7EBFMOCK\u63A5\u53E3\u5B9A\u4E49API","slug":"1744624747454","releaseSnapshot":"2c2f224f-b4dc-4bd2-a7a1-1a71dc22b7bc","headSnapshot":"2c2f224f-b4dc-4bd2-a7a1-1a71dc22b7bc","baseSnapshot":"e1e09c34-6f60-4d69-be03-d82419429ff6","owner":"ppxiong","template":"","cover":"https:\/\/www.msirknightblog.cn\/blog\/static\/2025\/04\/14\/FDC6AC3D-9B1C-462E-B80F-2F369458E2B9.png?imageslim\/zlevel\/2","deleted":false,"publish":true,"publishTime":"2025-04-14T10:22:34.386442597Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-CCALc"],"tags":["tag-nObNx"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-04-14T10:22:34.386430444Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-04-14T09:59:08.690789829Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1744624747454","excerpt":"RAP2 \u53EF\u4EE5\u5FEB\u901F\u5728\u7EBF\u4E0A\u5B9A\u4E49\u6D4B\u8BD5\u63A5\u53E3\uFF0C\u4F9B\u524D\u7AEF\u6D4B\u8BD5\u6570\u636E\u4F7F\u7528! http:\/\/rap2.taobao.or","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-14T10:23:16.281178681Z","observedVersion":42},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-CCALc","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":3,"creationTimestamp":"2025-04-14T10:20:57.616488922Z","deletionTimestamp":null},"spec":{"displayName":"\u5DE5\u5177","slug":"tools","description":"","cover":"","template":"","postTemplate":"","priority":0,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/tools","postCount":1,"visiblePostCount":1},"postCount":1}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-nObNx","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":4,"creationTimestamp":"2025-04-14T10:22:18.029014788Z","deletionTimestamp":null},"spec":{"displayName":"\u63A5\u53E3\u5DE5\u5177","slug":"jie-kou-gong-ju","color":"#0bcdf4","cover":""},"status":{"permalink":"\/tags\/jie-kou-gong-ju","visiblePostCount":1,"postCount":1,"observedVersion":2},"postCount":1}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":2,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"e8587cde-e9e4-4582-b162-9f72d865952d","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"03","content.halo.run\/archive-day":"30"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"dba2985baade5fbcd58907ee7a76da5fd1c35593161388d4ee1072f5c0eff986","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-tags":"[\"tag-YqBmF\"]","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/stats":"{\"visit\":8,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"5f4ecd0a-4e27-40a9-aae5-198674cc6f02","checksum\/content":"1333b3d20d4fecfe4c04ea16f6a0684b97c86fdbfe8ec23adfb92bed15084a59"},"version":55,"creationTimestamp":"2025-03-30T01:22:05.415549009Z","deletionTimestamp":null},"spec":{"title":"vite\u6253\u5305\u89E3\u6784\u63A7\u5236","slug":"1743297724245","releaseSnapshot":"5f4ecd0a-4e27-40a9-aae5-198674cc6f02","headSnapshot":"5f4ecd0a-4e27-40a9-aae5-198674cc6f02","baseSnapshot":"2f3cb2a4-fa28-488b-9018-aa0b9aafeca5","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-03-30T01:43:48.345827542Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":["tag-YqBmF"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-03-30T01:43:48.345816088Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-03-30T01:22:05.784379515Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1743297724245","excerpt":"vite\u6253\u5305\u9ED8\u8BA4\u5C06\u6253\u5305\u7ED3\u679C\u7EDF\u4E00\u653E\u5165assets\u6587\u4EF6\u5939\u5185\uFF0C\u5982\u4F55\u901A\u8FC7\u6253\u5305\u914D\u7F6E\uFF0C\u6765\u5C06\u4E0D\u540C\u9759\u6001\u8D44\u6E90\u5206\u522B\u6253\u5305\u5728\u4E0D\u540C\u6587\u4EF6\u5939\u5185\uFF0C\u5982 js css img\u7B49!","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-03-30T01:55:14.131898959Z","observedVersion":55},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/p0%
            }
        </style>

    

</div>

        <!-- top -->
        <!-- 推荐文章 -->
<div class="topGroup" id="topGroup">
    <div class="recent-post-group">
        <div class="recent-post-item">

            <div class="post_cover left_radius">
                <a href="/archives/1729924450927" title="前端学习路线">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1729924450927&#39;)">荐</span>
                    <img class="post_bg"
                         alt="前端学习路线" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://www.msirknightblog.cn/blog/static/2025/01/25/C80AD266-73D1-410A-8DA4-F1B106748BC8.jpg?imageslim/zlevel/2" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1729924450927" title="前端学习路线">前端学习路线</a>
            </div>
        </div>
        <div class="recent-post-item">

            <div class="post_cover right_radius">
                <a href="/archives/1719804419484" title="JS常用工具函数封装">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1719804419484&#39;)">荐</span>
                    <img class="post_bg"
                         alt="JS常用工具函数封装" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://www.msirknightblog.cn/static/images/front_end/javascript/javascript.jpeg?imageMogr2/thumbnail/640x640/format/webp/blur/1x0/quality/50" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1719804419484" title="JS常用工具函数封装">JS常用工具函数封装</a>
            </div>
        </div>
        <div class="recent-post-item">

            <div class="post_cover left_radius">
                <a href="/archives/1745216409748" title="electron 打包vue项目到桌面端">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1745216409748&#39;)">荐</span>
                    <img class="post_bg"
                         alt="electron 打包vue项目到桌面端" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;electron 打包vue项目到桌面端" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1745216409748" title="electron 打包vue项目到桌面端">electron 打包vue项目到桌面端</a>
            </div>
        </div>
        <div class="recent-post-item">

            <div class="post_cover right_radius">
                <a href="/archives/1744888161019" title="taro跨端开发">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1744888161019&#39;)">荐</span>
                    <img class="post_bg"
                         alt="taro跨端开发" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;taro跨端开发" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1744888161019" title="taro跨端开发">taro跨端开发</a>
            </div>
        </div>
        <div class="recent-post-item">

            <div class="post_cover left_radius">
                <a href="/archives/1744775797368" title="快速入门React">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1744775797368&#39;)">荐</span>
                    <img class="post_bg"
                         alt="快速入门React" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;快速入门React" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1744775797368" title="快速入门React">快速入门React</a>
            </div>
        </div>
        <div class="recent-post-item">

            <div class="post_cover right_radius">
                <a href="/archives/1744770559516" title="vue前端项目优化手段">
                    <span class="recent-post-top-text" onclick="pjax.loadUrl(&#39;/archives/1744770559516&#39;)">荐</span>
                    <img class="post_bg"
                         alt="vue前端项目优化手段" src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                         data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;vue前端项目优化手段" />
                </a>
            </div>
            <div class="recent-post-info">
                <a class="article-title" href="/archives/1744770559516" title="vue前端项目优化手段">vue前端项目优化手段</a>
            </div>
        </div>
        <!-- 自定义的文章右上角的推荐文章 -->
        
    </div>

    <!-- 今日推荐 -->
    <div class="todayCard" id="todayCard" onclick="javascript:window.open(&#39;/messageWall&#39;)">
        <div class="todayCard-info">
            <div class="todayCard-tips">今日推荐</div>
            <div class="todayCard-title">皮皮熊</div>
        </div>
        <div class="todayCard-cover"
             style="background:url(https://www.msirknightblog.cn/static/images/blog/bg.jpg-webp) no-repeat center/cover">
        </div>
        <div class="banner-button-group">
            <a class="banner-button" onclick="window.event.cancelBubble=!0;heo.hideTodayCard()">
                <i class="haofont hao-icon-circle-plus"></i>
                <span class="banner-button-text">更多推荐</span>
            </a>
        </div>
    </div>
</div>
    </div>
</div>
        </div>
        <main class="layout right-aside" id="content-inner">
            <div class="recent-posts" id="recent-posts">
                
                <!-- 分类导航栏 -->
                <!-- 目录条 -->
<div id="category-bar">
    <div class="category-bar-items" id="category-bar-items">
        <div class="category-bar-item select" id="category-bar-home">
            <a href="/">首页</a>
        </div>

        

            <div class="category-bar-item"
                 id="前端">
                <a href="/categories/qian-duan">前端</a>
            </div>

            <div class="category-bar-item"
                 id="后端">
                <a href="/categories/hou-duan">后端</a>
            </div>

            <div class="category-bar-item"
                 id="跨端">
                <a href="/categories/kua-duan">跨端</a>
            </div>

            <div class="category-bar-item"
                 id="运维">
                <a href="/categories/yun-wei">运维</a>
            </div>

            <div class="category-bar-item"
                 id="项目">
                <a href="/categories/project">项目</a>
            </div>

            <div class="category-bar-item"
                 id="数据库">
                <a href="/categories/shu-ju-ku">数据库</a>
            </div>

            <div class="category-bar-item"
                 id="系统">
                <a href="/categories/xi-tong">系统</a>
            </div>

            <div class="category-bar-item"
                 id="建站">
                <a href="/categories/jian-zhan">建站</a>
            </div>

            <div class="category-bar-item"
                 id="面试题">
           <!DOCTYPE html>
<html lang="zh-CN">

<!-- head 中自定义的  -->

<head>
    
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <meta content="var(--heo-card-bg)" name="theme-color">
    <title>皮皮熊 - mjw ·sir blog</title>
    <link rel="shortcut icon"
          href="/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&amp;refer=http___img.alicdn.webp"/>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

    <script src="/themes/theme-hao/assets/js/heo.js?v=1.6.0"></script>

    <link rel="stylesheet" href="/themes/theme-hao/assets/zhheo/zhheoblog.css?v=1.6.0">

    <link rel="stylesheet" href="/themes/theme-hao/assets/zhheo/custom.css?v=1.6.0">

    <link rel="stylesheet" href="/themes/theme-hao/assets/zhheo/commentBarrage.css">

    <style>
        *::-webkit-scrollbar-thumb {
            background-color: var(--heo-main);
            background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
            border-radius: 2em
        }
    </style>

    <!-- swiper 在瞬间滚动时会使用 -->
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"/>
    
    <!-- 右下角通知 -->
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css"
          media="print"
          onload='this.media="all"'
          rel="stylesheet"
    />

    <!-- 代码块自动识别语言 -->
    
    <!-- 解决 pjax问题  自动识别语言-->
    

    <!-- 自动识别语言 -->
    
        <script src="/themes/theme-hao/assets/libs/prism/highlight.min.js"></script>


        <script>
            document.addEventListener("pjax:complete", function () {
                hljs.highlightAll()
            })
            document.addEventListener("DOMContentLoaded", function () {
                hljs.highlightAll()
            })
        </script>

    



    <!--  代码块-->
    
    <link rel="preload" as="style" onload="this.rel='stylesheet'"
          href="/themes/theme-hao/assets/libs/prism/prism.min.css">
    <link rel="preload" as="style" onload="this.rel='stylesheet'"
          href="/themes/theme-hao/assets/libs/prism/code.css">
    <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="light"
          href="/themes/theme-hao/assets/libs/prism/themes/prism-coldark-cold.css">
    <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="dark"
          href="/themes/theme-hao/assets/libs/prism/themes/prism-coldark-dark.css">
    <script data-pjax type="text/javascript" src="/themes/theme-hao/assets/libs/prism/prism.min.js"></script>

    <style>

        #article-container .code-toolbar pre.close{
            overflow: hidden;
            height: 300px;
        }
    </style>



    <!-- 页脚内容-样式一 -->
    <script async="async">(function () {
    var grt = new Date("06/27/2024 00:00:00"); //设置网站上线时间
    var now = new Date();
    var dnum;
    var hnum;
    var mnum;
    var snum;
    var nowHour;
    var t;
    var n;

    // 计算并更新天数、小时数、分钟数和秒数
    function updateTime() {
        now = new Date(); // 更新 now 的值
        nowHour = now.getHours(); // 更新 nowHour 的值
        var days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        t = Math.trunc(234e8 + (now - grt) / 1e3 * 17)
        n = (t / 1496e5).toFixed(6)
    }

    // 更新网页中显示的网站运行时间
    function updateHtml() {
        const footer = document.getElementById("footer");
        if (!footer) return
        let currentTimeHtml = "";
        let img = "";
        let description = "";
        if (nowHour < 18 && nowHour >= 9) {
            // 如果是上班时间
            img = "/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&refer=http___img.alicdn.webp";
            description = "距离月入25k也就还差一个大佬带我~";
        } else {
            // 如果是下班时间
            img = "/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&refer=http___img.alicdn.webp";
            description = "下班了就该开开心心的玩耍，嘿嘿~";
        }
        if (document.getElementById("workboard")) {
            currentTimeHtml =  `<img class="workSituationImg boardsign" src="${img}" alt="${description}" title="${description}">
                <div id="runtimeTextTip"> 本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i> <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀 </div>`
            document.getElementById("workboard").innerHTML = currentTimeHtml;
        }
    }
    setInterval(() => {
        updateTime();
        updateHtml();
    }, 1000);
})();</script>


    <script>
        (win => {
            win.saveToLocal = {
                set: function setWithExpiry(key, value, ttl) {
                    if (ttl === 0) return
                    const now = new Date()
                    const expiryDay = ttl * 86400000
                    const item = {
                        value: value,
                        expiry: now.getTime() + expiryDay,
                    }
                    localStorage.setItem(key, JSON.stringify(item))
                },

                get: function getWithExpiry(key) {
                    const itemStr = localStorage.getItem(key)

                    if (!itemStr) {
                        return undefined
                    }
                    const item = JSON.parse(itemStr)
                    const now = new Date()

                    if (now.getTime() > item.expiry) {
                        localStorage.removeItem(key)
                        return undefined
                    }
                    return item.value
                }
            }

            win.getScript = url => new Promise((resolve, reject) => {
                const script = document.createElement('script')
                script.src = url
                script.async = true
                script.onerror = reject
                script.onload = script.onreadystatechange = function () {
                    const loadState = this.readyState
                    if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
                    script.onload = script.onreadystatechange = null
                    resolve()
                }
                document.head.appendChild(script)
            })

            win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
                const link = document.createElement('link')
                link.rel = 'stylesheet'
                link.href = url
                if (id) link.id = id
                link.onerror = reject
                link.onload = link.onreadystatechange = function() {
                    const loadState = this.readyState
                    if (loadState && loadState !== 'loaded' && loadState !== 'complete')</a>-->
    <!--</div>-->
    <!--<div class="console-btn-item" id="assist-open" onclick="heo.hideConsole()" title="无障碍工具栏"><a-->
    <!--        class="assist-btn"><i class="fa-duotone fa-wheelchair"></i></a>-->
    <!--</div>-->
    <div class="console-btn-item" id="consoleMusic" onclick="heo.musicToggle()" title="音乐开关">
      <a class="music-switch" data-pjax-state="">
        <i class="haofont hao-icon-disc-fill"></i>
      </a>
    </div>
  </div>
  <div class="console-mask" href="javascript:void(0);" onclick="heo.hideConsole()" rel="external nofollow">
  </div>
</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" href="javascript:void(0);" onclick="rm.switchDarkMode()"
               rel="external nofollow" title="显示模式切换">
                <i class="haofont hao-icon-moon" style="font-size: 0.9rem;"></i>
                <span>显示模式</span>
            </a>
        </div>
        
            <div class="back-menu-list-groups">
                <div class="back-menu-list-group">

                    
                </div>
                <div class="back-menu-list-group">

                    
                        <!-- 菜单必须有子项才会展示 -->
                        <div class="back-menu-list-title">文库</div>
                        <div class="back-menu-list">
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/categories">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">分类</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/tags">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">标签</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/archives">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">归档</span>
                                </a>
                            
                        </div>

                    
                </div>
                <div class="back-menu-list-group">

                    
                </div>
                <div class="back-menu-list-group">

                    
                        <!-- 菜单必须有子项才会展示 -->
                        <div class="back-menu-list-title">我的</div>
                        <div class="back-menu-list">
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/to-do">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">待办</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/bangumis">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">追播</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/gallery">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">图库</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/liu-yan-ban">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">留言板</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/online-tools">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">工具</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/messageWall">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">信息墙</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="/1740911804816">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">音乐</span>
                                </a>
                            
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" href="https://ppxiong.msirknightblog.cn/">
                                    <!-- icon -->
                                    
                                    <span class="back-menu-item-text">hexo版博客</span>
                                </a>
                            
                        </div>

                    
                </div>
                <div class="back-menu-list-group">

                    
                </div>

            </div>
        
        
            <div class="menus_items">
                <div class="menus_item">
                    
                </div>
                <div class="menus_item">
                    
                        <a class="site-page" href="javascript:void(0);" rel="external nofollow">
                            <span>文库</span>
                        </a>
                        
                            <ul class="menus_item_child">
                                <li>
                                    <a class="site-page child" href="/categories">
                                        
                                        <span>分类</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/tags">
                                        
                                        <span>标签</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="site-page child" href="/archives">
                                        
                                        <span>归档</span>
                                    </a>
                                </li>
                            </ul>
                        
                    
                </div>
                <div class="menus_item">
                    
                </div>
                <div class="menus_item">
                    
      ["tag-protection"],"name":"tag-zZXbg","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":4,"creationTimestamp":"2024-11-03T03:11:58.749536614Z","deletionTimestamp":null},"spec":{"displayName":"taro","slug":"Taro","color":"#667fa9","cover":null},"status":{"permalink":"\/tags\/Taro","visiblePostCount":1,"postCount":1,"observedVersion":2},"postCount":1}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":13,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"a4b0d450-aa8e-4273-9d1c-c158894661f6","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"04","content.halo.run\/archive-day":"17"},"annotations":{"content.halo.run\/preferred-editor":"default","checksum\/config":"cbe08cc0a00f4a1dc379ff57d1ee5486d71f0450196f4b3f6d65db9d9e72fb3f","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[]","content.halo.run\/last-associated-tags":"[]","content.halo.run\/stats":"{\"visit\":31,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"61920701-9a56-4e12-8a78-7c51c0987477","checksum\/content":"beb34a24d8f53bd07609aebecb6a76c3696480b66e3406fcd8bfb813d55ce5ea"},"version":52,"creationTimestamp":"2025-04-16T03:56:45.315791242Z","deletionTimestamp":null},"spec":{"title":"\u5FEB\u901F\u5165\u95E8React","slug":"1744775797368","releaseSnapshot":"61920701-9a56-4e12-8a78-7c51c0987477","headSnapshot":"61920701-9a56-4e12-8a78-7c51c0987477","baseSnapshot":"5fde4530-6dbf-4b8a-b3de-e3417863c337","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-04-17T01:26:30.669386103Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":[],"tags":[],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-04-17T01:26:30.669373825Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-04-16T03:56:45.334674727Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1744775797368","excerpt":"react \u662F\u4E00\u4E2A\u7528\u4E8E\u6784\u5EFA\u7528\u6237\u754C\u9762\u7684\u524D\u7AEF\u6846\u67B6\uFF0C\u5177\u6709\u5F88\u4E30\u5BCC\u7684\u751F\u6001\u5DE5\u5177\uFF0C\u5305\u62EC ReactRouter AntDesign Redux Nexthttps:\/\/zh-hans.react.dev\/learn\/creating-a-react-app","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-17T11:09:08.761591617Z","observedVersion":52},"categories":[],"tags":[],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":31,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"c45fd56c-0e8c-421a-b8b6-ca7a89ca3601","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"04","content.halo.run\/archive-day":"16"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"527d052b3bb0af8c96ab65d01507e89c90252aad82778b6bb09e35cbde2ba01e","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/last-associated-tags":"[\"tag-QyCih\"]","content.halo.run\/stats":"{\"visit\":5,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"8725bbbf-96ed-4ce2-b108-985c54b6ef62","checksum\/content":"b89036702a0068ebe308926774d5da961a80943e66ee0451a62632883a81c26f"},"version":33,"creationTimestamp":"2025-04-16T02:29:26.953702300Z","deletionTimestamp":null},"spec":{"title":"vue\u524D\u7AEF\u9879\u76EE\u4F18\u5316\u624B\u6BB5","slug":"1744770559516","releaseSnapshot":"8725bbbf-96ed-4ce2-b108-985c54b6ef62","headSnapshot":"8725bbbf-96ed-4ce2-b108-985c54b6ef62","baseSnapshot":"8725bbbf-96ed-4ce2-b108-985c54b6ef62","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-04-16T02:33:00Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":["tag-QyCih"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-04-16T02:34:49.291649287Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-04-16T02:29:26.971979382Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1744770559516","excerpt":"Vue \u9879\u76EE\u4F18\u5316\u6C47\u603B \u4F18\u5316\u7C7B\u578B \u4F18\u5316\u624B\u6BB5 \u63CF\u8FF0 Webpack Vite \u9996\u5C4F\u9875\u9762\u52A0\u8F7D\u4F18\u5316 \u8DEF\u7531\u61D2\u52A0\u8F7D (Lazy Loading) \u5C06\u8DEF\u7531\u7EC4\u4EF6\u5206\u5272\u6210\u4E0D\u540C\u7684\u4EE3\u7801\u5757\uFF0C\u6309\u9700\u52A0\u8F7D\uFF0C\u51CF\u5C11\u521D\u59CB\u52A0\u8F7D\u65F6\u95F4\u3002 \u2705 \u2705 \u7EC4\u4EF6\u6309\u9700\u5F15\u5165 \u5BF9\u4E8E\u7B2C\u4E09\u65B9\u7EC4\u4EF6\u5E93\uFF0C\u53EA\u5F15\u5165\u9700\u8981\u7684\u7EC4\u4EF6\uFF0C\u907F\u514D\u5168\u91CF\u5F15\u5165\u3002 \u2705 \u2705 \u56FE\u7247\u61D2\u52A0\u8F7D \u4F7F\u7528 v-l","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-16T02:34:49.208148631Z","observedVersion":33},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-QyCih","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":4,"creationTimestamp":"2025-04-16T02:34:31e":"JavaScript","slug":"qian-duan","color":"#46aac3","cover":""},"status":{"permalink":"\/tags\/qian-duan","visiblePostCount":6,"postCount":6,"observedVersion":20},"postCount":6}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":183,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"2c4ad947-674d-4395-af70-39eda2ac7223","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"04","content.halo.run\/archive-day":"21"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"a3e569e897c22237a4ddac4cdc5936d0b252bb2dca3fb434bec02663c71016c7","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/last-associated-tags":"[]","content.halo.run\/stats":"{\"visit\":5,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"79a20b04-e761-40ea-a17f-15a1d67c109c","checksum\/content":"43cd217b656af4c61f16276ee3ac907f1b3de81f71b31fcf4e060f2458050fdb"},"version":33,"creationTimestamp":"2025-04-21T06:20:13.686088870Z","deletionTimestamp":null},"spec":{"title":"electron \u6253\u5305vue\u9879\u76EE\u5230\u684C\u9762\u7AEF","slug":"1745216409748","releaseSnapshot":"79a20b04-e761-40ea-a17f-15a1d67c109c","headSnapshot":"79a20b04-e761-40ea-a17f-15a1d67c109c","baseSnapshot":"3233950c-967e-4c1e-8f18-16d7d5537463","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-04-21T06:26:00Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":[],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-04-21T06:26:27.816449955Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-04-21T06:20:13.702650493Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1745216409748","excerpt":"https:\/\/segmentfault.com\/a\/1190000039197022?sort=newest#item-3-6","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-21T06:27:10.976890598Z","observedVersion":33},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":5,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"b3dec53e-0553-414c-a628-759e679448ae","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"04","content.halo.run\/archive-day":"17"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"928cd343862f9e3b2fd1c2985ee5ac1e9ab40cfa9f3ae46a574c70209bf5d1ef","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-csHCU\"]","content.halo.run\/last-associated-tags":"[\"tag-zZXbg\"]","content.halo.run\/stats":"{\"visit\":13,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"74e3e3bb-5313-47de-bc67-7a7872929aba","checksum\/content":"b5c1e72017a06d9e4f31e944ab63685999fe6e731d4a864219ebd250a6293a02"},"version":47,"creationTimestamp":"2025-04-17T11:09:25.795423195Z","deletionTimestamp":null},"spec":{"title":"taro\u8DE8\u7AEF\u5F00\u53D1","slug":"1744888161019","releaseSnapshot":"74e3e3bb-5313-47de-bc67-7a7872929aba","headSnapshot":"74e3e3bb-5313-47de-bc67-7a7872929aba","baseSnapshot":"2a56619c-03ba-4108-9ea5-b51e4f44a181","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-04-17T14:19:00Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-csHCU"],"tags":["tag-zZXbg"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-04-17T14:19:31.718346672Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-04-17T11:09:25.812223335Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1744888161019","excerpt":"Taro \u662F\u4E00\u4E2A\u5F00\u653E\u5F0F\u8DE8\u7AEF\u8DE8\u6846\u67B6\u89E3\u51B3\u65B9\u6848\uFF0C\u652F\u6301\u4F7F\u7528 React\/Vue\/Nerv\u7B49\u6846\u67B6\u6765\u5F00\u53D1 \u5FAE\u4FE1 \/ \u4EAC\u4E1C \/ \u767E\u5EA6 \/ \u652F\u4ED8\u5B9D \/ \u5B57\u8282\u8DF3\u52A8 \/ QQ \/ \u98DE\u4E66 \/ \u5FEB\u624B \u5C0F\u7A0B\u5E8F \/ H5 \/ RN \u7B49\u5E94\u7528\u3002 \u73B0\u5982\u4ECA\u5E02\u9762\u4E0A\u7AEF\u7684\u5F62\u6001\u591A\u79CD\u591A\u6837\uFF0CWeb\u3001React Native\u3001\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7B49\u5404\u79CD\u7AEF\u5927\u884C","inProgress":false,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-18T03:38:19.414486137Z","observedVersion":47},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-csHCU","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":12,"creationTimestamp":"2024-11-03T03:12:44.706747559Z","deletionTimestamp":null},"spec":{"displayName":"\u8DE8\u7AEF","slug":"kua-duan","description":"","cover":"","template":"","postTemplate":"","priority":10,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/kua-duan","postCount":3,"visiblePostCount":3},"postCount":3}],"tags":[{"metadata":{"generateName":"tag-","finalizers":ermalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-YqBmF","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":10,"creationTimestamp":"2024-11-27T12:11:49.344826692Z","deletionTimestamp":null},"spec":{"displayName":"Vite","slug":"vite","color":"#d4e123","cover":""},"status":{"permalink":"\/tags\/vite","visiblePostCount":3,"postCount":3,"observedVersion":9},"postCount":3}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":8,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"7bca71dc-f1ef-4094-b22c-dc967e23e7df","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"03","content.halo.run\/archive-day":"24"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"492ff627b82ce8a677630302ef9c4421046ec0b0433cfa058fe85ea2b9518646","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-gHcAG\"]","content.halo.run\/last-associated-tags":"[\"tag-bkAcu\"]","content.halo.run\/stats":"{\"visit\":141,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"b36e145b-0f0f-481f-a61e-2bad8cf8983e","checksum\/content":"cd61707f590667d9fc3035498ed0221965e02b351523612fea40d68f712db563"},"version":176,"creationTimestamp":"2025-03-24T11:58:06.534129996Z","deletionTimestamp":null},"spec":{"title":"vue3-typescript-pro","slug":"1742817481897","releaseSnapshot":"b36e145b-0f0f-481f-a61e-2bad8cf8983e","headSnapshot":"fdde99d4-d7c6-4960-8020-17ae002d93b0","baseSnapshot":"45139a7b-f865-4746-9cfd-a62fc3a4bbb0","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-03-24T11:58:00Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-gHcAG"],"tags":["tag-bkAcu"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-03-26T12:06:17.172028594Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-03-24T11:58:06.608440987Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1742817481897","excerpt":"https:\/\/www.bilibili.com\/video\/BV1RUxWemEEn?spm_id_from=333.788.player.switch\u0026vd_source=eecc2c8229facae90","inProgress":true,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-04-15T11:24:44.580380420Z","observedVersion":176},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-gHcAG","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":62,"creationTimestamp":"2024-06-19T10:59:19.616904631Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF","slug":"qian-duan","description":"\u524D\u7AEF","cover":"\/upload\/classify_front_end.jpeg","template":"","postTemplate":null,"priority":12,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/qian-duan","postCount":30,"visiblePostCount":29},"postCount":29}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-bkAcu","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":9,"creationTimestamp":"2025-02-11T13:28:24.113081136Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF\u9879\u76EE","slug":"front-end-project","color":"#a165fb","cover":""},"status":{"permalink":"\/tags\/front-end-project","visiblePostCount":3,"postCount":3,"observedVersion":5},"postCount":3}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":145,"upvote":0,"comment":0}},{"metadata":{"generateName":null,"finalizers":["post-protection"],"name":"1a310ceb-be61-4daf-beec-782962405c28","labels":{"content.halo.run\/published":"true","content.halo.run\/deleted":"false","content.halo.run\/owner":"ppxiong","content.halo.run\/visible":"PUBLIC","content.halo.run\/archive-year":"2025","content.halo.run\/archive-month":"03","content.halo.run\/archive-day":"14"},"annotations":{"copyrightType":"original","content.halo.run\/preferred-editor":"default","checksum\/config":"528a3a0afe3d7bf674767a9c5baedf8304f2f938625303ce3cfe1e019283855a","content.halo.run\/permalink-pattern":"\/archives\/{slug}","content.halo.run\/last-associated-categories":"[\"category-csHCU\"]","content.halo.run\/last-associated-tags":"[\"tag-aRJtD\",\"tag-bkAcu\"]","content.halo.run\/stats":"{\"visit\":19,\"upvote\":0,\"totalComment\":0,\"approvedComment\":0}","content.halo.run\/last-released-snapshot":"44feb1f2-034e-4534-8b85-b590b894136a","checksum\/content":"3176dc13c05a97af74efb616da0916db20baa6aa5c5961cf861f7f5ad9ad704e"},"version":48,"creationTimestamp":"2025-03-14T13:36:01.533907001Z","deletionTimestamp":null},"spec":{"title":"uniapp-\u5C0F\u5154\u9C9C\u9879\u76EE","slug":"1741959358551","releaseSnapshot":"44feb1f2-034e-4534-8b85-b590b894136a","headSnapshot":"d6308d86-e21f-46a7-a5b9-b9e4ad54a55c","baseSnapshot":"44feb1f2-034e-4534-8b85-b590b894136a","owner":"ppxiong","template":"","cover":"","deleted":false,"publish":true,"publishTime":"2025-03-14T14:13:00Z","pinned":false,"allowComment":true,"visible":"PUBLIC","priority":0,"excerpt":{"autoGenerate":true,"raw":""},"categories":["category-csHCU"],"tags":["tag-aRJtD","tag-bkAcu"],"htmlMetas":[]},"status":{"phase":"PUBLISHED","conditions":[{"type":"PUBLISHED","status":"TRUE","lastTransitionTime":"2025-03-14T14:13:52.077662591Z","message":"Post published successfully.","reason":"Published"},{"type":"DRAFT","status":"TRUE","lastTransitionTime":"2025-03-14T13:36:01.571343435Z","message":"Drafted post successfully.","reason":"DraftedSuccessfully"}],"permalink":"\/archives\/1741959358551","excerpt":"\u9879\u76EE\u6280\u672F\u6808 \u9879\u76EE\u642D\u5EFA HbuilderX Hbuildeeting":"19\u70B9\u55BD, \u5956\u52B1\u4E00\u987F\u4E30\u76DB\u7684\u5927\u9910\u5427\uD83C\uDF54\u3002","start_time":19,"end_time":19}},{"realNode":{"greeting":"\u665A\u4E0A\u597D\uD83D\uDC4B, \u5728\u5C5E\u4E8E\u81EA\u5DF1\u7684\u65F6\u95F4\u597D\u597D\u653E\u677E\uD83D\uDE0C~","start_time":20,"end_time":24}}].map((itme) => {
                return itme.realNode
            })
            let e = greeting.length !== 0 ? greeting : [
                {
                    greeting: "晚安😴",
                    start_time: 0,
                    end_time: 5
                }, {
                    greeting: "早上好鸭👋, 祝你一天好心情！",
                    start_time: 6,
                    end_time: 9
                }, {
                    greeting: "上午好👋, 状态很好，鼓励一下～",
                    start_time: 10,
                    end_time: 10
                }, {
                    greeting: "11点多啦, 在坚持一下就吃饭啦～",
                    start_time: 11,
                    end_time: 11
                }, {
                    greeting: "午安👋, 宝贝",
                    start_time: 12,
                    end_time: 14
                }, {
                    greeting: "🌈充实的一天辛苦啦！",
                    start_time: 14,
                    end_time: 18
                }, {
                    greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
                    start_time: 19,
                    end_time: 19
                }, {
                    greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
                    start_time: 20,
                    end_time: 24
                }];
            let t = document.createElement("div");
            t.id = "greeting", setTimeout((() => {
                t.classList.add("shown")
            }), 1e3);
            let i = document.querySelector("#greetingBox");
            i.appendChild(t);
            const n = (new Date).getHours();
            let r = "晚上好👋";
            for (let t = 0; t < e.length; t++) if (n >= e[t].start_time && n <= e[t].end_time) {
                r = e[t].greeting;
                break
            }
            t.innerHTML = r, setTimeout((() => {
                t.classList.remove("shown"), setTimeout((() => {
                    i.remove()
                }), 500)
            }), 3e3)
        })()
    </script>

            <!-- 第一屏 -->
            
        </header>
        <div id="home_top">
            <!-- 每日说说 -->
            <div class="bbTimeList container" id="bbTimeList">

    <i class="haofont hao-icon-logo-moment" onclick="" style="font-size: 1.3rem;" title="瞬间"></i>

    <!--   未安装插件   -->
    

    <!--   瞬间插件   -->
    
        <div class="swiper-container swiper-no-swiping" id="bbtalk" tabindex="-1">
            <div class="swiper-wrapper" id="bber-talk" onclick="pjax.loadUrl('/moments')">
                
                    <div class="li-style swiper-slide"><p style="">蹭下别人家的烟花🎆~</p></div>
                
                    <div class="li-style swiper-slide"><p style="">加油年轻人，生活会慢慢变好！</p></div>
                
                    <div class="li-style swiper-slide"><p style="">在滏原里等你～</p></div>
                
                    <div class="li-style swiper-slide"><p style=""># 啊 没错，目前已经失业第二天了，至今在北京已经待够了差不多十一个年头了，一眨眼的时间过的还真是快，真是岁月不饶人呐！感谢在北京这段时间内所让我遇到机遇与惭愧，并为未来的路做了铺垫，希望之后的生活，能够回归自我，消除内耗，平复心境，培养喜好，做应该做的事，想做的事，加油～</p></div>
                
                    <div class="li-style swiper-slide"><p style="">这馒头着实有点不好下口~</p></div>
                
                    <div class="li-style swiper-slide"><p style="">在外面呆久了，难免有时间和一家人一起出去转一转！</p></div>
                
                    <div class="li-style swiper-slide"><p style="">又到一年一收了～</p></div>
                
                    <div class="li-style swiper-slide"><p style="">早上抓到一个日出，嘿嘿~</p></div>
                
                    <div class="li-style swiper-slide"><p style="">一叶之秋🍂</p></div>
                
                    <div class="li-style swiper-slide"><p style="">终于开工了，愿一切顺利！</p></div>
                
                    <div class="li-style swiper-slide"><p style="">so ~ 北京2024宝可梦大师赛!!!</p></div>
                
                    <div class="li-style swiper-slide"><p style=""><a class="tag" href="?tag=%E5%9C%B0%E9%9C%87" data-pjax="">地震</a> 25.01.06 14:13 在家中体会了3.0级，持续时间较短1到2秒钟!</p></div>
                
                    <div class="li-style swiper-slide"><p style="">年头可算盼来雪了❄️~</p></div>
                
                    <div class="li-style swiper-slide"><p style="">太久没花现金，不知道钱张啥样了，啥时候五角变成一角模样了，掉档次了!</p></div>
                
                    <div class="li-style swiper-slide"><p style="">办公室内看球赛～</p></div>
                
            </div>
        </div>
        <i class="bber-gotobb haofont hao-icon-circle-arrow-right" onclick="location.href='/moments'" title="查看全文"></i>
    
    

</div>

            <!-- 置顶内容 -->
            <!-- 置顶的文章-->
<div class="recent-top-post-group" id="recent-top-post-group">
    <div class="recent-post-top" id="recent-post-top">
        <!-- banner -->
        <div id="bannerGroup">
    <!-- banners -->
    <div id="banners">
        <div class="tags-group-all">
            <!--  banners 使用默认值-->
            <div class="tags-group-wrapper">
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img src="/themes/theme-hao/assets/images/icons/AfterEffect.png"
                             title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/Sketch.png"
                             title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img src="/themes/theme-hao/assets/images/icons/Docker.png"
                             title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img src="/themes/theme-hao/assets/images/icons/Photoshop.png"
                             title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/FinalCutPro.png"
                             title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img src="/themes/theme-hao/assets/images/icons/Python.png"
                             title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img src="/themes/theme-hao/assets/images/icons/Swift.png"
                             title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img src="/themes/theme-hao/assets/images/icons/Principle.png"
                            iv>

    <!-- 社交链接，需要填入 href class title -->
    <div id="footer_deal">
        
            
        

        <img class="footer_mini_logo"
             src=""
             data-lazy-src="/upload/src=http___img.alicdn.com_bao_uploaded_i2_2209520396075_O1CN01bU36CW1CJWRDYUyYg_!!60-0-lubanu.jpg_300x300.jpg&amp;refer=http___img.alicdn.webp" title="返回顶部" onclick="btf.scrollToDest(0, 500)">

        
            
        
    </div>

    <!-- 相关地址  -->
    
        <div id="heo-footer">
            <div class="footer-group">
                <h3 class="footer-title">首页</h3>
                <div class="footer-links">
                    
                </div>
            </div>
            <div class="footer-group">
                <h3 class="footer-title">文库</h3>
                <div class="footer-links">
                    <a class="footer-item" href="/categories" target="_self">分类</a><a class="footer-item" href="/tags" target="_self">标签</a><a class="footer-item" href="/archives" target="_self">归档</a>
                </div>
            </div>
            <div class="footer-group">
                <h3 class="footer-title">友链</h3>
                <div class="footer-links">
                    
                </div>
            </div>
            <div class="footer-group">
                <h3 class="footer-title">我的</h3>
                <div class="footer-links">
                    <a class="footer-item" href="/to-do" target="_self">待办</a><a class="footer-item" href="/bangumis" target="_self">追播</a><a class="footer-item" href="/gallery" target="_self">图库</a><a class="footer-item" href="/liu-yan-ban" target="_self">留言板</a><a class="footer-item" href="/online-tools" target="_self">工具</a><a class="footer-item" href="/messageWall" target="_blank">信息墙</a><a class="footer-item" href="/1740911804816" target="_self">音乐</a><a class="footer-item" href="https://ppxiong.msirknightblog.cn/" target="_blank">hexo版博客</a>
                </div>
            </div>
            <div class="footer-group">
                <h3 class="footer-title">关于</h3>
                <div class="footer-links">
                    
                </div>
            </div>
            
        </div>

    
    <!-- 底部 banner -->
    

    <div class="copyright">
        ©2024 - 2025 By 皮皮熊
    </div>
    
    <div id="workboard"></div>
    <p id="ghbdages" style="width:60%;margin: 0 auto 0;">
        <a class="github-badge" target="_blank" href="https://halo.run/"
           style="margin-inline:5px" title="博客框架为halo2.x">
            <img src=""
                 data-lazy-src="https://npm.onmicrosoft.cn/hao-theme-static@1.3.6/images/Frame-Halo-blue.svg" alt="博客框架为halo2.x" />
        </a><a class="github-badge" target="_blank" href="https://github.com/"
           style="margin-inline:5px" title="Github">
            <img src=""
                 data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg" alt="Github" />
        </a>
    </p>
    

    <style>
        .copyright,
        #ghbdages,
        #workboard {
            text-align: center;
        }
    </style>

    <style>
        #heo-footer {
            margin-bottom: 1rem;
        }
    </style>

    <div id="footer-banner" style="padding:1rem">
        <div class="footer-banner-links">
            <div class="footer-banner-left">
                <div id="footer-banner-tips">
                    <div style="display: flex;flex-direction: row;align-items: center;">
                        
                            ©2024 - 2025
                        
                        
                        By <a class="footer-banner-link" href="/" target="_blank">皮皮熊</a>
                    </div>
                </div>
            </div>
            <div class="footer-banner-right">
                
                <!-- 又拍云 -->
                
                <!-- 阿里云 -->
                <a class="footer-banner-link cloud" href="https://www.aliyun.com/"
                   rel="noopener external nofollow noreferrer noopener"
                   target="_blank">
                    <span>本网站由</span>&nbsp;&nbsp;
                    <img src="/themes/theme-hao/assets/images/footer/aliyun.png" alt="aliyun_cloud" class="entered loading cloud" />
                    &nbsp;&nbsp;<span>提供CDN加速/云存储服务</span>
                </a>
                <!-- 腾讯云 -->
                
                <!-- 华为云 -->
                
                <!-- 自定义云服务信息 -->
                
                
                <!-- 订阅 需要 RSS 插件支持 -->
                <a class="footer-banner-link" href="/rss.xml">订阅</a>
                <a class="footer-banner-link" href="https://github.com/liuzhihang/halo-theme-hao">主题</a>
                <a class="footer-banner-link" href="/about">关于</a>
                <a class="footer-banner-link" href="https://beian.miit.gov.cn/#/Integrated/index"
                   rel="noopener external nofollow noreferrer noopener"
                   target="_blank">
                    <span> 京ICP备2022026194号</span>
                    
                </a>
                
                
            </div>
        </div>
    </div>


    <!-- 右下角 snackbar 弹窗 -->
    <div class="needEndHide" id="cookies-window">
        <div class="cookies-window-title">协议提醒助手</div>
        <div class="cookies-window-content"><span class="cookies-tip">查看本站为你的个人隐私做出的努力</span>
            <a class="cookies-link" href="/privacy"
               title="本站如何保护你的隐私" data-pjax-state=""><i
                    class="bber-gotobb haofont hao-icon-circle-arrow-right"></i></a>
        </div>
    </div>
    <div id="quit-box" onclick="RemoveRewardMask()"></div>

    <!--评论弹幕弹窗 -->
    <div class="comment-barrage needEndHide" style="display: none;"></div>

    <style>
        a.footer-banner-link.cloud {
            display: flex;
            align-items: center;
        }
        img.entered.loading.cloud {
            height: 32px;
        }
    </style>
    
    
        <style>
            @media screen and (min-width: 1300px) {
                #footer {
                    background: linear-gradient(180deg, var(--heo-card-bg-none) 0%, #fff0 25%);
                    margin-top: 0.5rem;
                    display: flex;
                    flex-direction: column;
                }
            }
            
            @media screen and (max-width: 1300px) {
                #footer {
                    background: linear-gradient(180deg, var(--heo-background) 0%, #fff0 25%);
                    margin-top: 0;
                    z-index: 3;
                }
            }
        
        </style>
    
    
</footer>



    </div>




<!-- todo 右下角悬浮操作按钮 -->

    <div id="rightside">
        <div id="rightside-config-hide">
            
            <button id="translateLink" type="button" title="简繁转换">繁</button>
            <button id="darkmode" type="button" title="浅色和深色模式转换"><i class="haofont hao-icon-circle-half-stroke"></i></button>
            <button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="haofont hao-icon-arrows-left-right"></i></button>
        </div>
        <div id="rightside-config-show">
            <button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
            
            <a id="to_comment" href="#post-comment" title="直达评论" ><i class="haofont hao-icon-chat--fill" style="font-size: 17px;"></i></a>
            <a id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
            <button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
         ive-list-link" href="/archives/2025/01"
                    data-pjax-state=""><span
                    class="card-archive-list-date">一月 2025

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">3</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
        
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/12"
                    data-pjax-state=""><span
                    class="card-archive-list-date">十二月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/11"
                    data-pjax-state=""><span
                    class="card-archive-list-date">十一月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/10"
                    data-pjax-state=""><span
                    class="card-archive-list-date">十月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/09"
                    data-pjax-state=""><span
                    class="card-archive-list-date">九月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">8</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/08"
                    data-pjax-state=""><span
                    class="card-archive-list-date">八月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">2</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/07"
                    data-pjax-state=""><span
                    class="card-archive-list-date">七月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2024/06"
                    data-pjax-state=""><span
                    class="card-archive-list-date">六月 2024

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">4</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
        
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2023/07"
                    data-pjax-state=""><span
                    class="card-archive-list-date">七月 2023

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">1</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2023/06"
                    data-pjax-state=""><span
                    class="card-archive-list-date">六月 2023

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">1</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
        
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2022/08"
                    data-pjax-state=""><span
                    class="card-archive-list-date">八月 2022

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">2</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
        
    </ul>




            <hr>
        </span>


    <!-- 侧边栏站点信息统计 -->



    <!--    <div class="item-headline"><i class="haofont icon-icon-sidebar-scxmtj"></i><span>统计</span></div>-->
    <div class="webinfo">
        <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="haofont hao-icon-file-lines"></i>
                <div class="item-name">文章数 :</div>
            </div>
            <div class="item-count">63</div>
        </div>
        <!-- <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="haofont icon-sliders"></i>
                <div class="item-name">分类数 :</div>
            </div>
            <div class="item-count" th:text="${stats.category}"></div>
        </div> -->
        <!-- <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="haofont icon-comment-alt"></i>
                <div class="item-name">评论数 :</div>
            </div>
            <div class="item-count" th:text="${stats.comment}"></div>
        </div> -->
        <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="haofont hao-icon-bullseye"></i>
                <div class="item-name">访问量 :</div>
            </div>
            <div class="item-count">4417</div>
        </div>
        <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="haofont hao-icon-stopwatch"></i>
                <div class="item-name">建站天数 :</div>
            </div>
            <div class="item-count" id="runtimeshow">2024-06-27</div>
        </div>
        <!-- <div class="webinfo-item">
            <div class="webinfo-item-title"><i class="item-icon fas fa-font"></i>
                <div class="item-name">全站字数 :</div>
            </div>
            <div class="item-count">606.7k</div>
        </div> -->
    </div>



</div>

                    </div>
                
            
            

        
    

    <!-- 侧栏部件，toc 之后的组件需要被 sticky_layout 包裹 -->
    </div>
        </main>
        <!-- 底部 -->
        <!-- 页脚模块 -->
<footer id="footer">

    <div id="heo-footer-bar">
        <div class="footer-logo">皮皮熊</div>
        <div class="footer-bar-description">来自 皮皮熊 最新的互联网与技术文章</div>
        <a class="footer-bar-link" href="/" data-pjax-state="">了解更多</a>
    </drX \u662FDClude\u5B98\u65B9\u5F00\u53D1\u7684\u4E00\u6B3EIdea\u7F16\u8F91\u5668\uFF0C\u901A\u8FC7HbuilderX\u5DE5\u5177\uFF0C\u53EF\u4EE5\u548C\u65B9\u4FBF\u7684\u53BB\u5F00\u53D1\u5C0F\u7A0B\u5E8F\u3001H5\u4EE5\u53CAAPP\u7B49\u53D1\u5E03\u9884\u89C8\u529F\u80FD! \u4E0B\u8F7DHbuilderX","inProgress":true,"commentsCount":null,"contributors":["ppxiong"],"hideFromList":false,"lastModifyTime":"2025-03-14T14:13:52.007745281Z","observedVersion":48},"categories":[{"metadata":{"generateName":"category-","finalizers":["category-protection"],"name":"category-csHCU","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"categories","content.halo.run\/last-hidden-state":"false"},"version":12,"creationTimestamp":"2024-11-03T03:12:44.706747559Z","deletionTimestamp":null},"spec":{"displayName":"\u8DE8\u7AEF","slug":"kua-duan","description":"","cover":"","template":"","postTemplate":"","priority":10,"children":[],"preventParentPostCascadeQuery":false,"hideFromList":false},"status":{"permalink":"\/categories\/kua-duan","postCount":3,"visiblePostCount":3},"postCount":3}],"tags":[{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-aRJtD","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":6,"creationTimestamp":"2024-11-03T03:11:23.025378992Z","deletionTimestamp":null},"spec":{"displayName":"Uniapp","slug":"uniapp","color":"#366dec","cover":""},"status":{"permalink":"\/tags\/uniapp","visiblePostCount":2,"postCount":2,"observedVersion":4},"postCount":2},{"metadata":{"generateName":"tag-","finalizers":["tag-protection"],"name":"tag-bkAcu","labels":null,"annotations":{"content.halo.run\/permalink-pattern":"tags"},"version":9,"creationTimestamp":"2025-02-11T13:28:24.113081136Z","deletionTimestamp":null},"spec":{"displayName":"\u524D\u7AEF\u9879\u76EE","slug":"front-end-project","color":"#a165fb","cover":""},"status":{"permalink":"\/tags\/front-end-project","visiblePostCount":3,"postCount":3,"observedVersion":5},"postCount":3}],"contributors":[{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}}],"owner":{"name":"ppxiong","displayName":"ppxiong","avatar":null,"bio":null,"permalink":"\/authors\/ppxiong","metadata":{"generateName":null,"finalizers":["user-protection"],"name":"ppxiong","labels":null,"annotations":{"rbac.authorization.halo.run\/role-names":"[\"super-role\"]"},"version":6,"creationTimestamp":"2024-06-04T09:10:04.138326678Z","deletionTimestamp":null}},"stats":{"visit":19,"upvote":0,"comment":0}}],"nextUrl":"\/page\/2","prevUrl":"\/","first":true,"last":false,"hasNext":true,"hasPrevious":false,"totalPages":7};
        
        let datum = posts.total < posts.size ? posts.total : posts.size;
        
        let number = Math.floor(Math.random() * datum);
        
        let post = posts.items[number];
        
        // 当前窗口打开
        //window.location.href = post.status.permalink;
        pjax.loadUrl(post.status.permalink)
        // window.open(post.status.permalink);
    }

</script>

<!-- 网站背景 -->
<div id="an_music_bg"></div>

<!-- 控制台 -->
<!-- TODO 控制台功能 -->
<div id="console" >
  <div class="close-btn" onclick="heo.hideConsole()" href="javascript:void(0);">
    <i class="haofont hao-icon-circle-xmark"></i>
  </div>
  <div class="console-card-group">
    <!-- 评论，需要使用评论插件，获取最近评论 -->
    <div class="console-card-group-left">
      <div class="console-card" id="card-newest-comments" onclick="heo.hideConsole()">
        <div class="card-content">
          <div class="author-content-item-tips">互动</div>
          <span class="author-content-item-title">最近评论</span>
        </div>
        <div class="aside-list">
          
          <span>正在加载中...</span></div>
      </div>
    </div>
    <!-- 右侧展示 tag -->
    <div class="console-card-group-right">
      <div class="console-card tags" onclick="heo.hideConsole()">
        <div class="card-content">
          <div class="author-content-item-tips">标签</div>
          <span class="author-content-item-title">寻找感兴趣的领域</span>
        </div>
        <div class="card-tag-cloud">
          <a style="font-size:1em;color:#d3d3d3"
             href="/tags/typescript">
            TypeScript<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/webpack">
            Webpack<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/node">
            Node<sup>2</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/vue2">
            Vue2<sup>5</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/nestjs">
            NestJs<sup></sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/ubuntu">
            Ubuntu<sup>3</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/flutter">
            Flutter<sup></sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/linux">
            Centos<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/vue-router">
            Vue-router<sup>0</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/zhi-yu">
            治愈<sup>13</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/zhuang-xiu">
            装修<sup>0</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/build-tools">
            构建工具<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/qian-duan-you-hua">
            前端优化<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/vue3">
            Vue3<sup>1</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/html">
            Html<sup>2</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/css">
            CSS<sup>3</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/docker">
            Docker<sup>0</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/vite">
            Vite<sup>3</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/uniapp">
            Uniapp<sup>2</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/front-end-project">
            前端项目<sup>3</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/windows">
            Windows<sup></sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/chao-cai">
            炒菜<sup>0</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/data-large-screen">
            数据大屏<sup>2</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/react">
            React<sup>0</sup>
          </a><a style="font-size:1em;color:#d3d3d3"
             href="/tags/qian-duan">
            JavaScript<sup>6</sup>
          </a>
        </div>
      </div>
      <!-- 底部展示时间归档 -->
      <div class="console-card history" onclick="heo.hideConsole()">
        <div class="item-headline"><i class="fas fa-archive"></i><span>文章</span></div>
        <ul class="card-archive-list">
          
            <li class="card-archive-list-item">
              <a class="card-archive-list-link" href="/archives/2025/04"
                 data-pjax-state="load"><span
                      class="card-archive-list-date">
                  四月 2025
                </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span>ss="card-category-list-name" title="治愈">治愈</span>
                    <span class="card-category-list-count">13</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/she-ying">
                        <span class="card-category-list-name" title="摄影">摄影</span>
                    <span class="card-category-list-count"></span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/cai-yao">
                        <span class="card-category-list-name" title="菜肴">菜肴</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/tools">
                        <span class="card-category-list-name" title="工具">工具</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/zhuang-xiu">
                        <span class="card-category-list-name" title="装修">装修</span>
                    <span class="card-category-list-count">0</span>
                </a>
            </li>
        </ul>


    </div>
</div>

                
                
            
            

        
            
                
                
                    <div class="sticky_layout">
                        <!-- tag & stat 粘性布局 -->
<div class="card-widget card-tags card-archives card-webinfo card-allinfo">


        <span>
            <!-- 标签 -->


    <div class="item-headline"></div>
    <div class="card-tag-cloud">
        <a class="tag-item" style="font-size:1em" href="/tags/typescript"
           title="TypeScript">
            <!-- 角标 -->
            TypeScript<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/webpack"
           title="Webpack">
            <!-- 角标 -->
            Webpack<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/node"
           title="Node">
            <!-- 角标 -->
            Node<sup>2</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/vue2"
           title="Vue2">
            <!-- 角标 -->
            Vue2<sup>5</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/nestjs"
           title="NestJs">
            <!-- 角标 -->
            NestJs<sup></sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/ubuntu"
           title="Ubuntu">
            <!-- 角标 -->
            Ubuntu<sup>3</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/flutter"
           title="Flutter">
            <!-- 角标 -->
            Flutter<sup></sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/linux"
           title="Centos">
            <!-- 角标 -->
            Centos<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/vue-router"
           title="Vue-router">
            <!-- 角标 -->
            Vue-router<sup>0</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/zhi-yu"
           title="治愈">
            <!-- 角标 -->
            治愈<sup>13</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/zhuang-xiu"
           title="装修">
            <!-- 角标 -->
            装修<sup>0</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/build-tools"
           title="构建工具">
            <!-- 角标 -->
            构建工具<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/qian-duan-you-hua"
           title="前端优化">
            <!-- 角标 -->
            前端优化<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/vue3"
           title="Vue3">
            <!-- 角标 -->
            Vue3<sup>1</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/html"
           title="Html">
            <!-- 角标 -->
            Html<sup>2</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/css"
           title="CSS">
            <!-- 角标 -->
            CSS<sup>3</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/docker"
           title="Docker">
            <!-- 角标 -->
            Docker<sup>0</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/vite"
           title="Vite">
            <!-- 角标 -->
            Vite<sup>3</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/uniapp"
           title="Uniapp">
            <!-- 角标 -->
            Uniapp<sup>2</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/front-end-project"
           title="前端项目">
            <!-- 角标 -->
            前端项目<sup>3</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/windows"
           title="Windows">
            <!-- 角标 -->
            Windows<sup></sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/chao-cai"
           title="炒菜">
            <!-- 角标 -->
            炒菜<sup>0</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/data-large-screen"
           title="数据大屏">
            <!-- 角标 -->
            数据大屏<sup>2</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/react"
           title="React">
            <!-- 角标 -->
            React<sup>0</sup>
        </a><a class="tag-item" style="font-size:1em" href="/tags/qian-duan"
           title="JavaScript">
            <!-- 角标 -->
            JavaScript<sup>6</sup>
        </a>
    </div>
    <script>
        for (const tag of document.getElementsByClassName('tag-item')) {
            let randomColor ="#"+((1<<24)*Math.random()|0).toString(16);
            tag.style.color = randomColor;
        }
    </script>



            <hr>
        </span>

    <span>
            <!-- 标签 -->



    <div  class="item-headline"><a class="card-more-btn" href="/archives/" title="查看更多" data-pjax-state=""></a></div>
    <ul  class="card-archive-list">
        
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2025/04"
                    data-pjax-state=""><span
                    class="card-archive-list-date">四月 2025

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">5</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2025/03"
                    data-pjax-state=""><span
                    class="card-archive-list-date">三月 2025

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archive-list-link" href="/archives/2025/02"
                    data-pjax-state=""><span
                    class="card-archive-list-date">二月 2025

                        </span>
                <div class="card-archive-list-count-group"><span
                        class="card-archive-list-count">7</span><span
                        class="card-archive-list-count-unit">篇</span></div>
            </a>
            </li>
            <li class="card-archive-list-item"
            ><a
                    class="card-archt: 24px;
                top: 20px;
                border-radius: 500px;
                transition: all 0.5s ease 0s;
                position: absolute;
            }

            #aside-content .card-info .author-info__name {
                font-weight: 500;
                font-size: 1.57em;
            }

            #aside-content .card-info .author-info__name {
                text-align: left;
                font-weight: bold;
                color: var(--heo-white);
                font-size: 28px;
                line-height: 1.1;
                margin-top: 0.8rem;
                margin-bottom: 0.4rem;
            }
        </style>

    


    <!-- 样式一 -->
    

</div>

                
                
            
            

        
            
                
                    <!-- 最新评论 -->
<div class="card-widget card-recent-post" >
    <a onclick="pjax.loadUrl(&quot;\/newest&quot;)"
       title="查看更多"
       class="card-more-btn"
       style="cursor:pointer" draggable="false"><i class="haofont hao-icon-chevron-right"></i></a>
    <div class="item-headline"><i class="haofont hao-icon-chat--fill" style="font-size: 19px;"></i><span>最新评论</span></div>
    <div class="aside-list" id="newcomm">
        
    </div>
</div>

                
                
            
            

        
            
                
                    <div class="card-widget card-recent-post">
    <div class="item-headline"><i class="haofont hao-icon-eicon_map-2-line1"></i><span>最近发布</span></div>
    <div class="aside-list">
        <!-- 最新文章，用户可以自定义展示数量 -->
        <div class="aside-list-item">
            <a class="thumbnail" href="/archives/1745216409748" title="electron 打包vue项目到桌面端">
                <img alt="electron 打包vue项目到桌面端"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;electron 打包vue项目到桌面端">
            </a>
            <div class="content">
                <a class="title" href="/archives/1745216409748" title="electron 打包vue项目到桌面端">electron 打包vue项目到桌面端</a>
                <time title="2025-04-21 14:26:00" datetime="2025-04-21 14:26:00">2025-04-21 14:26:00</time>
            </div>
        </div>
        <div class="aside-list-item">
            <a class="thumbnail" href="/archives/1744888161019" title="taro跨端开发">
                <img alt="taro跨端开发"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;taro跨端开发">
            </a>
            <div class="content">
                <a class="title" href="/archives/1744888161019" title="taro跨端开发">taro跨端开发</a>
                <time title="2025-04-17 22:19:00" datetime="2025-04-17 22:19:00">2025-04-17 22:19:00</time>
            </div>
        </div>
        <div class="aside-list-item">
            <a class="thumbnail" href="/archives/1744775797368" title="快速入门React">
                <img alt="快速入门React"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;快速入门React">
            </a>
            <div class="content">
                <a class="title" href="/archives/1744775797368" title="快速入门React">快速入门React</a>
                <time title="2025-04-17 09:26:30" datetime="2025-04-17 09:26:30">2025-04-17 09:26:30</time>
            </div>
        </div>
        <div class="aside-list-item">
            <a class="thumbnail" href="/archives/1744770559516" title="vue前端项目优化手段">
                <img alt="vue前端项目优化手段"
                     src="https://www.msirknightblog.cn/blog/static/2024/12/07/F39448C6-076C-46F8-875D-AAE393F53EF0.gif?imageslim/zlevel/2"
                     data-lazy-src="https://api.boxmoe.com/random.php?size=mw1024&amp;vue前端项目优化手段">
            </a>
            <div class="content">
                <a class="title" href="/archives/1744770559516" title="vue前端项目优化手段">vue前端项目优化手段</a>
                <time title="2025-04-16 10:33:00" datetime="2025-04-16 10:33:00">2025-04-16 10:33:00</time>
            </div>
        </div>
    </div>
</div>
                
                
            
            

        
            
                
                    <!-- 目录 -->
<div class="card-widget card-categories">
    <div class="item-headline"><i class="haofont hao-icon-folder-open"></i><span>分类</span></div>
    <div class="aside-list">
        <ul class="card-category-list">
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/qian-duan">
                        <span class="card-category-list-name" title="前端">前端</span>
                    <span class="card-category-list-count">29</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/hou-duan">
                        <span class="card-category-list-name" title="后端">后端</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/kua-duan">
                        <span class="card-category-list-name" title="跨端">跨端</span>
                    <span class="card-category-list-count">3</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/yun-wei">
                        <span class="card-category-list-name" title="运维">运维</span>
                    <span class="card-category-list-count">3</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/project">
                        <span class="card-category-list-name" title="项目">项目</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/shu-ju-ku">
                        <span class="card-category-list-name" title="数据库">数据库</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/xi-tong">
                        <span class="card-category-list-name" title="系统">系统</span>
                    <span class="card-category-list-count">6</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/jian-zhan">
                        <span class="card-category-list-name" title="建站">建站</span>
                    <span class="card-category-list-count">1</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/mian-shi-ti">
                        <span class="card-category-list-name" title="面试题">面试题</span>
                    <span class="card-category-list-count">4</span>
                </a>
            </li>
            <li class="card-category-list-item">
                <a class="card-category-list-link" href="/categories/zhi-yu">
                        <span clatitle', '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', '.js-pjax', '#site-config']
        
        pjaxSelectors.unshift('meta[property="og:type"]', 'meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]', 'meta[property="og:description"]'
                , 'meta[name="twitter:title"]', 'meta[name="twitter:url"]', 'meta[name="twitter:description"]', 'meta[name="twitter:image"]')
        
        var pjax = new Pjax({
            elements: 'a:not([target="_blank"])',
            selectors: pjaxSelectors,
            cacheBust: false,
            analytics: false,
            scrollRestoration: false
        })
        
        document.addEventListener('pjax:send', function () {
            
            // removeEventListener toc scroll
            window.removeEventListener('scroll', window.tocScrollFn)
            
            typeof preloader === 'object' && preloader.initLoading()
            
            if (window.aplayers) {
                for (let i = 0; i < window.aplayers.length; i++) {
                    if (!window.aplayers[i].options.fixed) {
                        window.aplayers[i].destroy()
                    }
                }
            }
            
            typeof typed === 'object' && typed.destroy()
            
            //reset readmode
            const $bodyClassList = document.body.classList
            $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
        })
        
        document.addEventListener('pjax:complete', function () {
            window.refreshFn()
            
            document.querySelectorAll('script[data-pjax]').forEach(item => {
                        const newScript = document.createElement('script')
                        const content = item.text || item.textContent || item.innerHTML || ""
                        Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
                        newScript.appendChild(document.createTextNode(content))
                        item.parentNode.replaceChild(newScript, item)
                    }
            )
            
            GLOBAL_CONFIG.lazyload.enable && window.lazyLoadInstance.update()
            
            typeof chatBtnFn === 'function' && chatBtnFn()
            typeof panguInit === 'function' && panguInit()
            
            // google analytics
            typeof gtag === 'function' && gtag('config', '', {
                'page_path': window.location.pathname
            });
            
            // baidu analytics
            typeof _hmt === 'object' && _hmt.push(['_trackPageview', window.location.pathname]);
            
            typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
            
            // Analytics
            if (false) {
                MtaH5.pgv()
            }
            
            // prismjs
            typeof Prism === 'object' && Prism.highlightAll()
            
            typeof preloader === 'object' && preloader.endLoading()
        })
        
        document.addEventListener('pjax:error', (e) => {
                    if (e.request.status === 404 || e.request.status === 500) {
                        window.location.href = e.request.responseURL;
                    }
                }
        )
    </script>


</div>

<!-- 根据配置设置 css 变量值，全局 css 通过变量值进行处理 -->
<style type="text/css">
    [data-theme=light] {
        --heo-theme: #425AEF !important;
        --heo-theme-op: #425AEF23 !important;
        --heo-theme-op-deep: #425AEFdd !important;
        --heo-theme-none: #425AEF00 !important;
    }

    [data-theme=dark] {
        --heo-theme: #4171d2 !important;
        --heo-theme-op: #4171d223 !important;
        --heo-theme-op-deep: #4171d2dd !important;
        --heo-theme-none: #4171d200 !important;
    }

    :root {
        --halo-comment-widget-component-card-bg: var(--heo-card-bg);
        --halo-comment-widget-component-theme-op: var(--heo-theme-op);
        --halo-comment-widget-component-card-border: var(--heo-card-border);
        --halo-comment-widget-component-shadow-border: var(--heo-shadow-border);
        --halo-comment-widget-component-secondtext: var(--heo-secondtext);
        --halo-comment-widget-component-lighttext: var(--heo-lighttext);
        --halo-comment-widget-component-secondbg: var(--heo-secondbg);
        --halo-comment-widget-component-fontcolor: var(--heo-fontcolor);
        --halo-comment-widget-component-main: var(--heo-main);
        --halo-comment-widget-component-background: var(--heo-background);
        --halo-comment-widget-component-white: var(--heo-white);
        --halo-comment-widget-component-shadow-black: var(--heo-shadow-black);
    }
    #page {
        --halo-comment-widget-component-padding: 1rem;
    }

    .color-scheme-dark,.dark,[data-color-scheme=dark] {
        --halo-search-widget-color-modal-layer: var(--heo-maskbgdeep);
        --halo-search-widget-color-modal-content-bg: var(--heo-card-bg);
        --halo-search-widget-color-form-input: rgb(255 255 255 / 79.9%);
        --halo-search-widget-color-form-input-placeholder: #6b7280d9;
        --halo-search-widget-color-form-input-bg: var(--heo-card-bg);
        --halo-search-widget-color-form-divider: #bbbbbb0f;
        --halo-search-widget-color-result-item-bg: var(--heo-card-bg);
        --halo-search-widget-color-result-item-hover-bg: #90939914;
        --halo-search-widget-color-result-item-title: rgb(255 255 255 / 79.9%);
        --halo-search-widget-color-result-item-content: #ffffff82;
        --halo-search-widget-color-command-kbd-item: #c0c4ccb3;
        --halo-search-widget-color-command-kbd-border: #bbbbbb0f;
        --halo-search-widget-color-result-empty: #6b7280d9
    }

    [data-theme=light] {
        --halo-search-widget-color-result-item-title : #4B5563
    }
    
        #aside-content #card-toc .toc-content a.toc-link:not(.active)  {
            opacity: 1;
            filter: blur(0px);
        }
    
</style>

<script data-pjax="">
    
    //页脚友联
    GLOBAL_CONFIG.isFriendLinksInFooter && heo.addFriendLinksInFooter()
    //音乐页面切换歌曲调用
    if (GLOBAL_CONFIG.isMusic) {
        heo.changeMusicBg(false);
    }
    //代码块
    if (GLOBAL_CONFIG.prism.enable) {
        halo.addPrismTool()
        halo.dataCodeTheme()
    }

</script>
</body>

</html>