PageSourceSearch

https://eloquent-khapse-98a9d2.netlify.app/about/

html eloquent-khapse-98a9d2.netlify.app collected 2026-10-03 10:41:37 UTC 81,567 bytes, 2,290 lines download raw bytes

1<!DOCTYPE html>
2<html>
3  <!-- meta/link... -->
4  
5
6
7
8<head>
9  <meta http-equiv="content-type" content="text/html; charset=utf-8">
10<!-- This site is hosted on Netlify. Anyone can build and deploy a site
11     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=f9d215e3-e2b9-471d-8525-551449bc5772
12     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
13  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
14  <!-- Global site tag (gtag.js) - Google Analytics -->
15
16
17  <title>关于我 | 青云博客-Hexo</title>
18
19  <link rel="icon" type="image/x-icon, image/vnd.microsoft.icon" href="/favicon.ico">
20  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1911880_c1nvbyezg17.css">
21  <link href="https://cdn.jsdmirror.com/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
22  <link href="/js/swiper/[email protected]" rel="stylesheet">
23  
24  
25  
26  
27<link rel="stylesheet" href="/css/animate.min.css">
28
29  
30<link rel="stylesheet" href="/css/style.css">
31
32  
33  
34    <link href="/css/fancybox.css" rel="stylesheet">
35  
36  
37    
38<link rel="stylesheet" href="/js/shareJs/share.min.css">
39
40  
41  <style>
42        @media (max-width: 992px) {
43            #waifu {
44                display: none;
45            }
46        }
47    </style>
48    
48<script defer src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
48
49    <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
50
51    
52        
52<script src="/js/valine/index.js"></script>
52
53    
54    
55    <!-- 依赖于jquery和vue -->
56    
57        
57<script src="https://cdn.jsdmirror.com/npm/[email protected]/dist/jquery.min.js"></script>
57
58    
59
60    
61        
61<script src="https://cdn.jsdmirror.com/npm/[email protected]/dist/vue.min.js"></script>
61
62    
63
64    <!-- import link -->
65    
66        
67            
68        
69            
70        
71    
72    <!-- import script -->
73    
74        
75            <div id="music" key="62c6977a7d8ac" api="https://music.xfyun.club"></div>
75<script defer id="xplayer" src="https://music.xfyun.club/Static/player8/js/player.js" ></script>
75
76        
77            
78        
79    
80
81<meta name="generator" content="Hexo 5.4.0"></head>
82
83  
84  <!-- 预加载动画 -->
85  <!-- 页面预加载动画 -->
86
87  <body>
88    <!-- 判断是否为暗黑风格 -->
89    <!-- 判断是否为黑夜模式 -->
90<script>
91  let isDark = JSON.parse(localStorage.getItem('dark')) || JSON.parse('false');
92
93  if (isDark) {
94    $(document.body).addClass('darkModel');
95  }
96</script>
96
97
98    <!-- 需要在上面加载的js -->
99    
99<script>
100  function loadScript(src, cb) {
101    return new Promise(resolve => {
102      setTimeout(function () {
103        var HEAD = document.getElementsByTagName("head")[0] || document.documentElement;
104        var script = document.createElement("script");
105        script.setAttribute("type", "text/javascript");
106        if (cb) {
107          if (JSON.stringify(cb)) {
108            for (let p in cb) {
109              if (p == "onload") {
110                script[p] = () => {
111                  cb[p]()
112                  resolve()
113                }
114              } else {
115                script[p] = cb[p]
116                script.onload = resolve
117              }
118            }
119          } else {
120            script.onload = () => {
121              cb()
122              resolve()
123            };
124          }
125        } else {
126          script.onload = resolve
127        }
128        script.setAttribute("src", src);
129        HEAD.appendChild(script);
130      });
131    });
132  }
133
134  //https://github.com/filamentgroup/loadCSS
135  var loadCSS = function (src) {
136    return new Promise(resolve => {
137      setTimeout(function () {
138        var link = document.createElement('link');
139        link.rel = "stylesheet";
140        link.href = src;
141        link.onload = resolve;
142        document.getElementsByTagName("head")[0].appendChild(link);
143      });
144    });
145  };
146
147</script>
147 
148
149<!-- 轮播图所需要的js -->
150<script src="/js/swiper/swiper.min.js"></script>
vendor: 1 bytes, line 150
150
151<script src="/js/swiper/vue-awesome-swiper.js"></script>
vendor: 1 bytes, line 151
151
152<script src="/js/swiper/swiper.animate1.0.3.min.js"></script>
152
153
154<script type="text/javascript">
155  Vue.use(window.VueAwesomeSwiper)
156</script>
156
157
158
159  
159<script src="/js/vue-typed-js/index.js"></script>
159
160
161
162<!-- 首页的公告滚动插件的js需要重新加载 -->
163<script src="/js/vue-seamless-scroll/index.js"></script>
163
164
165<!-- 打字机效果js -->
166<script src="https://cdn.jsdmirror.com/npm/[email protected]"></script>
166
167
168
169    <div id="safearea">
170      <main class="main" id="pjax-container">
171        <!-- 头部导航 -->
172        
173<header class="header  " 
174  id="navHeader"
175  style="position: fixed;
176  left: 0; top: 0; z-index: 10;width: 100%;"
177>
178  <div class="header-content">
179    <div class="bars">
180      <div id="appDrawer" class="sidebar-image">
181  <div class="drawer-box-icon">
182    <i class="fas fa-bars" aria-hidden="true" @click="showDialogDrawer"></i>
183  </div>
184  
185  <transition name="fade">
186    <div class="drawer-box_mask" v-cloak style="display: none;" v-show="visible" @click.self="cancelDialogDrawer">
187    </div>
188  </transition>
189  <div class="drawer-box" :class="{'active': visible}">
190    <div class="drawer-box-head bg-color">
191      <img class="drawer-box-head_logo lazyload placeholder" src="/medias/logo.png" class="lazyload placeholder" data-srcset="/medias/logo.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="logo">
192      <h3 class="drawer-box-head_title">青云博客-Hexo</h3>
193      <h5 class="drawer-box-head_desc">一个Hexo博客</h5>
194    </div>
195    
196    <div class="drawer-box-content">
197      <ul class="drawer-box-content_menu">
198        
199          
200            <li class="drawer-box-content_item" style="position: relative;">
201              
202                <a href="/" class="drawer-menu-item-link">
203                  
204                    <i class="fas fa-home" aria-hidden="true"></i>
205                  
206                  <span class="name">首页</span>
207                </a>
208              
209            </li>
210          
211            <li class="drawer-box-content_item" style="position: relative;">
212              
213                <a href="/archives" class="drawer-menu-item-link">
214                  
215                    <i class="fas fa-archive" aria-hidden="true"></i>
216                  
217                  <span class="name">文章</span>
218                </a>
219              
220            </li>
221          
222            <li class="drawer-box-content_item" style="position: relative;">
223              
224                <a href="/talks" class="drawer-menu-item-link">
225                  
226                    <i class="fas fa-comment-dots" aria-hidden="true"></i>
227                  
228                  <span class="name">说说</span>
229                </a>
230              
231            </li>
232          
233            <li class="drawer-box-content_item" style="position: relative;">
234              
235                <a href="/gallery" class="drawer-menu-item-link">
236                  
237                    <i class="fas fa-archive" aria-hidden="true"></i>
238                  
239                  <span class="name">相册</span>
240                </a>
241              
242            </li>
243          
244            <li class="drawer-box-content_item" style="position: relative;">
245              
246                <a href="/about" class="drawer-menu-item-link">
247                  
248                    <i class="fas fa-user" aria-hidden="true"></i>
249                  
250                  <span class="name">关于我</span>
251                </a>
252              
253            </li>
254          
255            <li class="drawer-box-content_item" style="position: relative;">
256              
257                <a href="/friends" class="drawer-menu-item-link">
258                  
259                    <i class="fas fa-film" aria-hidden="true"></i>
260                  
261                  <span class="name">友情链接</span>
262                </a>
263              
264            </li>
265          
266        
267        
268          <li class="drawer-box-content_item">
269            <a target="_blank" rel="noopener" href="https://github.com/1422756921">
270              <i class="fas fa-github" aria-hidden="true"></i>
271              <span>Github</span>
272            </a>
273          </li>
274        
275      </ul>
276    </div>
277  </div>
278</div>
279
280<script>
281  var body = document.body || document.documentElement || window;
282  var vm = new Vue({
283    el: '#appDrawer',
284    data: {
285      visible: false,
286      top: 0,
287      openArr: [],
288    },
289    computed: {
290    },
291    mounted() {
292    },
293    methods: {
294      isOpen(index) {
295        if (this.openArr.includes(index)) {
296          return true;
297        } else {
298          return false;
299        }
300      },
301      openOrCloseMenu(curIndex) {
302        const index = this.openArr.indexOf(curIndex);
303        if (index !== -1) {
304          this.openArr.splice(index, 1);
305        } else {
306          this.openArr.push(curIndex);
307        }
308      },
309      showDialogDrawer() {
310        this.visible = true;
311        // 防止页面滚动,只能让弹框滚动
312        this.top = $(document).scrollTop()
313        body.style.cssText = 'width: 100%; height: 100%;overflow: hidden;';
314      },
315      cancelDialogDrawer() {
316        this.visible = false;
317        body.removeAttribute('style');
318        $(document).scrollTop(this.top)
319      }
320    },
321    created() {}
322  })
323</script>
323
324
325    </div>
326    <div class="blog-title" id="author-avatar">
327      
328        <div class="avatar">
329          <img src="/medias/logo.png" class="lazyload placeholder" data-srcset="/medias/logo.png" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="logo">
330        </div>
331      
332      <a href="/" class="logo">青云博客-Hexo</a>
333    </div>
334    <nav class="navbar">
335      <ul class="menu">
336        
337          
338            <li class="menu-item" style="position: relative;">
339              
340                <a href="/" class="menu-item-link" title="首页">
341                  
342                    <i class="fas fa-home" aria-hidden="true"></i>
343                  
344                  <span class="name">首页</span>
345                </a>
346              
347            </li>
348          
349            <li class="menu-item" style="position: relative;">
350              
351                <a href="/archives" class="menu-item-link" title="文章">
352                  
353                    <i class="fas fa-archive" aria-hidden="true"></i>
354                  
355                  <span class="name">文章</span>
356                </a>
357              
358            </li>
359          
360            <li class="menu-item" style="position: relative;">
361              
362                <a href="/talks" class="menu-item-link" title="说说">
363                  
364                    <i class="fas fa-comment-dots" aria-hidden="true"></i>
365                  
366                  <span class="name">说说</span>
367                </a>
368              
369            </li>
370          
371            <li class="menu-item" style="position: relative;">
372              
373                <a href="/gallery" class="menu-item-link" title="相册">
374                  
375                    <i class="fas fa-archive" aria-hidden="true"></i>
376                  
377                  <span class="name">相册</span>
378                </a>
379              
380            </li>
381          
382            <li class="menu-item" style="position: relative;">
383              
384                <a href="/about" class="menu-item-link" title="关于我">
385                  
386                    <i class="fas fa-user" aria-hidden="true"></i>
387                  
388                  <span class="name">关于我</span>
389                </a>
390              
391            </li>
392          
393            <li class="menu-item" style="position: relative;">
394              
395                <a href="/friends" class="menu-item-link" title="友情链接">
396                  
397                    <i class="fas fa-film" aria-hidden="true"></i>
398                  
399                  <span class="name">友情链接</span>
400                </a>
401              
402            </li>
403          
404        
405      </ul>
406      
407      
408        <div id="appSearch">
409  <div class="search"  @click="showDialog()"><i class="fas fa-search" aria-hidden="true"></i></div>
410  <transition name="fade">
411    <div class="message-box_wrapper" style="display: none;" v-cloak v-show="dialogVisible" @click.self="cancelDialogVisible()">
412      <div class="message-box animated bounceInDown">
413        <h2>
414          <span>
415            <i class="fas fa-search" aria-hidden="true"></i>
416            <span class="title">本地搜索</span>
417          </span>
418          <i class="fas fa-times close" pointer style="float:right;" aria-hidden="true" @click.self="cancelDialogVisible()"></i>
419        </h2>
420        <form class="site-search-form">
421          <input type="text"
422            placeholder="请输入关键字"
423            id="local-search-input" 
424            @click="getSearchFile()"
425            class="st-search-input"
426            v-model="searchInput"
427          />
428        </form>
429        <div class="result-wrapper">
430          <div id="local-search-result" class="local-search-result-cls"></div>
431        </div>
432      </div>
433    </div>
434  </transition>
435</div>
436<script src="/js/local_search.js"></script>
vendor: 1 bytes, line 436
436
437<script>
438  var body = document.body || document.documentElement || window;
439  var vm = new Vue({
440    el: '#appSearch',
441    data: {
442      dialogVisible: false,
443      searchInput: '',
444      top: 0,
445    },
446    computed: {
447    },
448    mounted() {
449      window.addEventListener('pjax:complete', () => {
450        this.cancelDialogVisible();
451      })
452    },
453    methods: {
454      showDialog() {
455        this.dialogVisible = true;
456        // 防止页面滚动,只能让弹框滚动
457        this.top = $(document).scrollTop()
458        body.style.cssText = 'overflow: hidden;';
459      },
460      getSearchFile() {
461        if (!this.searchInput) {
462          getSearchFile("/search.xml");
463        }
464      },
465      cancelDialogVisible() {
466        this.dialogVisible = false;
467        body.removeAttribute('style');
468        $(document).scrollTop(this.top)
469      },
470    },
471    created() {}
472  })
473</script>
473
474<!-- 解决刷新页面闪烁问题,可以在元素上添加display: none, 或者用vue.extend方法,详情:https://blog.csdn.net/qq_31393401/article/details/81017912 -->
475<!-- 下面是搜索基本写法 -->
476<!-- 
476<script type="text/javascript" id="local.search.active">
477  var inputArea = document.querySelector("#local-search-input");
478  inputArea.onclick   = function(){ getSearchFile(); this.onclick = null }
479  inputArea.onkeydown = function(){ if(event.keyCode == 13) return false }
480</script>
480 -->
481
482      
483
484    </nav>
485  </div>
486  
487    <a target="_blank" rel="noopener" href="https://github.com/1422756921" class="github-corner color-primary" aria-label="View source on GitHub"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
488  
489  
490    <div id="he-plugin-simple"></div>
491    
491<script>
492      WIDGET = {
493        CONFIG: {
494          "modules": "012",
495          "background": 5,
496          "tmpColor": "4A4A4A",
497          "tmpSize": 16,
498          "cityColor": "4A4A4A",
499          "citySize": 16,
500          "aqiSize": 16,
501          "weatherIconSize": 24,
502          "alertIconSize": 18,
503          "padding": "10px 10px 10px 10px",
504          "shadow": "1",
505          "language": "auto",
506          "borderRadius": 5,
507          "fixed": "false",
508          "vertical": "middle",
509          "horizontal": "center",
510          "key": "2784dd3fcb1e4f0f9a9b579bf69641f2"
511        }
512      }
513    </script>
513
514    
514<script defer src="/"></script>
514 
515    
516</header>
517        <!-- 内容区域 -->
518        
519 <!-- prismjs 代码高亮 -->
520 
521
522
523<div class="bg-dark-floor" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;"></div>
524
525
526  <!-- 文章详情页顶部图片和标题 -->
527
528
529
530
531<div class="post-detail-header" id="thumbnail_canvas" style="background-repeat: no-repeat; background-size: cover; 
532  background-position: center center;position: relative;background-image:url('https://pic3.zhimg.com/80/v2-5f7cb7e900b9dcf5354c3d4d2c5cc3c2_1440w.webp')">
533  <div class="post-detail-header-mask"></div>
534  <canvas id="header_canvas"style="position:absolute;bottom:0;pointer-events:none;"></canvas>
535  
536  <div class="post-detail-header_info-box">
537    <div class="title-box">
538      <span class="title">
539        关于我
540      </span>
541    </div>
542    
543    
544  </div>
545  
546  
547    
547<script src="/js/bubble/bubble.js"></script>
547
548  
549</div>
550
551
552
553
554
555<div class="post-detail-content post-row" 
556  style="padding-top: 0px;">
557  <div class="main-content">
558    <article class="post post-detail">
559      <div class="post-content">
560        <h1 id="个人介绍"><a href="#个人介绍" class="headerlink" title="个人介绍"></a>个人介绍</h1><p>博主: 青云依兮 | 性别: 男 | 邮箱: <a href="mailto:&#49;&#x34;&#x32;&#x32;&#55;&#x35;&#54;&#x39;&#x32;&#x31;&#x40;&#x71;&#x71;&#46;&#x63;&#x6f;&#x6d;">&#49;&#x34;&#x32;&#x32;&#55;&#x35;&#54;&#x39;&#x32;&#x31;&#x40;&#x71;&#x71;&#46;&#x63;&#x6f;&#x6d;</a></p>
561<h2 id="我的书籍"><a href="#我的书籍" class="headerlink" title="我的书籍"></a>我的书籍</h2><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener" href="http://blog.aerr.cn"><div class="img"><img src="https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="info"><img src="https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/><span class="title">未添加</span><span class="desc">这是描述</span></div></a>
562<a class="site-card" target="_blank" rel="noopener" href="https://blog.aerr.cn/"><div class="img"><img src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="info"><img src="https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/><span class="title">未添加</span><span class="desc">这是描述哦</span></div></a>
563</div>
564
565<h2 id="我的社交账号"><a href="#我的社交账号" class="headerlink" title="我的社交账号"></a>我的社交账号</h2><div style="display: flex;">
566<span class='btn center cool-2'><a class="button" target="_blank" rel="noopener" href='https://github.com/1422756921' title='Github'><i class='fa-brands fa-github-alt'></i>Github</a></span>
567<span style="width:5px;"></span>
568<span class='btn center cool-2'><a class="button" target="_blank" rel="noopener" href='http://wpa.qq.com/msgrd?v=3&uin=1422756921&site=qq&menu=yes' title='QQ'><i class='fa-brands fa-zhihu'></i>QQ</a></span>
569</div>
570
571<h2 id="我的技能"><a href="#我的技能" class="headerlink" title="我的技能"></a>我的技能</h2><div style="display: grid;
572  grid-template-columns: 50% 50%;
573  grid-template-rows: 30px 30px;
574  grid-column-gap: 20px">
575<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-danger"  style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"><p>社交</p></div></div>
576<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-info"  style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><p>恋爱</p></div></div>
577<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-success"  style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><p>混吃等死</p></div></div>
578<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-warning"  style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><p>CV工程师</p></div></div>
579</div>
580
581<h2 id="其他站点"><a href="#其他站点" class="headerlink" title="其他站点"></a>其他站点</h2><div class="link-group"><div class="tagLink"><a class="link-card" title="wp博客" target="_blank" rel="noopener" href="http://blog.aerr.cn"><span class="link-card-backdrop" style="background-image: url(https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp)"></span><div class="left"><img src="https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">wp博客</p><p class="url">http://blog.aerr.cn</p></div></a></div>
582
583<div class="tagLink"><a class="link-card" title="导航页" target="_blank" rel="noopener" href="http://dh.aerr.cn"><span class="link-card-backdrop" style="background-image: url(https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp)"></span><div class="left"><img src="https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-970dd5538f106dd6be064c4eafc01c36_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp"/></div><div class="right"><p class="text">导航页</p><p class="url">http://dh.aerr.cn</p></div></a></div>
584</div>
585
586<h2 id="我的游戏"><a href="#我的游戏" class="headerlink" title="我的游戏"></a>我的游戏</h2><div class="gallery ">
587              <p><img src="https://pic2.zhimg.com/v2-abb2c12e9fbe8dda1993f7cd5d149159_b.jpg" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/v2-abb2c12e9fbe8dda1993f7cd5d149159_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="王者荣耀"><br><img src="https://th.bing.com/th/id/R.6a650953831e9772b14a6de8544ef5bc?rik=Mr/ds0vrpv7XzA&pid=ImgRaw&r=0" class="lazyload placeholder" data-srcset="https://th.bing.com/th/id/R.6a650953831e9772b14a6de8544ef5bc?rik=Mr/ds0vrpv7XzA&pid=ImgRaw&r=0" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="我的世界"></p>
588            </div>
589
590<h2 id="我的相册"><a href="#我的相册" class="headerlink" title="我的相册"></a>我的相册</h2><div class="tag-plugin post-swiper-container" width="fill"><div class="swiper-wrapper"><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">我的相册1</p><img no-lazy class="swiper-slide-img" src="https://pic3.zhimg.com/80/v2-7cfc909ebe8d83683909846edd6b5232_1440w.webp"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">我的相册2</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">我的相册3</p><img no-lazy class="swiper-slide-img" src="https://pic2.zhimg.com/80/v2-63bbdb5b76b8d349ad35ff4281efbd37_1440w.webp"></a></div><div class="swiper-slide"><a class="swiper-slide-href_tag" href="javascript:;"><p class="ani animated swiper-slide-desc_tag" swiper-animate-effect="fadeInDown">我的相册4</p><img no-lazy class="swiper-slide-img" src="https://pica.zhimg.com/80/v2-61f99f8dcf899f54cad2a1aa28b21e44_1440w.webp"></a></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev blur"></div><div class="swiper-button-next blur"></div></div>
591
592      </div>
593      <div class="post-tags-categories">
594        
595      </div>
596      
597        <div class="copyright">
598  <ul class="post-copyright">
599    <li class="post-copyright-author">
600    <strong>作者:  </strong>青云依兮</a>
601    </li>
602    <li class="post-copyright-link">
603    <strong>文章链接:  </strong>
604    <a href='/about/' target='_blank' title='关于我'>https://1422756921.github.io/about/index.html</a>
605    </li>
606    <li class="post-copyright-license">
607      <strong>版权声明:   </strong>
608      本网站所有文章除特别声明外,均采用 <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">CC BY-NC-ND 4.0</a>
609      许可协议。转载请注明出处!
610    </li>
611  </ul>
612<div>
613      
614    </article>
615    <!-- 上一篇文章和下一篇文章 -->
616    
617      <!-- 文章详情页的上一页和下一页 -->
618<div class="post-nav">
619
620
621
622
623
624</div>
625
626    
627    
628
629    <!-- 打赏 -->
630    
631      <div id="appDonate" class="post-donate">
632  <div id="donate_board" class="donate_bar center" ref="donate">
633    <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏" @click="showDialogDrawer()"></a>
634  </div>
635  <transition name="fade">
636    <div 
637      class="donate-box-mask"
638      v-cloak 
639      v-show="visible"
640      @click="cancelDialogDrawer()"
641    >
642    </div>
643  </transition>
644  <transition name="bounce">
645    <div class="donate-box" v-cloak v-show="visible">
646      <div class="donate-box_close">
647        <i class="fas fa-times" aria-hidden="true" @click="cancelDialogDrawer" pointer></i>
648      </div>
649      <div class="donate-box_title">
650        <h4>
651          你的赏识是我前进的动力
652        </h4>
653      </div>
654      <div class="donate-box_tab">
655        <div class="Alipay" pointer :class="{'active': tabActive === 'Alipay'}" @click="changeTabActive('Alipay')">
656          支付宝
657        </div>
658        <div class="WeChatpay" pointer :class="{'active': tabActive === 'WeChatpay'}" @click="changeTabActive('WeChatpay')">
659          微信
660        </div>
661      </div>
662      <div class="donate-box_img">
663        <div class="AlipayImg" v-show="tabActive === 'Alipay'">
664          <img src="/medias/zfb.jpg" class="lazyload placeholder" data-srcset="/medias/zfb.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="支付宝打赏" />
665        </div> 
666        <div class="WeChatpayImg" v-show="tabActive === 'WeChatpay'">
667          <img src="/medias/wx.jpg" class="lazyload placeholder" data-srcset="/medias/wx.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="微信打赏" />
668        </div>
669      </div>
670    </div>
671  </transition>
672</div>
673
674<script>
675  var body = document.body || document.documentElement || window;
676  var vm = new Vue({
677    el: '#appDonate',
678    data: {
679      visible: false,
680      tabActive: 'Alipay',
681      top: 0,
682    },
683    computed: {
684    },
685    mounted() {
686    },
687    methods: {
688      showDialogDrawer() {
689        this.visible = true;
690        // 防止页面滚动,只能让弹框滚动
691        // function getScroll() {
692        //   return {
693        //     left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
694        //     top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
695        //   };
696        // }
697        this.top = $(document).scrollTop() // or getScroll().top
698        // console.log('aa', $('.main-content'));
699        body.style.cssText = 'overflow: hidden;';
700      },
701      cancelDialogDrawer() {
702        this.visible = false;
703        body.removeAttribute('style');
704        $(document).scrollTop(this.top)
705      },
706      changeTabActive(name) {
707        this.tabActive = name;
708      }
709    },
710    created() {}
711  })
712</script>
712
713    
714
715    <!-- 分享 -->
716    
717      <!-- https://github.com/overtrue/share.js -->
718<!-- 文章详情页的分享 -->
719<div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享!</p>"></div>
720
721<script src="/js/shareJs/social-share.min.js"></script>
721
722</script>
722
723
724<style>
725  .social-share {
726    margin: 20px 0;
727  }
728</style>
729
730
731    
732    
733    <!-- 评论 -->
734    <!-- 评论 -->
735
736  <div id="myComment">
737    
738      
739<section id="comments" style="padding: 1em;"
740	class="animated bounceInUp">
741	<div id="vcomment" class="comment"></div>
742</section>
743<style>
744	#comments {
745		background: rgb(206 255 224 / 81%);
746	}
747	#veditor {
748		background-image: url('/');
749		background-size: contain;
750		background-repeat: no-repeat;
751		background-position: right;
752		background-color: rgba(255, 255, 255, 0);
753		resize: vertical;
754	}
755	#veditor:focus{
756		background-position-y: 200px;
757		transition: all 0.2s ease-in-out 0s;
758	}
759	#vcomment .vcards .vcard .vh .vhead .vtag.vvisitor {
760		background-color: #42b983;
761	}
762	.v[data-class=v] .vbtn:active, .v[data-class=v] .vbtn:hover {
763		color: #42b983;
764		border-color: #42b983;
765	}
766	#vcomment .vcards .vcard .vhead .vsys i {
767		display: none;
768	}
769	/* 底部valine链接 */
770	#vcomment .vpower {
771		display: none;
772	}
773	
774	/* 底下注释是修改 名称和邮箱和网址输入框的样式 */
775	/* #vcomment .vheader {
776		display: flex;
777		justify-content: space-around;
778	}
779	
780	#vcomment .vheader .vnick {
781		width: 31%;
782		border: 2px solid #dedede;
783		padding-left: 10px;
784		padding-right: 10px;
785		border-radius: 5px
786	}
787
788	#vcomment .vheader .vmail {
789		width: 31%;
790		border: 2px solid #dedede;
791		padding-left: 10px;
792		padding-right: 10px;
793		border-radius: 5px
794	}
795
796	#vcomment .vheader .vlink {
797		width: 31%;
798		border: 2px solid #dedede;
799		padding-left: 10px;
800		padding-right: 10px;
801		border-radius: 5px
802	} */
803
804	img.vimg {
805		transition: all 1s;
806		/* 头像旋转时间为 1s */
807	}
808
809	img.vimg:hover {
810		transform: rotate(360deg);
811		-webkit-transform: rotate(360deg);
812		-moz-transform: rotate(360deg);
813		-o-transform: rotate(360deg);
814		-ms-transform: rotate(360deg);
815	}
816
817	#vcomment .vcards .vcard {
818		padding: 15px 20px 0 20px;
819		border-radius: 10px;
820		margin-bottom: 15px;
821		box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
822		transition: all .3s
823	}
824
825	#vcomment .vcards .vcard:hover {
826		box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
827	}
828
829	#vcomment .vcards .vcard .vh .vcard {
830		border: none;
831		box-shadow: none;
832	}
833</style>
834    
835  </div>
836
837<!-- comment script in themes\hexo-theme-bamboo\layout\_partial\scripts\index.ejs -->
838
839
840  </div>
841
842  <!-- 目录 -->
843  <aside id='l_side'>
844  
845    
846      <section class="widget side_blogger">
847  <div class='content'>
848    
849      
850        <a class='avatar flat-box rectangle' href='/about/'>
851          <img src='http://q1.qlogo.cn/g?b=qq&nk=1422756921&s=160'/>
852        </a>
853      
854    
855    
856      <div class='text'>
857        
858          <h2>青云依兮</h2>
859        
860        
861          <p>Hexo</p>
862
863        
864        
865          <p><span id="jinrishici-sentence">青云博客-Hexo</span></p>
866          
866<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
866
867        
868      </div>
869    
870    
871      <div class="social-wrapper">
872        
873          
874        
875          
876            <a href="mailto:[email protected]"
877              class="social fas fa-envelope flat-btn"
878              target="_blank"
879              rel="external nofollow noopener noreferrer">
880              
881            </a>
882          
883        
884          
885            <a href="https://github.com/1422756921"
886              class="social fab fa-github flat-btn"
887              target="_blank"
888              rel="external nofollow noopener noreferrer">
889              
890            </a>
891          
892        
893          
894            <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1422756921&amp;site=qq&amp;menu=yes"
895              class="social fab fa-qq flat-btn"
896              target="_blank"
897              rel="external nofollow noopener noreferrer">
898              
899            </a>
900          
901        
902      </div>
903    
904  </div>
905</section>
906
907    
908  
909  
910  
911    
912  
913
914  <div class="layout_sticky">    
915    
916      
917        
918  
919      
920      
921        
922  
923      
924      
925  <section class="widget side_recent_post">
926    
927  <header>
928    
929      <a style="color: " href='/tags/'><i class="fas fa-book fa-fw" aria-hidden="true"></i><span class='name'>最新文章</span></a>
930    
931  </header>
932
933
934    <div class='content'>
935      
936      <!-- hash算法 -->
937      
938      <div class="aside-list">
939        
940          <div class="aside-list-item">
941            
942            
943            
944
945            <div class="post-img-box">
946              <a href="/2025/07/12/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AD%E8%BD%AC%E6%9C%8D%E5%8A%A1%E5%99%A8/" class="post-img " style="background-size: cover; 
947                background-position: center center;">
948                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="">
949              </a>
950            </div>
951            <div class="post-date-title">
952              <div>
953                
954                  <span class="post-date">07-12</span>
955                
956              </div>
957              <a class="post-title" href="/2025/07/12/%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BA%E4%B8%AD%E8%BD%AC%E6%9C%8D%E5%8A%A1%E5%99%A8/">如何搭建中转服务器</a>
958            </div>
959          </div>
960        
961          <div class="aside-list-item">
962            
963            
964            
965
966            <div class="post-img-box">
967              <a href="/2025/07/12/%E5%A6%82%E4%BD%95%E5%9C%A83-ui%E9%9D%A2%E6%9D%BF%E6%B7%BB%E5%8A%A0%E4%BD%8F%E5%AE%85IP/" class="post-img " style="background-size: cover; 
968                background-position: center center;">
969                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" class="lazyload placeholder" data-srcset="https://pica.zhimg.com/80/v2-573ac3e25de03fad9c32add5a05e5cfc_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="">
970              </a>
971            </div>
972            <div class="post-date-title">
973              <div>
974                
975                  <span class="post-date">07-12</span>
976                
977              </div>
978              <a class="post-title" href="/2025/07/12/%E5%A6%82%E4%BD%95%E5%9C%A83-ui%E9%9D%A2%E6%9D%BF%E6%B7%BB%E5%8A%A0%E4%BD%8F%E5%AE%85IP/">如何在3-ui面板添加住宅IP</a>
979            </div>
980          </div>
981        
982          <div class="aside-list-item">
983            
984            
985            
986
987            <div class="post-img-box">
988              <a href="/2025/07/08/%E7%94%A83x-ui%E6%90%AD%E5%BB%BAreality/" class="post-img " style="background-size: cover; 
989                background-position: center center;">
990                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="https://pic3.zhimg.com/v2-a5267dfbf175991d4b3a69b41f3f678a_b.jpg" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/v2-a5267dfbf175991d4b3a69b41f3f678a_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="">
991              </a>
992            </div>
993            <div class="post-date-title">
994              <div>
995                
996                  <span class="post-date">07-08</span>
997                
998              </div>
999              <a class="post-title" href="/2025/07/08/%E7%94%A83x-ui%E6%90%AD%E5%BB%BAreality/">用3x-ui搭建reality</a>
1000            </div>
1001          </div>
1002        
1003          <div class="aside-list-item">
1004            
1005            
1006            
1007
1008            <div class="post-img-box">
1009              <a href="/2023/12/08/Windows%E6%90%AD%E5%BB%BAv2%E6%9C%8D%E5%8A%A1%E7%AB%AF/" class="post-img " style="background-size: cover; 
1010                background-position: center center;">
1011                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="https://pic3.zhimg.com/v2-a5267dfbf175991d4b3a69b41f3f678a_b.jpg" class="lazyload placeholder" data-srcset="https://pic3.zhimg.com/v2-a5267dfbf175991d4b3a69b41f3f678a_b.jpg" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="">
1012              </a>
1013            </div>
1014            <div class="post-date-title">
1015              <div>
1016                
1017                  <span class="post-date">12-08</span>
1018                
1019              </div>
1020              <a class="post-title" href="/2023/12/08/Windows%E6%90%AD%E5%BB%BAv2%E6%9C%8D%E5%8A%A1%E7%AB%AF/">Windows搭建v2服务端</a>
1021            </div>
1022          </div>
1023        
1024          <div class="aside-list-item">
1025            
1026            
1027            
1028
1029            <div class="post-img-box">
1030              <a href="/2023/07/13/%E6%8E%A8%E8%8D%90%E5%87%A0%E4%B8%AA%E5%85%8D%E8%B4%B9%E5%9B%BE%E5%BA%8A/" class="post-img " style="background-size: cover; 
1031                background-position: center center;">
1032                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="https://pic2.zhimg.com/80/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" class="lazyload placeholder" data-srcset="https://pic2.zhimg.com/80/v2-e22aaad20d20634f506f57fff0fcbc17_1440w.webp" srcset="https://pic1.zhimg.com/v2-cd38920285d125be80b3eb504052c550_b.webp" alt="">
1033              </a>
1034            </div>
1035            <div class="post-date-title">
1036              <div>
1037                
1038                  <span class="post-date">07-13</span>
1039                
1040              </div>
1041              <a class="post-title" href="/2023/07/13/%E6%8E%A8%E8%8D%90%E5%87%A0%E4%B8%AA%E5%85%8D%E8%B4%B9%E5%9B%BE%E5%BA%8A/">推荐几个免费图床</a>
1042            </div>
1043          </div>
1044        
1045      </div>
1046    </div>
1047  </section>
1048
1049      
1050  <section class="widget side_archives">
1051    
1052    <header><a style="color: red" href='/archives/'><i class="fas fa-archive fa-fw" aria-hidden="true"></i><span class='name'>归档</span></a></header><div class="content"><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2025/07/"><span class="card-archive-list-date">七月 2025</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/12/"><span class="card-archive-list-date">十二月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/07/"><span class="card-archive-list-date">七月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/11/"><span class="card-archive-list-date">十一月 2021</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">1</span></a></li></ul></div>
1053  </section>
1054
1055      <section class="widget side_webinfo">
1056  
1057  <header>
1058    
1059      <i style="color: " class="fas fa-chart-line fa-fw" aria-hidden="true"></i><span class='name' style="color: ">站点信息</span>
1060    
1061  </header>
1062
1063
1064  <div class='content'>
1065    <div class="webinfo">
1066      
1067        <div class="webinfo-item">
1068          <div>文章数目:</div>
1069          <div>12 篇</div>
1070        </div>
1071      
1072
1073      
1074        <div class="webinfo-item">
1075          <div>已运行时间:</div>
1076          <div id="webinfo-runtime-count" publish_date="03/24/2020 21:34:09"></div>
1077        </div>
1078        
1078<script>
1079          var BirthDay = new Date(new Date('2021/11/18'));
1080          var today = new Date();
1081          var timeold = (today.getTime() - BirthDay.getTime());
1082          var daysold = Math.floor(timeold / (24 * 60 * 60 * 1000));
1083          document.getElementById('webinfo-runtime-count').innerHTML = daysold + ' 天';
1084        </script>
1084
1085      
1086
1087
1088      
1089
1090      
1091        <div class="webinfo-item">
1092          <div>本站访客数:</div>
1093          
1094          <div><span id="busuanzi_value_site_uv"><i class="fas fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 人</div>
1095          
1096        </div>
1097      
1098
1099      
1100        <div class="webinfo-item">
1101          <div>本站总访问量:</div>
1102          
1103          <div><span id="busuanzi_value_site_pv"><i class="fas fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 次</div>
1104          
1105        </div>
1106      
1107
1108      
1109        <div class="webinfo-item">
1110          <div>最后活动时间:</div>
1111          
1112            <div id="last-update" style="display: none;">Sat Jan 31 2026 05:51:00 GMT+0000 (Coordinated Universal Time)</div>
1113            <div id="last-update-show">2026-01-31 日</div>
1114          
1115        </div>
1116        
1117        
1117<script>
1118          function timeago(dateTimeStamp) {
1119              var minute = 1000 * 60; //把分,时,天,周,半个月,一个月用毫秒表示
1120              var hour = minute * 60;
1121              var day = hour * 24;
1122              var week = day * 7;
1123              var month = day * 30;
1124              var now = new Date().getTime(); //获取当前时间毫秒
1125              var diffValue = now - dateTimeStamp; //时间差
1126              if (diffValue < 0) {
1127                  return;
1128              }
1129              var minC = diffValue / minute; //计算时间差的分,时,天,周,月
1130              var hourC = diffValue / hour;
1131              var dayC = diffValue / day;
1132              var weekC = diffValue / week;
1133              var monthC = diffValue / month;
1134              if (monthC >= 1 && monthC <= 3) {
1135                  result = " " + parseInt(monthC) + " 月前"
1136              } else if (weekC >= 1 && weekC <= 3) {
1137                  result = " " + parseInt(weekC) + " 周前"
1138              } else if (dayC >= 1 && dayC <= 6) {
1139                  result = " " + parseInt(dayC) + " 天前"
1140              } else if (hourC >= 1 && hourC <= 23) {
1141                  result = " " + parseInt(hourC) + " 小时前"
1142              } else if (minC >= 1 && minC <= 59) {
1143                  result = " " + parseInt(minC) + " 分钟前"
1144              } else if (diffValue >= 0 && diffValue <= minute) {
1145                  result = "刚刚"
1146              } else {
1147                  var datetime = new Date();
1148                  datetime.setTime(dateTimeStamp);
1149                  var Nyear = datetime.getFullYear();
1150                  var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
1151                  var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
1152                  var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
1153                  var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
1154                  var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
1155                  result = Nyear + "-" + Nmonth + "-" + Ndate
1156              }
1157              return result;
1158          }
1159          var lastUpDate = document.getElementById('last-update').innerHTML;
1160          try {
1161            document.getElementById('last-update-show').innerHTML = timeago(new Date(lastUpDate));
1162          } catch (error) {
1163            document.getElementById('last-update-show').innerHTML = '2026-01-31 日';
1164          }
1165        </script>
1165
1166        
1167      
1168    </div>
1169  </div>
1170</section>
1171      
1172  
1173
1174    
1175  </div>
1176</aside>
1177
1178  <!-- 图片放大 Wrap images with fancybox support -->
1179  
1179<script src="/js/wrapImage.js"></script>
1179
1180</div>
1181
1182<!-- 文章详情页背景图 -->
1183<div id="appBgSwiper" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -2;"
1184	:style="{'background-color': bgColor ? bgColor : 'transparent'}">
1185	<transition-group tag="ul" :name="names">
1186		<li v-for='(image,index) in img' :key='index' v-show="index === mark" class="bg-swiper-box">
1187			<img :src="image" class="bg-swiper-img no-lazy">
1188		</li>
1189	</transition-group>
1190</div>
1191<script>
1192	var vm = new Vue({
1193		el: '#appBgSwiper',
1194		data: {
1195			names: '' || 'fade' || 'fade', // translate-fade fade
1196			mark: 0,
1197			img: [],
1198			bgColor: '',
1199			time: null
1200		},
1201		methods: {   //添加方法
1202			change(i, m) {
1203				if (i > m) {
1204					// this.names = 'fade';
1205				} else if (i < m) {
1206					// this.names = 'fade';
1207				} else {
1208					return;
1209				}
1210				this.mark = i;
1211			},
1212			prev() {
1213				// this.names = 'fade';
1214				this.mark--;
1215				if (this.mark === -1) {
1216					this.mark = 3;
1217					return
1218				}
1219			},
1220			next() {
1221				// this.names = 'fade';
1222				this.mark++;
1223				if (this.mark === this.img.length) {
1224					this.mark = 0;
1225					return
1226				}
1227			},
1228			autoPlay() {
1229				// this.names = 'fade';
1230				this.mark++;
1231				if (this.mark === this.img.length) {
1232					this.mark = 0;
1233					return
1234				}
1235			},
1236			play() {
1237				let bgImgDelay = '' || '180000'
1238				let delay = parseInt(bgImgDelay) || 180000;
1239				this.time = setInterval(this.autoPlay, delay);
1240			},
1241			enter() {
1242				clearInterval(this.time);
1243			},
1244			leave() {
1245				this.play();
1246			}
1247		},
1248		created() {
1249			this.play()
1250		},
1251		beforeDestroy() {
1252			clearInterval(this.time);
1253		},
1254		mounted() {
1255			let prop = 'https://picx.zhimg.com/80/v2-85c31120acff76826ab53ea8934ef4bb_1440w.webp' || '';
1256			let isImg = prop.includes('.bmp') || prop.includes('.jpg') || prop.includes('.png') || prop.includes('.tif') || prop.includes('.gif') || prop.includes('.pcx') || prop.includes('.tga') || prop.includes('.exif') || prop.includes('.fpx') || prop.includes('.psd') || prop.includes('.cdr') || prop.includes('.pcd') || prop.includes('.dxf') || prop.includes('.ufo') || prop.includes('.eps') || prop.includes('.ai') || prop.includes('.raw') || prop.includes('.WMF') || prop.includes('.webp') || prop.includes('.jpeg') || prop.includes('http://') || prop.includes('https://')
1257			if (isImg) {
1258				let img = prop.split(',');
1259				let configRoot = '/'
1260				let arrImg = [];
1261				img.forEach(el => {
1262					var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
1263					var objExp = new RegExp(Expression);
1264
1265					if (objExp.test(el)) {
1266						// http or https
1267						arrImg.push(el);
1268					} else {
1269						// 非http or https开头
1270						// 本地文件
1271						let firstStr = el.charAt(0);
1272						if (firstStr == '/') {
1273							el = el.substr(1); // 删除第一个字符 '/',因为 configRoot最后一个字符为 /
1274						}
1275						el = configRoot + el;
1276						arrImg.push(el);
1277					}
1278				})
1279				this.img = arrImg;
1280			} else {
1281				this.bgColor = prop;
1282			}
1283		}
1284	})
1285</script>
1285
1286
1287<style>
1288	.bg-swiper-box {
1289		position: absolute;
1290		display: block;
1291		width: 100%;
1292		height: 100%;
1293	}
1294
1295	.bg-swiper-img {
1296		object-fit: cover;
1297		width: 100%;
1298		height: 100%;
1299	}
1300</style>
1301
1302
1303
1304
1305  
1305<script>
1306  function loadMermaid() {
1307    if (document.getElementsByClassName('mermaid').length) {
1308      if (window.mermaidJsLoad) mermaid.init()
1309      else {
1310        loadScript('https://cdn.jsdmirror.com/npm/mermaid/dist/mermaid.min.js').then(() => {
1311          window.mermaidJsLoad = true
1312          mermaid.initialize({
1313            theme: 'default',
1314          })
1315          if ('true') {
1316            mermaid.init();
1317          }
1318        })
1319      }
1320    }
1321  };
1322  document.addEventListener("DOMContentLoaded", function () {
1323    loadMermaid();
1324  })
1325
1326  document.addEventListener('pjax:complete', function () {
1327    loadMermaid();
1328  })
1329  
1330</script>
1330
1331
1332
1333      </main>
1334    </div>
1335
1336    <!-- 页脚 -->
1337    
1338  
1339  
1340    <!-- 底部鱼儿跳动效果,依赖于jquery-->
1341<div id="j-fish-skip" style=" position: relative;height: 153px;width: auto;"></div>
1342<script>
1343  var RENDERER = {
1344    POINT_INTERVAL: 5,
1345    FISH_COUNT: 3,
1346    MAX_INTERVAL_COUNT: 50,
1347    INIT_HEIGHT_RATE: .5,
1348    THRESHOLD: 50,
1349    FISH_COLOR: '',
1350    init: function () {
1351      this.setFishColor(); this.setParameters(), this.reconstructMethods(), this.setup(), this.bindEvent(), this.render()
1352    },
1353    setFishColor: function () {
1354      let isDark = JSON.parse(localStorage.getItem('dark')) || JSON.parse('false');
1355      if (isDark) {
1356        this.FISH_COLOR = '#222'; // 暗黑色,有时间把这整成一个变量
1357      } else {
1358        this.FISH_COLOR = '' || 'rgba(66, 185, 133, 0.8)';
1359      }
1360    },
1361    setParameters: function () {
1362      this.$window = $(window), this.$container = $("#j-fish-skip"), this.$canvas = $("<canvas />"), this.context = this.$canvas.appendTo(this.$container).get(0).getContext("2d"), this.points = [], this.fishes = [], this.watchIds = []
1363    },
1364    createSurfacePoints: function () {
1365      var t = Math.round(this.width / this.POINT_INTERVAL);
1366      this.pointInterval = this.width / (t - 1), this.points.push(new SURFACE_POINT(this, 0));
1367      for (var i = 1; i < t; i++) {
1368        var e = new SURFACE_POINT(this, i * this.pointInterval),
1369          h = this.points[i - 1];
1370        e.setPreviousPoint(h), h.setNextPoint(e), this.points.push(e)
1371      }
1372    },
1373    reconstructMethods: function () {
1374      this.watchWindowSize = this.watchWindowSize.bind(this), this.jdugeToStopResize = this.jdugeToStopResize.bind(this), this.startEpicenter = this.startEpicenter.bind(this), this.moveEpicenter = this.moveEpicenter.bind(this), this.reverseVertical = this.reverseVertical.bind(this), this.render = this.render.bind(this)
1375    },
1376    setup: function () {
1377      this.points.length = 0, this.fishes.length = 0, this.watchIds.length = 0, this.intervalCount = this.MAX_INTERVAL_COUNT, this.width = this.$container.width(), this.height = this.$container.height(), this.fishCount = this.FISH_COUNT * this.width / 500 * this.height / 500, this.$canvas.attr({
1378        width: this.width,
1379        height: this.height
1380      }), this.reverse = !1, this.fishes.push(new FISH(this)), this.createSurfacePoints()
1381    },
1382    watchWindowSize: function () {
1383      this.clearTimer(), this.tmpWidth = this.$window.width(), this.tmpHeight = this.$window.height(), this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL))
1384    },
1385    clearTimer: function () {
1386      for (; this.watchIds.length > 0;) clearTimeout(this.watchIds.pop())
1387    },
1388    jdugeToStopResize: function () {
1389      var t = this.$window.width(),
1390        i = this.$window.height(),
1391        e = t == this.tmpWidth && i == this.tmpHeight;
1392      this.tmpWidth = t, this.tmpHeight = i, e && this.setup()
1393    },
1394    bindEvent: function () {
1395      this.$window.on("resize", this.watchWindowSize), this.$container.on("mouseenter", this.startEpicenter), this.$container.on("mousemove", this.moveEpicenter)
1396    },
1397    getAxis: function (t) {
1398      var i = this.$container.offset();
1399      return {
1400        x: t.clientX - i.left + this.$window.scrollLeft(),
1401        y: t.clientY - i.top + this.$window.scrollTop()
1402      }
1403    },
1404    startEpicenter: function (t) {
1405      this.axis = this.getAxis(t)
1406    },
1407    moveEpicenter: function (t) {
1408      var i = this.getAxis(t);
1409      this.axis || (this.axis = i), this.generateEpicenter(i.x, i.y, i.y - this.axis.y), this.axis = i
1410    },
1411    generateEpicenter: function (t, i, e) {
1412      if (!(i < this.height / 2 - this.THRESHOLD || i > this.height / 2 + this.THRESHOLD)) {
1413        var h = Math.round(t / this.pointInterval);
1414        h < 0 || h >= this.points.length || this.points[h].interfere(i, e)
1415      }
1416    },
1417    reverseVertical: function () {
1418      this.reverse = !this.reverse;
1419      for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].reverseVertical()
1420    },
1421    controlStatus: function () {
1422      for (var t = 0, i = this.points.length; t < i; t++) this.points[t].updateSelf();
1423      for (t = 0, i = this.points.length; t < i; t++) this.points[t].updateNeighbors();
1424      this.fishes.length < this.fishCount && 0 == --this.intervalCount && (this.intervalCount = this.MAX_INTERVAL_COUNT, this.fishes.push(new FISH(this)))
1425    },
1426    render: function () {
1427      requestAnimationFrame(this.render), this.controlStatus(), this.context.clearRect(0, 0, this.width, this.height), this.context.fillStyle = this.FISH_COLOR;
1428      for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].render(this.context);
1429      this.context.save(), this.context.globalCompositeOperation = "xor", this.context.beginPath(), this.context.moveTo(0, this.reverse ? 0 : this.height);
1430      for (t = 0, i = this.points.length; t < i; t++) this.points[t].render(this.context);
1431      this.context.lineTo(this.width, this.reverse ? 0 : this.height), this.context.closePath(), this.context.fill(), this.context.restore(
vendor: 4,264 bytes, lines 1431-1485
1431)
1432    }
1433  },
1434  SURFACE_POINT = function (t, i) {
1435    this.renderer = t, this.x = i, this.init()
1436  };
1437  SURFACE_POINT.prototype = {
1438    SPRING_CONSTANT: .03,
1439    SPRING_FRICTION: .9,
1440    WAVE_SPREAD: .3,
1441    ACCELARATION_RATE: .01,
1442    init: function () {
1443      this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE, this.height = this.initHeight, this.fy = 0, this.force = {
1444        previous: 0,
1445        next: 0
1446      }
1447    },
1448    setPreviousPoint: function (t) {
1449      this.previous = t
1450    },
1451    setNextPoint: function (t) {
1452      this.next = t
1453    },
1454    interfere: function (t, i) {
1455      this.fy = this.renderer.height * this.ACCELARATION_RATE * (this.renderer.height - this.height - t >= 0 ? -1 : 1) * Math.abs(i)
1456    },
1457    updateSelf: function () {
1458      this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height), this.fy *= this.SPRING_FRICTION, this.height += this.fy
1459    },
1460    updateNeighbors: function () {
1461      this.previous && (this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height)), this.next && (this.force.next = this.WAVE_SPREAD * (this.height - this.next.height))
1462    },
1463    render: function (t) {
1464      this.previous && (this.previous.height += this.force.previous, this.previous.fy += this.force.previous), this.next && (this.next.height += this.force.next, this.next.fy += this.force.next), t.lineTo(this.x, this.renderer.height - this.height)
1465    }
1466  };
1467  var FISH = function (t) {
1468    this.renderer = t, this.init()
1469  };
1470  FISH.prototype = {
1471    GRAVITY: .4,
1472    init: function () {
1473      this.direction = Math.random() < .5, this.x = this.direction ? this.renderer.width + this.renderer.THRESHOLD : -this.renderer.THRESHOLD, this.previousY = this.y, this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1), this.renderer.reverse ? (this.y = this.getRandomValue(1 * this.renderer.height / 10, 4 * this.renderer.height / 10), this.vy = this.getRandomValue(2, 5), this.ay = this.getRandomValue(.05, .2)) : (this.y = this.getRandomValue(6 * this.renderer.height / 10, 9 * this.renderer.height / 10), this.vy = this.getRandomValue(-5, -2), this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1, this.theta = 0, this.phi = 0
1474    },
1475    getRandomValue: function (t, i) {
1476      return t + (i - t) * Math.random()
1477    },
1478    reverseVertical: function () {
1479      this.isOut = !this.isOut, this.ay *= -1
1480    },
1481    controlStatus: function (t) {
1482      this.previousY = this.y, this.x += this.vx, this.y += this.vy, this.vy += this.ay, this.renderer.reverse ? this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy -= this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(.05, .2)), this.isOut = !1) : this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy += this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1), this.isOut || (this.theta += Math.PI / 20, this.theta %= 2 * Math.PI, this.phi += Math.PI / 30, this.phi %= 2 * Math.PI), this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY), (this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD || this.vx < 0 && this.x < -this.renderer.THRESHOLD) && this.init()
1483    },
1484    render: function (t) {
1485      t.save(), t.translate(this.x, this.y), t.rotate(Math.PI + Math.atan2(this.vy, this.vx)), t.scale(1, this.direction ? 1 : -1), t.beginPath(), t.moveTo(-30, 0), t.bezierCurveTo(-20, 15, 15, 10, 40, 0), t.bezierCurveTo(15, -10, -20, -15, -30, 0), t.fill(), t.save(), t.translate(40, 0), t.scale(.9 + .2 * Math.sin(this.theta), 1), t.beginPath(), t.moveTo(0, 0), t.quadraticCurveTo(5, 10, 20, 8), t.quadraticCurveTo(12, 5, 10, 0), t.quadraticCurveTo(12, -5, 20, -8), t.quadraticCurveTo(5, -10, 0, 0), t.fill(), t.restore(), t.save(), t.translate(-3, 0), t.rotate((Math.PI / 3 + Math.PI / 10 * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1)), t.beginPath(), this.renderer.reverse ? (t.moveTo(5, 0), t.bezierCurveTo(10, 10, 10, 30, 0, 40), t.bezierCurveTo(-12, 25, -8, 10, 0, 0)) : (t.moveTo(-5, 0), t.bezierCurveTo(-10, -10, -10, -30, 0, -40), t.bezierCurveTo(12, -25, 8, -10, 0, 0)), t.closePath(), t.fill(), t.restore(
1485), t.restore(), this.controlStatus(t)
1486    }
1487  }, $(function () {
1488    RENDERER.init()
1489    $('.dark').click(function () {
1490      setTimeout(() => {
1491        RENDERER.setFishColor();
1492        RENDERER.context.fill();
1493      });
1494    })
1495  });
1496</script>
1496
1497  
1498  <div class="footer bg-color">
1499    <div class="footer-main">
1500      
1501        
1502          <div class="link">
1503            
1504          </div>
1505        
1506      
1507        
1508          <div class="footer-copyright">
1509            <p>Copyright © 2021 - 2023 <a target="_blank" rel="noopener" href="https://blog.aerr.cn">青云依兮</a> |  Theme <a target="_blank" rel="noopener" href="https://github.com/yuang01/theme">Bamboo</a> </p>
1510
1511          </div>
1512        
1513      
1514        
1515          
1516            <!-- 不蒜子统计 -->
1517            <!-- 不蒜子统计 -->
1518<span id="busuanzi_container_site_pv">
1519      <i class="fas fa-eye" aria-hidden="true"></i>本站总访问量:<span id="busuanzi_value_site_pv"></span> 次
1520</span>
1521<span class="post-meta-divider">|</span>
1522<span id="busuanzi_container_site_uv" style='display:none'>
1523      <i class="fas fa-users" aria-hidden="true"></i>本站访客数:<span id="busuanzi_value_site_uv"></span> 人
1524</span>
1525
1526          
1527        
1528      
1529        
1530          <div class="footer-custom">
1531            
1532          </div>
1533        
1534      
1535    </div>
1536  </div>
1537
1538
1539
1540    <!-- 渲染暗黑按钮 -->
1541    
1542      <div class="dark">
1543  <div class="dark-content">
1544    <i class="fas fa-moon" aria-hidden="true"></i>
1545    <!-- <span>关灯</span> -->
1546  </div>
1547  
1548</div>
1549
1550<script>
1551  $(function() {
1552    let isDark = JSON.parse(localStorage.getItem('dark'))  || JSON.parse('false');
1553    if (isDark) {
1554      $(".dark-content").replaceWith(
1555          `
1556          <div class='dark-content'>
1557            <i class="fas fa-lightbulb" aria-hidden="true"></i>
1558          </div>
1559          `
1560        );
1561    }
1562    $('.dark').click(function() {
1563      if ($(document.body).is('.darkModel')) {
1564        $(document.body).removeClass('darkModel');
1565        localStorage.setItem('dark', false);
1566        $(".dark-content").replaceWith(
1567          `
1568          <div class='dark-content'>
1569            <i class="fas fa-moon" aria-hidden="true"></i>
1570          </div>
1571          `
1572        );
1573      } else {
1574        $(document.body).addClass('darkModel');
1575        localStorage.setItem('dark', true);
1576        $(".dark-content").replaceWith(
1577          `
1578          <div class='dark-content'>
1579            <i class="fas fa-lightbulb" aria-hidden="true"></i>
1580          </div>
1581          `
1582        );
1583      }
1584    })
1585  })
1586</script>
1586
1587    
1588    <!-- 渲染回到顶部按钮 -->
1589    
1590      <div class="goTop top-btn-color" pointer>
1591  <i class="fas fa-arrow-up" aria-hidden="true"></i>
1592</div>
1593<script src="/js/goTop.js"></script>
1593
1594
1595    
1596    <!-- 渲染左下角音乐播放器 -->
1597    
1598
1599    <!-- 图片放大 -->
1600    
1601      
1601<script src="/js/fancybox.umd.js"></script>
1601
1602    
1603
1604    <!-- 百度解析 -->
1605    <!-- Baidu Analytics -->
1606
1607    <!-- Baidu Push -->
1608
1609<script>
1610    (function () {
1611        var bp = document.createElement('script');
1612        var curProtocol = window.location.protocol.split(':')[0];
1613        if (curProtocol === 'https') {
1614            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
1615        } else {
1616            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
1617        }
1618        var s = document.getElementsByTagName("script")[0];
1619        s.parentNode.insertBefore(bp, s);
1620    })();
1621</script>
1621
1622
1623    
1624    <!-- 背景彩带 -->
1625    
1626      
1626<script type="text/javascript" size="100" alpha='0.4' zIndex="-1" src="/js/ribbon.min.js"></script>
1626
1627    
1628
1629    
1629<script src="/js/utils/index.js"></script>
1629
1630    
1630<script src="/js/app.js"></script>
1630
1631    
1632    <!-- 文章目录所需js -->
1633<!-- <link href="/js/tocbot/tocbot.css" rel="stylesheet">
1634<script src="/js/tocbot/tocbot.min.js"></script>
1634 -->
1635
1636<script src="/js/tocbot.min.js"></script>
1636
1637
1638
1639<link rel="stylesheet" href="/css/tocbot.css">
1640
1641<script>
1642  var headerEl = 'h2, h3, h4',  //headers 
1643    content = '.post-detail',//文章容器
1644    idArr = {};  //标题数组以确定是否增加索引id
1645  //add #id
1646  var option = {
1647    // Where to render the table of contents.
1648    tocSelector: '.toc',
1649    // Where to grab the headings to build the table of contents.
1650    contentSelector: content,
1651    // Which headings to grab inside of the contentSelector element.
1652    headingSelector: headerEl,
1653    scrollSmooth: true,
1654    scrollSmoothOffset: -70,
1655    // headingsOffset: -($(window).height() * 0.4 - 45),
1656    headingsOffset: -($(window).height() * 0.4 - 70),
1657    // positionFixedSelector: '.toc-main',
1658    // positionFixedClass: 'is-position-fixed',
1659    fixedSidebarOffset: 'auto',
1660    activeLinkClass: 'is-active-link',
1661    orderedList: true,
1662    collapseDepth: 20,
1663    // onClick: function (e) {},
1664  }
1665  if ($('.toc').length > 0) {
1666
1667    $(content).children(headerEl).each(function () {
1668      //去除空格以及多余标点
1669      var headerId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\:|\,|\。]/g, '');
1670
1671      headerId = headerId.toLowerCase();
1672      if (idArr[headerId]) {
1673        //id已经存在
1674        $(this).attr('id', headerId + '-' + idArr[headerId]);
1675        idArr[headerId]++;
1676      }
1677      else {
1678        //id未存在
1679        idArr[headerId] = 1;
1680        $(this).attr('id', headerId);
1681      }
1682    });
1683
1684    document.addEventListener("DOMContentLoaded", function () {
1685      tocbot.init(option);
1686      mobileTocClick();
1687    });
1688
1689  }
1690
1691  window.tocScrollFn = function () {
1692    return bamboo.throttle(function () {
1693      findHeadPosition();
1694    }, 100)()
1695  }
1696  window.addEventListener('scroll', tocScrollFn);
1697
1698  const findHeadPosition = function (top) {
1699    if ($('.toc-list').length <= 0) {
1700      return false;
1701    }
1702    setTimeout(() => {  // or DOMContentLoaded 
1703      autoScrollToc();
1704    }, 0);
1705  }
1706
1707  const autoScrollToc = function () {
1708    const $activeItem = document.querySelector('.is-active-link');
1709    const $cardToc = document.querySelector('.toc-content');
1710    const activePosition = $activeItem.getBoundingClientRect().top
1711    const sidebarScrollTop = $cardToc.scrollTop
1712    if (activePosition > (document.documentElement.clientHeight - 100)) {
1713      $cardToc.scrollTop = sidebarScrollTop + 150
1714    }
1715    if (activePosition < 150) {
1716      $cardToc.scrollTop = sidebarScrollTop - 150
1717    }
1718  }
1719
1720  document.addEventListener('pjax:send', function () {
1721    if ($('.toc').length) {
1722      tocbot.destroy();
1723    }
1724  });
1725
1726  document.addEventListener('pjax:complete', function () {
1727    if ($('.toc').length) {
1728      tocbot.init(option);
1729      mobileTocClick();
1730    }
1731  });
1732  
1733  // 手机端toc按钮点击出现目录
1734  const mobileTocClick = function () {
1735    const $cardTocLayout = document.getElementsByClassName('side_toc')[0];
1736    const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0];
1737    let right = '45px';
1738    if (window.innerWidth >= 551 && window.innerWidth <= 992) {
1739      right = '100px'
1740    }
1741    const mobileToc = {
1742      open: () => {
1743        $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: ' + right
1744      },
1745
1746      close: () => {
1747        $cardTocLayout.style.animation = 'toc-close .2s'
1748        setTimeout(() => {
1749          $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
1750        }, 100)
1751      }
1752    }
1753    document.getElementById('toc-mobile-btn').addEventListener('click', () => {
1754      if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open()
1755      else mobileToc.close()
1756    })
1757
1758    $cardToc.addEventListener('click', (e) => {
1759      if (window.innerWidth < 992) { // 小于992px的时候
1760        mobileToc.close()
1761      }
1762    })
1763  }
1764</script>
1764
1765
1766<style>
1767  /* .is-position-fixed {
1768    position: sticky !important;
1769    top: 74px;
1770  }
1771
1772  .toc-main ul {
1773    counter-reset: show-list;
1774  }
1775
1776  .toc-main ul li::before {
1777    content: counter(item)".";
1778    display: block;
1779    position: absolute;
1780    left: 12px;
1781    top: 0;
1782  } */
1783</style>
1784 
1785
1786<!-- 设置导航背景 -->
1787<script>
1788  let setHeaderClass = () => {
1789    const nav = $('#navHeader');
1790    const navTop = nav.outerHeight();
1791    const winTop = $(window).scrollTop();
1792    if(winTop > navTop) {
1793      nav.addClass('header-bg-color');
1794    }
1795    else {
1796      nav.removeClass('header-bg-color');
1797    }
1798  };
1799
1800  let scrollCollect = () => {
1801    return bamboo.throttle(function (e) {
1802      setHeaderClass();
1803    }, 200)()
1804  }
1805
1806  let initHeaderBg = () => {
1807    setHeaderClass();
1808  }
1809
1810  setHeaderClass();
1811  window.addEventListener('scroll', scrollCollect);
1812
1813  document.addEventListener('pjax:send', function () {
1814    window.removeEventListener('scroll', scrollCollect)
1815  })
1816  document.addEventListener('pjax:complete', function () {
1817    window.addEventListener('scroll', scrollCollect);
1818    setHeaderClass();
1819  })
1820</script>
1820 
1821
1822<!-- 渲染issues标签里的内容 -->
1823<script>
1824  function loadIssuesJS() {
1825    if ($(".post-detail").find(".issues-api").length == 0) {
1826      return;
1827    } 
1828    loadScript('/js/issues/index.js');
1829  };
1830  $(function () {
1831    loadIssuesJS();
1832  });
1833  document.addEventListener('pjax:complete', function () {
1834    if (typeof IssuesAPI == "undefined") {
1835      loadIssuesJS();
1836    }
1837  })
1838</script>
1838
1839
1840<!-- 渲染远程json加载的图片标签(getPhotoOnline)里的内容 -->
1841<script>
1842  function loadPhotoOnlineJS() {
1843    if ($(".post-detail").find(".getJsonPhoto-api").length == 0) {
1844      return;
1845    } 
1846    loadScript('/js/getPhotoOnline/index.js');
1847  };
1848  $(function () {
1849    loadPhotoOnlineJS();
1850  });
1851  document.addEventListener('pjax:complete', function () {
1852    if (typeof getPhotoJson == "undefined") {
1853      loadPhotoOnlineJS();
1854    }
1855  })
1856</script>
1856
1857
1858<!-- 渲染远程json加载的talk标签(getTalkOnline)里的内容 -->
1859<script>
1860  function loadTalkOnlineJS() {
1861    if ($(".post-detail").find(".getJsonTalk-api").length == 0) {
1862      return;
1863    } 
1864    loadScript('https://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'); // 瀑布流插件,https://raphamorim.io/waterfall.js/
1865    loadScript('/js/getTalkOnline/index.js');
1866  };
1867  $(function () {
1868    loadTalkOnlineJS();
1869  });
1870  document.addEventListener('pjax:complete', function () {
1871    if (typeof getTalkJson == "undefined") {
1872      loadTalkOnlineJS();
1873    }
1874  })
1875</script>
1875
1876
1877<!-- 渲染远程json加载的site-card标签(getSiteOnline)里的内容 -->
1878<script>
1879  function loadSiteOnlineJS() {
1880    if ($(".post-detail").find(".getJsonSite-api").length == 0) {
1881      return;
1882    } 
1883    loadScript('/js/getSiteOnline/index.js');
1884  };
1885  $(function () {
1886    loadSiteOnlineJS();
1887  });
1888  document.addEventListener('pjax:complete', function () {
1889    if (typeof getSiteJson == "undefined") {
1890      loadSiteOnlineJS();
1891    }
1892  })
1893</script>
1893
1894
1895<!-- 输入框打字特效 -->
1896<!-- 输入框打字特效 -->
1897
1898  
1898<script src="/js/activate-power-mode.js"></script>
1898
1899  
1899<script>
1900    POWERMODE.colorful = true;  // 打开随机颜色特效
1901    POWERMODE.shake = false;    // 关闭输入框抖动
1902    document.body.addEventListener('input', POWERMODE);//监听打字事件
1903  </script>
1903
1904
1905
1906<!-- markdown代码一键复制功能 -->
1907
1908  <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/v-plugs-ayu/lib/ayu.css">
1909  
1909<script src="https://cdn.jsdmirror.com/npm/v-plugs-ayu/lib/ayu.umd.min.js"></script>
1909
1910  
1910<script src="/js/clipboard/clipboard.min.js"></script>
1910
1911  <div id="appCopy">
1912  </div>
1913  
1913<script data-pjax>
1914    var vm = new Vue({
1915      el: '#appCopy',
1916      data: {
1917      },
1918      computed: {
1919      },
1920      mounted() {
1921        const that = this;
1922        var copy = '复制';
1923        /* code */
1924        var initCopyCode = function () {
1925          var copyHtml = '';
1926          copyHtml += '<button class="btn-copy" data-clipboard-snippet="" style="position:absolute;top:0;right:0;z-index:1;">';
1927          copyHtml += '<i class="fas fa-copy"></i><span>' + copy + '</span>';
1928          copyHtml += '</button>';
1929          $(".post-detail pre").not('.gutter pre').wrap("<div class='codeBox' style='position:relative;width:100%;'></div>")
1930          $(".post-detail pre").not('.gutter pre').before(copyHtml);
1931          new ClipboardJS('.btn-copy', {
1932            target: function (trigger) {
1933              return trigger.nextElementSibling;
1934            }
1935          });
1936        }
1937        initCopyCode();
1938        $('.btn-copy').unbind('click').bind('click', function () {
1939          doSomething();
1940        })
1941        $(document).unbind('keypress').bind('keypress', function (e) {
1942          if (e.ctrlKey && e.keyCode == 67) {
1943            doSomething();
1944          }
1945        })
1946
1947        function doSomething() {
1948          that.$notify({
1949            title: "成功",
1950            content: "代码已复制,请遵守相关授权协议。--青云依兮",
1951            type: 'success'
1952          })
1953        }
1954      },
1955      methods: {
1956      },
1957      created() { }
1958    })
1959  </script>
1959
1960  
1961
1962<!-- 图片懒加载 -->
1963<script defer src="https://cdn.jsdmirror.com/npm/[email protected]/dist/lazyload.min.js"></script>
vendor: 1 bytes, line 1963
1963
1964<script>
1965  // https://www.npmjs.com/package/vanilla-lazyload
1966  // Set the options globally
1967  // to make LazyLoad self-initialize
1968  window.lazyLoadOptions = {
1969    elements_selector: ".lazyload",
1970    threshold: 0
1971  };
1972  // Listen to the initialization event
1973  // and get the instance of LazyLoad
1974  window.addEventListener(
1975    "LazyLoad::Initialized",
1976    function (event) {
1977      window.lazyLoadInstance = event.detail.instance;
1978    },
1979    false
1980  );
1981  document.addEventListener('DOMContentLoaded', function () {
1982    lazyLoadInstance.update();
1983  });
1984  document.addEventListener('pjax:complete', function () {
1985    lazyLoadInstance.update();
1986  });
1987</script>
1987
1988
1989
1990<!-- 卡片滚动动画 -->
1991   
1992
1993<!-- 评论所需js -->
1994
1995  
1996    <!-- 弹幕所需的css和js -->
1997    
1998  <!-- 弹幕插件 -->
1999  <link href="/js/danmu/barrager.css" rel="stylesheet">
2000  
2000<script src="/js/danmu/jquery.barrager.js"></script>
2000
2001
2002<!-- 具体js,请前往valine/script.ejs查看 -->
2003
2004    
2004<script>
2005  var requiredFields = '';
2006  requiredFields = requiredFields.split(',');
2007  comment_el = '.comment';
2008  let looperValine = null;
2009  load_valine = function () {
2010    if ($(comment_el).length) {
2011      var valine = new Valine({
2012        el: '#vcomment',
2013        path: window.location.pathname,
2014        notify: false,
2015        verify: false,
2016        app_id: "8M0jKEDHJ9lR1j8WhakihSbv-gzGzoHsz",
2017        app_key: "6KkhQq0feQa6GF4iL11paa5H",
2018        placeholder: "请输入评论内容",
2019        avatar: "",
2020        master: "d72e6625d8e1e44d5dc721a27fc08508",   //博主邮箱md5
2021        tagMeta: ["博主","小伙伴","访客"],     //标识字段名
2022        friends: "",
2023        metaPlaceholder: { "nick": "昵称/QQ号", "mail": "邮箱" },
2024        requiredFields: requiredFields,
2025        enableQQ: true,
2026      });
2027      function debounce(fn) {
2028        var timerID = null
2029        return function () {
2030          var arg = arguments[0]   //获取事件
2031          if (timerID) {
2032            clearTimeout(timerID)
2033          }
2034          timerID = setTimeout(function () {
2035            fn(arg)              //事件传入函数
2036          }, 200)
2037        }
2038      }
2039      //查询评论 valine.Q('*').limit(7) -- 查询所有,限制7条, 下面的的代码是查询当前页面
2040      var themeDanmu = eval('true');
2041      var themeLoop = eval('false');
2042      var themeLooperTime = '5000' || 5000;
2043      var speed = '40' || 20;
2044      var isBarrager = true;
2045      if (themeDanmu == true) {
2046        do_barrager();
2047        if ($('.danmuBox').length <= 0) {
2048          $('.navbar').append('<div class="danmuBox"><div class="danmuBtn open"><span class="danmuCircle"></span><span class="danmuText">弹幕</span></div></div>');
2049        }
2050        $('.danmuBtn').on('click', debounce(
2051          function () {
2052            if ($('.danmuBtn').hasClass('open')) {
2053              $('.danmuBtn').removeClass('open')
2054              clearInterval(looperValine);
2055              $.fn.barrager.removeAll();
2056            } else {
2057              $('.danmuBtn').addClass("open");
2058              do_barrager();
2059            }
2060          }
2061        ))
2062      }
2063      function do_barrager() {
2064        isBarrager && valine.Q(window.location.pathname).find().then(function (comments) {
2065          // var num = 0; // 可以记录条数,循环调用的时候只取最新的评论放入弹幕中
2066          var run_once = true;
2067          var looper_time = themeLooperTime;
2068          var total = comments.length;
2069          // var looper = null;
2070          var index = 0;
2071          if (total > 0) {
2072            barrager();
2073          } else {
2074            // 当评论数为0的时候,自动关闭弹幕
2075            // $('.danmuBtn').removeClass('open');
2076          }
2077          function barrager() {
2078            if (run_once) {
2079              //如果是首次执行,则设置一个定时器,并且把首次执行置为false
2080              looperValine = setInterval(barrager, looper_time);
2081              run_once = false;
2082            }
2083            var content = comments[index]._serverData.comment;
2084            var email = comments[index]._serverData.mail;
2085            var link = comments[index]._serverData.link;
2086            var newcontent = content.substring(0, 50).replace(/<[^>]+>/g, "");
2087            //发布一个弹幕
2088            const item = {
2089              img: `https://q1.qlogo.cn/g?b=qq&nk=${email}&s=640`, //图片 
2090              info: newcontent, //文字 
2091              href: link, //链接 
2092              close: true, //显示关闭按钮 
2093              speed: speed, //延迟,单位秒,默认6 
2094              color: '#fff', //颜色,默认白色 
2095              old_ie_color: '#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
2096            }
2097            $('body').barrager(item);
2098            //索引自增
2099            index++;
2100            //所有弹幕发布完毕,清除计时器。
2101            if (index == total) {
2102              clearInterval(looperValine);
2103              if (themeLoop === true) {
2104                setTimeout(function () {
2105                  do_barrager();
2106                }, 5000);
2107              } else {
2108                $('.danmuBtn').removeClass('open');
2109              }
2110              return false;
2111            }
2112
2113          }
2114        })
2115      }
2116    }
2117  };
2118  $(document).ready(load_valine);
2119  document.addEventListener('pjax:send', function (e) {
2120    
2121      $('.danmuBox').length > 0 && $('.danmuBox').remove()
2122      looperValine && clearInterval(looperValine);
2123      $.fn.barrager.removeAll();
2124    
2125  })
2126  document.addEventListener('pjax:complete', function () {
2127    load_valine();
2128  });
2129</script>
2129
2130
2131  
2132
2133
2134<!-- 鼠标点击特效 -->
2135<!-- 爱心点击 -->
2136
2137  
2138    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 999; pointer-events: none;" ></canvas>
2139    
2139<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
2139
2140    
2140<script src="/js/cursor/explosion.min.js"></script>
2140
2141  
2142
2143
2144
2145
2146  
2146<script async src="/js/busuanzi.pure.mini.js" data-pjax></script>
2146
2147
2148
2149<!-- 轮播图标签 -->
2150<script>
2151  var bambooSwiperTag = {};
2152  function load_swiper() {
2153    if (!document.querySelectorAll(".post-swiper-container")[0]) return;
2154    loadCSS("https://cdn.jsdmirror.com/npm/swiper@6/swiper-bundle.min.css")
2155    loadScript("https://cdn.jsdmirror.com/npm/swiper@6/swiper-bundle.min.js").then(() => {
2156      pjax_swiper();
2157    });
2158  }
2159
2160  load_swiper();
2161
2162  function pjax_swiper() {
2163    bambooSwiperTag.swiper = new Swiper('.post-swiper-container', {
2164      slidesPerView: 'auto',
2165      spaceBetween: 8,
2166      centeredSlides: true,
2167      loop: true,
2168      autoplay: true ? {
2169        delay: 3000,
2170        stopOnLastSlide: false,
2171        disableOnInteraction: false,
2172      } : false,
2173      pagination: {
2174        el: '.swiper-pagination',
2175        clickable: true,
2176      },
2177      navigation: {
2178        nextEl: '.swiper-button-next',
2179        prevEl: '.swiper-button-prev',
2180      },
2181      on:{
2182        init: function(){
2183          swiperAnimateCache(this); //隐藏动画元素 
2184          swiperAnimate(this); //初始化完成开始动画
2185        }, 
2186        slideChangeTransitionEnd: function(){ 
2187          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
2188          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
2189        } 
2190      }
2191    });
2192  }
2193
2194  document.addEventListener('pjax:complete', function () {
2195    if (!document.querySelectorAll(".post-swiper-container")[0]) return;
2196    if (typeof bambooSwiperTag.swiper === "undefined") {
2197      load_swiper();
2198    } else {
2199      pjax_swiper();
2200    }
2201  });
2202</script>
2202
2203    <!-- pjax -->
2204    
2205
2206<!-- pjax -->
2207
2208
2209  
2209<script src="/js/[email protected]/index.js"></script>
2209
2210  
2211    <!-- 样式位于:source/css/_third-party/pjaxanimate.styl -->
2212
2213<div class="pjax-animate">
2214  
2215    <div class="loading-circle"><div id="loader-circle"></div></div>
2216    
2216<script>
2217      window.ShowLoading = function() {
2218        $(".loading-circle").css("display", "block");
2219      };
2220      window.HideLoading = function() {
2221        $(".loading-circle").css("display", "none");
2222      }
2223    </script>
2223
2224  
2225	
2225<script>
2226    document.addEventListener('pjax:complete', function () {
2227      window.HideLoading();
2228    })
2229    document.addEventListener('pjax:send', function () {
2230      window.ShowLoading();
2231    })
2232    document.addEventListener('pjax:error', function () {
2233      window.HideLoading();
2234    })
2235	</script>
2235
2236</div>
2237
2238  
2239
2240  
2240<script>
2241    var pjax = new Pjax({
2242      elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([no-pjax])',   // 拦截正常带链接的 a 标签
2243      selectors: ["#pjax-container","title"],                                   // 根据实际需要确认重载区域
2244      cacheBust: false,   // url 地址追加时间戳,用以避免浏览器缓存
2245      timeout: 5000
2246    });
2247
2248    document.addEventListener('pjax:send', function (e) {
2249
2250      try {
2251        var currentUrl = window.location.pathname;
2252        var targetUrl = e.triggerElement.href;
2253        var banUrl = [""];
2254        if (banUrl[0] != "") {
2255          banUrl.forEach(item => {
2256            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
2257              window.location.href = targetUrl;
2258            }
2259          });
2260        }
2261      } catch (error) {}
2262
2263      $(window).unbind('resize');
2264      $(window).unbind('scroll');
2265      $(document).unbind('scroll');
2266      $(document).unbind('click');
2267      $('body').unbind('click');
2268
2269    })
2270    
2271    document.addEventListener('pjax:complete', function () {
2272      $('script[data-pjax], .pjax-reload script').each(function () {
2273        $(this).parent().append($(this).remove());
2274      });
2275    });
2276
2277    document.addEventListener('pjax:error', function (e) {
2278      window.location.href = e.triggerElement.href;
2279    })
2280    
2281    // 刷新不从顶部开始
2282    document.addEventListener("DOMContentLoaded", function () {
2283      history.scrollRestoration = 'auto';
2284    })
2285  </script>
2285
2286
2287
2288
2289  </body>
2290</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.