-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
674 lines (618 loc) · 92.3 KB
/
index.html
File metadata and controls
674 lines (618 loc) · 92.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>IMAGINE - IMAGINE的搬砖日志</title><meta name="keywords" content="IMAGINE,Html,Css,JavaScript,Vue,React,NodeJs,Hexo,Butterfly"><meta name="author" content="Peng"><meta name="copyright" content="Peng"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="随笔记录搬砖日常"><meta property="og:type" content="website"><meta property="og:title" content="IMAGINE"><meta property="og:url" content="http://imagineblog.host/index.html"><meta property="og:site_name" content="IMAGINE"><meta property="og:description" content="随笔记录搬砖日常"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="http://imagineblog.host/img/avatar.jpg"><meta property="article:author" content="Peng"><meta property="article:tag" content="IMAGINE,Html,Css,JavaScript,Vue,React,NodeJs,Hexo,Butterfly"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="http://imagineblog.host/img/avatar.jpg"><link rel="shortcut icon" href="https://lovelijunyi.gitee.io/img/avatar.gif"><link rel="canonical" href="http://imagineblog.host/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//hm.baidu.com"><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""><link rel="preconnect" href="//busuanzi.ibruce.info"><meta name="google-site-verification" content="oUu4V6mTgP_CWLbYPUuUK0dzxO1r5vMPXCM6QXwiOv8"><meta name="baidu-site-verification" content="code-mOtCM04zOU"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?6ede5b235a26f80d0b78937205b49f6f";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: Peng","link":"链接: ","source":"来源: IMAGINE","info":"著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。"}},
lightbox: 'mediumZoom',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#00c4b6","bgDark":"#121212","position":"top-right"},
source: {
jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: true,
islazyload: true,
isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={isPost:!1,isHome:!0,isHighlightShrink:!1,isToc:!1,postUpdate:"2022-08-31 16:05:30"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><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.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
else if (t === 'light') activateLightMode()
else activateDarkMode()
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')
}
}
const fontSizeVal = saveToLocal.get('global-font-size')
if (fontSizeVal !== undefined) {
document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
}
})(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="//at.alicdn.com/t/font_2492407_3wz9sdgpeam.css"><style>#toggle-sidebar{bottom:80px}</style><link rel="stylesheet" href="/css/macblack.css"><link rel="stylesheet" href="/css/veditor.css"><link rel="stylesheet" href="/css/close.css"><link rel="stylesheet" href="/css/iconColor.css"><link rel="stylesheet" href="/css/copyright.css"><link rel="stylesheet" href="/css/notice.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@latest/talk.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="defer" onload='this.media="all"'><script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.js"></script><script src="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus@latest/talk_user.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.min.css" media="defer" onload='this.media="all"'><script async src="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js"></script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="IMAGINE" type="application/atom+xml"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="/img/avatar.jpg" onerror='onerror=null,src="/img/friend_404.gif"' alt="avatar"></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">37</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">20</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div></div></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-zhuye"></i> <span>主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-mulu1"></i> <span>目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-guidang1"></i> <span>归档</span></a></li><li><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></li><li><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-category"></i> <span>分类</span></a></li><li><a class="site-page" href="/collect/"><i class="fa-fw iconfont icon-shoucang"></i> <span>收藏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-yule"></i> <span>清单</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/playlist/"><i class="fa-fw iconfont icon-gedan"></i> <span>歌单</span></a></li><li><a class="site-page" href="/books/"><i class="fa-fw iconfont icon-yuedumoshi"></i> <span>书单</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-caozuojiemiantubiao---_gongju"></i> <span>工具</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" target="_blank" rel="noopener" href="https://imgtu.com/"><i class="fa-fw iconfont icon-cloud"></i> <span>imgtu</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://www.leancloud.cn/"><i class="fa-fw iconfont icon-pinglun"></i> <span>LeanCloud</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://www.cloudflare.com/zh-cn/"><i class="fa-fw iconfont icon-cloudcomputing"></i> <span>Cloudflare</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://vercel.com/lp-imagine"><i class="fa-fw iconfont icon-webx"></i> <span>Vercel</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://cloud.mongodb.com/v2#/org/610751ff4218af3732524482/projects"><i class="fa-fw iconfont icon-mongdbwapian"></i> <span>MongoDB</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-guanyu"></i> <span>关于</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于我</span></a></li><li><a class="site-page" href="/message/"><i class="fa-fw iconfont icon-liuyanmoban"></i> <span>留言板</span></a></li><li><a class="site-page" href="/talks/"><i class="fa-fw iconfont icon-fengche"></i> <span>说说</span></a></li><li><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-youqinglianjie"></i> <span>友情链接</span></a></li><li><a class="site-page" href="/friends_link"><i class="fa-fw iconfont icon-pengyouquan"></i> <span>友链朋友圈</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://imagine-nav.vercel.app/"><i class="fa-fw iconfont icon-daohang1"></i> <span>导航站</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://imagine.imagineblog.workers.dev/hpp/admin/login"><i class="fa-fw iconfont icon-xiezuo"></i> <span>后台</span></a></li></ul></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">IMAGINE</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-zhuye"></i> <span>主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-mulu1"></i> <span>目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-guidang1"></i> <span>归档</span></a></li><li><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></li><li><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-category"></i> <span>分类</span></a></li><li><a class="site-page" href="/collect/"><i class="fa-fw iconfont icon-shoucang"></i> <span>收藏</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-yule"></i> <span>清单</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/playlist/"><i class="fa-fw iconfont icon-gedan"></i> <span>歌单</span></a></li><li><a class="site-page" href="/books/"><i class="fa-fw iconfont icon-yuedumoshi"></i> <span>书单</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-caozuojiemiantubiao---_gongju"></i> <span>工具</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" target="_blank" rel="noopener" href="https://imgtu.com/"><i class="fa-fw iconfont icon-cloud"></i> <span>imgtu</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://www.leancloud.cn/"><i class="fa-fw iconfont icon-pinglun"></i> <span>LeanCloud</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://www.cloudflare.com/zh-cn/"><i class="fa-fw iconfont icon-cloudcomputing"></i> <span>Cloudflare</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://vercel.com/lp-imagine"><i class="fa-fw iconfont icon-webx"></i> <span>Vercel</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://cloud.mongodb.com/v2#/org/610751ff4218af3732524482/projects"><i class="fa-fw iconfont icon-mongdbwapian"></i> <span>MongoDB</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-guanyu"></i> <span>关于</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于我</span></a></li><li><a class="site-page" href="/message/"><i class="fa-fw iconfont icon-liuyanmoban"></i> <span>留言板</span></a></li><li><a class="site-page" href="/talks/"><i class="fa-fw iconfont icon-fengche"></i> <span>说说</span></a></li><li><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-youqinglianjie"></i> <span>友情链接</span></a></li><li><a class="site-page" href="/friends_link"><i class="fa-fw iconfont icon-pengyouquan"></i> <span>友链朋友圈</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://imagine-nav.vercel.app/"><i class="fa-fw iconfont icon-daohang1"></i> <span>导航站</span></a></li><li><a class="site-page" target="_blank" rel="noopener" href="https://imagine.imagineblog.workers.dev/hpp/admin/login"><i class="fa-fw iconfont icon-xiezuo"></i> <span>后台</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">IMAGINE</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://www.cnblogs.com/imagine-lp/" target="_blank" title="博客园"><i class="iconfont icon-icon9-blog"></i></a><a class="social-icon" href="https://gitee.com/lp-Imagine" target="_blank" title="Gitee"><i class="iconfont icon-Gitee"></i></a><a class="social-icon" href="https://github.com/lp-Imagine" target="_blank" title="GitHub"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:luopeng101297@163.com" target="_blank" title="Email"><i class="iconfont icon-youxiang"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item" style="width:100%;overflow:hidden"><div class="gitcalendar" id="gitcalendar"><div id="gitmessage" :style="{top:y+px,left:x+px,position: fixed,zIndex:9999}"><div class="angle-wrapper"><span>{{span1}} </span><span>{{span2}} 次上传</span></div></div><div class="position-relative"><div class="border py-2 graph-before-activity-overview"><div class="js-gitcalendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas gitcalendar-graph height-full text-center"><div id="gitcalendarcanvasbox" v-if="simplemode"><canvas id="gitcanvas" style="animation:none"></canvas></div><svg class="js-gitcalendar-graph-svg" width="100%" viewBox="0 0 770 128" v-if="!simplemode"><text class="month" :x="32 + monthindex*64" y="20" v-for="(month,monthindex) in monthchange">{{month}}</text><text class="wday" text-anchor="start" dx="0" dy="40">日</text><text class="wday" text-anchor="start" dx="0" dy="65">二</text><text class="wday" text-anchor="start" dx="0" dy="90">四</text><text class="wday" text-anchor="start" dx="0" dy="115">六</text><g v-for="(weekitem,weekIndex) in data" :transform="'translate('+ (16 + weekIndex*14) + ',' + '0)'"><rect @mouseover="selectStyle(dayitem,$event)" @mouseleave="outStyle()" v-for="(dayitem,dayIndex) in weekitem" :style="{fill:thiscolor(dayitem.count),shapeRendering:crispedges}" :data-score="dayitem.count" :data-date="dayitem.date" x="0" :y=" 30 + dayIndex*13 " width="11" height="11"></rect></g></svg></div><div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1"><div class="float-left text-gray">数据来源<a :href="'https://github.com/'+ user " target="blank">@{{user}}</a></div><div class="contrib-legend text-gray">Less<ul class="legend"><li :style="{backgroundColor:color[0]}"></li><li :style="{backgroundColor:color[2]}"></li><li :style="{backgroundColor:color[4]}"></li><li :style="{backgroundColor:color[6]}"></li><li :style="{backgroundColor:color[8]}"></li></ul>More</div></div></div></div><div class="contrib-column contrib-column-first table-column"><span class="text-muted">过去一年提交</span><span class="contrib-number">{{total}}</span><span class="text-muted">{{oneyearbeforeday}} - {{thisday}}</span></div><div class="contrib-column table-column"><span class="text-muted">最近一月提交</span><span class="contrib-number">{{thisweekdatacore}}</span><span class="text-muted">{{amonthago}} - {{thisday}}</span></div><div class="contrib-column table-column"><span class="text-muted">最近一周提交</span><span class="contrib-number">{{weekdatacore}}</span><span class="text-muted">{{aweekago}} - {{thisday}}</span></div></div></div><div class="recent-post-item" style="height:auto;width:100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration:0s"><div class="blog-slider__item swiper-slide" style="width:750px;opacity:1;transform:translate3d(0,0,0);transition-duration:0s"><a class="blog-slider__img" href="/fk3tzn/" alt=""><img width="48" height="48" src="https://z3.ax1x.com/2021/07/20/WN1SED.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt=""></a><div class="blog-slider__content"><span class="blog-slider__code">2021-04-06</span><a class="blog-slider__title" href="/fk3tzn/" alt="">前端常用公共方法工具类</a><div class="blog-slider__text">工具类方法归纳,后续添加...</div><a class="blog-slider__button" href="/fk3tzn/" alt="">🎃详情</a></div></div><div class="blog-slider__item swiper-slide" style="width:750px;opacity:1;transform:translate3d(0,0,0);transition-duration:0s"><a class="blog-slider__img" href="/pnzuz1/" alt=""><img width="48" height="48" src="https://z3.ax1x.com/2021/07/20/WttkSH.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt=""></a><div class="blog-slider__content"><span class="blog-slider__code">2021-04-12</span><a class="blog-slider__title" href="/pnzuz1/" alt="">Promise(一):Promise认识.</a><div class="blog-slider__text">Promise认识</div><a class="blog-slider__button" href="/pnzuz1/" alt="">🎈详情</a></div></div><div class="blog-slider__item swiper-slide" style="width:750px;opacity:1;transform:translate3d(0,0,0);transition-duration:0s"><a class="blog-slider__img" href="/ymm751/" alt=""><img width="48" height="48" src="https://z3.ax1x.com/2021/07/20/Wttife.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt=""></a><div class="blog-slider__content"><span class="blog-slider__code">2021-04-13</span><a class="blog-slider__title" href="/ymm751/" alt="">Promise(二):手动实现一个Promise</a><div class="blog-slider__text">手动实现一个Promise.</div><a class="blog-slider__button" href="/ymm751/" alt="">🎈详情</a></div></div><div class="blog-slider__item swiper-slide" style="width:750px;opacity:1;transform:translate3d(0,0,0);transition-duration:0s"><a class="blog-slider__img" href="/ddv8fu/" alt=""><img width="48" height="48" src="https://z3.ax1x.com/2021/07/20/WttE6A.gif" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt=""></a><div class="blog-slider__content"><span class="blog-slider__code">2021-04-14</span><a class="blog-slider__title" href="/ddv8fu/" alt="">Promise(三):拓展方法实现</a><div class="blog-slider__text">拓展方法实现.</div><a class="blog-slider__button" href="/ddv8fu/" alt="">🎈详情</a></div></div><div class="blog-slider__item swiper-slide" style="width:750px;opacity:1;transform:translate3d(0,0,0);transition-duration:0s"><a class="blog-slider__img" href="/xu4nht/" alt=""><img width="48" height="48" src="https://z3.ax1x.com/2021/07/20/WN1nUg.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt=""></a><div class="blog-slider__content"><span class="blog-slider__code">2021-04-22</span><a class="blog-slider__title" href="/xu4nht/" alt="">React(一):核心概念</a><div class="blog-slider__text">React基础-核心概念.</div><a class="blog-slider__button" href="/xu4nht/" alt="">✨详情</a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div><script defer src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script><script defer data-pjax="data-pjax" src="/js/swiper_init.js"></script></div><div class="recent-post-item post-card-large"><div class="post_cover left_radius"><a href="/fk3tzn/" title="前端常用公共方法工具类"><img class="post_bg" data-lazy-src="https://z3.ax1x.com/2021/07/20/WN1SED.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="前端常用公共方法工具类"></a></div><div class="recent-post-info"><a class="article-title" href="/fk3tzn/" title="前端常用公共方法工具类">前端常用公共方法工具类</a><div class="article-meta-wrap"><span class="article-meta"><i class="fas fa-thumbtack sticky"></i><span class="sticky">置顶</span><span class="article-meta__separator">|</span></span><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-04-06T03:14:02.000Z" title="发表于 2021-04-06 11:14:02">2021-04-06</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javascript/">javascript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/utils/">utils</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/fk3tzn/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">关于时间的处理1. 时间格式化12345678910111213141516171819202122232425262728293031323334353637383940414243444546/** * @param {(Object|string|number)} time * @param {string} TimeFormat 想要返回时间的格式 例如 '{y}-{m}-{d} {h}:{i}:{s} {a}' {a}为周 * @returns {string} */function parseTime(time, TimeFormat) { if (!time) { return null; } if (arguments.length === 0) { return null ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover right_radius"><a href="/scroll_select/" title="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题"><img class="post_bg" data-lazy-src="/img/banner/02.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题"></a></div><div class="recent-post-info"><a class="article-title" href="/scroll_select/" title="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题">解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-08-31T07:30:45.000Z" title="发表于 2022-08-31 15:30:45">2022-08-31</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/scroll_select/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!-- * @Author: luopeng * @Description: el-select下拉滚动加载 * @Date: 2022-08-31 09:22:49 * @LastEditTime: 2022-08-31 15:53:35--><template> <div class="content"> <el-sel ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover left_radius"><a href="/form_component/" title="el-form表单封装"><img class="post_bg" data-lazy-src="/img/banner/02.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="el-form表单封装"></a></div><div class="recent-post-info"><a class="article-title" href="/form_component/" title="el-form表单封装">el-form表单封装</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-15T07:30:45.000Z" title="发表于 2022-01-15 15:30:45">2022-01-15</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Vue/">Vue</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/form_component/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">缘由 系统页面大部分为form+tabel的结构,系统复杂起来代码就看起来非常冗余,要修改起来也很麻烦,于是决定将表单封装起来。 结构 业务与逻辑区分 新建const.js文件,处理表单逻辑 配置化 json对象化配置表单属性 扩展&特殊处理 配置slot插槽 开始123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130<template> <el-form ref="form" :id="f ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover right_radius"><a href="/deploy/" title="Hexo部署到个人云服务器"><img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/1642055218000.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="Hexo部署到个人云服务器"></a></div><div class="recent-post-info"><a class="article-title" href="/deploy/" title="Hexo部署到个人云服务器">Hexo部署到个人云服务器</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-01-13T05:25:58.000Z" title="发表于 2022-01-13 13:25:58">2022-01-13</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/hexo/">hexo</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/deploy/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">前言 最近趁着活动薅羊毛又把服务器续上了,既然白嫖到了不用白不用,就将个人博客挪个窝;顺便记录一下。 购买服务器首先我们需要有一台云服务器,我这里是买的腾讯云的 通过git生成ssh秘钥1234567// 假如没有设置git的全局信息需要先设置 设置过了可以忽略git config --global user.name "yourname"git config --global user.email youremail@example.com// 生成SSH密钥ssh-keygen -t rsa -C "youremail@example.com"// 禁用自动转换,这个不设置后面上传时会出现警告git config --global core.autocrlf false 配置服务器git 登录服务器 安装git通过git –version命令查看是否存在git命令,我这里已经安装好了;如果显示的是not found, 需要去安装yum install curl-devel expat-devel gettext-devel opens ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover left_radius"><a href="/tagplus/" title="外挂标签"><img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/hexo.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="外挂标签"></a></div><div class="recent-post-info"><a class="article-title" href="/tagplus/" title="外挂标签">外挂标签</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-14T03:18:01.000Z" title="发表于 2021-08-14 11:18:01">2021-08-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/hexo/">hexo</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/tagplus/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">行内文本样式 text 带 下划线 的文本 带 着重号 的文本 带 波浪线 的文本 带 删除线 的文本 键盘样式的文本 command + D 密码样式的文本:这里没有验证码123456{% u 下划线 %} 的文本{% emp 着重号 %} 的文本{% wavy 波浪线 %} 的文本{% del 删除线 %} 的文本{% kbd command %} + {% kbd D %}{% psw 这里没有验证码 %} 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo 12 ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover right_radius"><a href="/el/" title="Element-UI问题清单"><img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/1628838623000.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="Element-UI问题清单"></a></div><div class="recent-post-info"><a class="article-title" href="/el/" title="Element-UI问题清单">Element-UI问题清单</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-14T02:30:56.000Z" title="发表于 2021-08-14 10:30:56">2021-08-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Element-UI/">Element-UI</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Element-UI/">Element-UI</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/el/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">部分内容转载自:8号的凌晨4点的一份 ElementUI 问题清单 form表单只有一个 input 时回车键刷新页面原因:触发了表单默认的提交行为,给el-form加上@submit.native.prevent就行了。 12345678910<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable @keyup.enter.native="enterInput" /> </el-form-item></el-form> 动态表单form重置遇到的问题相对于动态表单(有条件的对表单进行渲染)而言,需要使用v-show实现显示隐藏功能。如果使用v-if会报错,但不会影响重置结果, ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover left_radius"><a href="/common-css/" title="常用的一些CSS样式"><img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/1628479284000.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="常用的一些CSS样式"></a></div><div class="recent-post-info"><a class="article-title" href="/common-css/" title="常用的一些CSS样式">常用的一些CSS样式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-08T16:00:00.000Z" title="发表于 2021-08-09 00:00:00">2021-08-09</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/common-css/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">文本溢出隐藏 单行文本123456p{ width:200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 多行文本123456p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 中英文自动换行 word-break:break-all;只对英文起作用,以字母作为换行依据word-wrap:break-word; 只对英文起作用,以单词作为换行依据white-space:pre-wrap; 只对中文起作用,强制换行white-space:nowrap; 强制不换行,都起作用 12345678910111213141516171819p{ word-wrap: break-word; white-space: normal; word-break: break ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover right_radius"><a href="/gqs30l/" title="css水平垂直居中"><img class="post_bg" data-lazy-src="https://z3.ax1x.com/2021/07/22/WwHeR1.png" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="css水平垂直居中"></a></div><div class="recent-post-info"><a class="article-title" href="/gqs30l/" title="css水平垂直居中">css水平垂直居中</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-22T03:37:03.000Z" title="发表于 2021-07-22 11:37:03">2021-07-22</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/CSS/">CSS</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/gqs30l/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">这是一个很常见的样式布局,网上也有很多的实现方式,本文主要是针对一些比较常用到的方法做一下总结,记录一下。 现有实现方式大致的思路归纳为以下几种: 固定宽高居中 absolute + margin auto absolute + 负 margin absolute + calc 不定宽高居中 lineheight flex absolute + transform grid table-cell 公共代码(后面代码都基于这里) 123<div class="out"> <div class="inner">水平垂直居中</div></div> 实现的效果: absolute + margin auto123456789101112131415161718.out { width: 500px; height: 500px; border: 1px solid #000; position: relative;}.inner { b ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover left_radius"><a href="/sp8d6i/" title="js if/else 语句优化策略"><img class="post_bg" data-lazy-src="https://z3.ax1x.com/2021/07/20/WttAld.png" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="js if/else 语句优化策略"></a></div><div class="recent-post-info"><a class="article-title" href="/sp8d6i/" title="js if/else 语句优化策略">js if/else 语句优化策略</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-20T12:18:01.000Z" title="发表于 2021-07-20 20:18:01">2021-07-20</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javascript/">javascript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/javascript/">javascript</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/sp8d6i/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">前言 在项目当中,都会遇到需要做大量分支判断的情况,最常用到的就是用 if/else;但是用起来并不是很美观;所以当遇到大量分支判断嵌套在一起时,就会显得很难阅读。就要对应地做出一些优化。 简单逻辑判断提前 return123456789101112let a = 1;if (a) { a = 2;} else { return;}// 写成if (!a) { return;}a = 2; ||123456789let a = 1;if (a) { a = 1;} else { a = 2;}// 修改为a = a || 0; 三元表达式12345678910111213let a = 1, b = 2, c = 3, d = 4;if (a === b) { a = d;} else { a = c;}// 修改为a = a === b ? d : c; 按位异或运算符^123456789let a =1,b=2,c= ...</div></div></div><div class="recent-post-item post-card-large"><div class="post_cover right_radius"><a href="/pt9g3x/" title="数组对象求和"><img class="post_bg" data-lazy-src="/img/banner/4.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="数组对象求和"></a></div><div class="recent-post-info"><a class="article-title" href="/pt9g3x/" title="数组对象求和">数组对象求和</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-20T07:51:55.000Z" title="发表于 2021-06-20 15:51:55">2021-06-20</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javascript/">javascript</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/javascript/">javascript</a></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-comments"></i><a class="twikoo-count" href="/pt9g3x/#post-comment"></a> <span class="article-meta-label">条评论</span></span></div><div class="content">数组对象求和问题,在项目中有时会遇到列表求和的情况,这里记录一下。 12345let list = [ { id: 1, value1: 5, value2: 10, value3: 20 }, { id: 2, value1: 15, value2: 10, value3: 50 }, { id: 3, value1: 40, value2: 20, value3: 20 },]; 利用 reduce()和 Object.keys()1234567891011function mergeArr(arr, data) { let result = arr.reduce((acc, cur) => { Object.keys(acc).forEach((item) => (acc[item] += cur[item])); return acc; }, data); return result;}const data = { value1 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="/img/avatar.jpg" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="avatar"><div class="author-info__name">Peng</div><div class="author-info__description">随笔记录搬砖日常</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">37</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">20</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div></div><a class="button--animated" id="card-info-btn" href="http://imagineblog.host/about/"><i class="fas fa-heart"></i><span>About me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://www.cnblogs.com/imagine-lp/" target="_blank" title="博客园"><i class="iconfont icon-icon9-blog"></i></a><a class="social-icon" href="https://gitee.com/lp-Imagine" target="_blank" title="Gitee"><i class="iconfont icon-Gitee"></i></a><a class="social-icon" href="https://github.com/lp-Imagine" target="_blank" title="GitHub"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:luopeng101297@163.com" target="_blank" title="Email"><i class="iconfont icon-youxiang"></i></a></div></div><div class="sticky_layout"><div class="card-widget card-weibo"><div class="card-content"><div class="item-headline"><i class="fab fa-weibo"></i><span>微博热搜</span></div><div id="weibo-container" style="width:100%;height:150px;font-size:95%"></div></div></div><script defer data-pjax="data-pjax" src="/js/card_weibo.js"></script><div class="card-widget card-clock"><div id="clock"><img v-if="clockshow == "false"" alt="" src="https://i.loli.net/2021/04/01/JnT3Q8iq2plVdSM.gif" height="120px" width="100%"><table class="clock" v-if="clockshow"><tbody><tr><td class="clockdate">{{date}}</td><td class="weatherimg"><img id="weatherimg" :src="weatherimg" alt=""></td><td class="temperature">{{temperature}}</td><td class="humidityimg"><img id="humidityimg" :src="humidityimg" alt=""></td><td class="humidity">{{humidity}}</td></tr><tr class="time"><td colspan="5">{{time}}</td></tr><tr><td class="usaqi" colspan="1"><span>{{ip}}</span></td><td class="city" colspan="2">{{city}}</td><td class="daylight" colspan="2">{{daylight}}</td></tr></tbody></table></div></div><script defer data-pjax="data-pjax" src="/js/card_clock.js"></script><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/scroll_select/" title="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题"><img data-lazy-src="/img/banner/02.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题"></a><div class="content"><a class="title" href="/scroll_select/" title="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题">解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题</a><time datetime="2022-08-31T07:30:45.000Z" title="发表于 2022-08-31 15:30:45">2022-08-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/form_component/" title="el-form表单封装"><img data-lazy-src="/img/banner/02.jpg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="el-form表单封装"></a><div class="content"><a class="title" href="/form_component/" title="el-form表单封装">el-form表单封装</a><time datetime="2022-01-15T07:30:45.000Z" title="发表于 2022-01-15 15:30:45">2022-01-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/deploy/" title="Hexo部署到个人云服务器"><img data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/1642055218000.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="Hexo部署到个人云服务器"></a><div class="content"><a class="title" href="/deploy/" title="Hexo部署到个人云服务器">Hexo部署到个人云服务器</a><time datetime="2022-01-13T05:25:58.000Z" title="发表于 2022-01-13 13:25:58">2022-01-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/tagplus/" title="外挂标签"><img data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/hexo.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="外挂标签"></a><div class="content"><a class="title" href="/tagplus/" title="外挂标签">外挂标签</a><time datetime="2021-08-14T03:18:01.000Z" title="发表于 2021-08-14 11:18:01">2021-08-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/el/" title="Element-UI问题清单"><img data-lazy-src="https://cdn.jsdelivr.net/gh/lp-Imagine/lp-Imagine@main/images/1628838623000.jpeg" onerror='this.onerror=null,this.src="/img/banner/02.jpg"' alt="Element-UI问题清单"></a><div class="content"><a class="title" href="/el/" title="Element-UI问题清单">Element-UI问题清单</a><time datetime="2021-08-14T02:30:56.000Z" title="发表于 2021-08-14 10:30:56">2021-08-14</time></div></div></div></div><div class="card-widget" id="card-newest-comments"><div class="item-headline"><i class="fas fa-bolt"></i><span>最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div><div class="card-widget card-categories"><div class="card-content"><div class="item-headline"><i class="fa fa-folder-open"></i><span>分类</span></div><ul class="card-category-list"><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/CSS/">CSS</a><span class="card-category-list-count">2</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="常用的一些CSS样式" href="/common-css/">常用的一些CSS样式</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="css水平垂直居中" href="/gqs30l/">css水平垂直居中</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/Chrome/">Chrome</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Chrome Extension(扩展程序)开发" href="/lomf3x/">Chrome Extension(扩展程序)开发</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/ES6/">ES6</a><span class="card-category-list-count">2</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="ES6-ES12 特性" href="/eya8ra/">ES6-ES12 特性</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="async/await" href="/ilr5wg/">async/await</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/Element-UI/">Element-UI</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Element-UI问题清单" href="/el/">Element-UI问题清单</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/GitHub/">GitHub</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="GitHub 精选—前端" href="/ebgc4u/">GitHub 精选—前端</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/Markdown/">Markdown</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Markdown基本语法" href="/ag8qtu/">Markdown基本语法</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/MySQL/">MySQL</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="MySQL 数据库常用操作" href="/wsh1gw/">MySQL 数据库常用操作</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/React/">React</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="React(一):核心概念" href="/xu4nht/">React(一):核心概念</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/Vue/">Vue</a><span class="card-category-list-count">4</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="el-form表单封装" href="/form_component/">el-form表单封装</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="vue 组件—常用选项(methods、watch、filters、props、computed)" href="/hczb69/">vue 组件—常用选项(methods、watch、filters、props、computed)</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="解决 element 表格数据量过大导致页面渲染缓慢、卡顿问题" href="/np4k2h/">解决 element 表格数据量过大导致页面渲染缓慢、卡顿问题</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题" href="/scroll_select/">解决Element-ui选择器(ElSelect)因数据量大导致页面卡顿的问题</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/git/">git</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="git 命令" href="/egd000/">git 命令</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/hexo/">hexo</a><span class="card-category-list-count">2</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Hexo部署到个人云服务器" href="/deploy/">Hexo部署到个人云服务器</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="外挂标签" href="/tagplus/">外挂标签</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/javascript/">javascript</a><span class="card-category-list-count">18</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="js笛卡尔积算法" href="/Cartesian-product/">js笛卡尔积算法</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="javascript 正则表达式校验" href="/ctko47/">javascript 正则表达式校验</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="使用 NProgress 为页面/接口添加加载进度条" href="/cy0ics/">使用 NProgress 为页面/接口添加加载进度条</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Promise(三):拓展方法实现" href="/ddv8fu/">Promise(三):拓展方法实现</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="JS 声明提升" href="/df4477/">JS 声明提升</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="JS forEach 踩坑" href="/ehgc3o/">JS forEach 踩坑</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="前端常用公共方法工具类" href="/fk3tzn/">前端常用公共方法工具类</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="JS 循环遍历方法" href="/nn7ncb/">JS 循环遍历方法</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="JS 合并数组对象中 key 值相同的数据" href="/nt8dtc/">JS 合并数组对象中 key 值相同的数据</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Promise(一):Promise认识" href="/pnzuz1/">Promise(一):Promise认识</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="数组对象求和" href="/pt9g3x/">数组对象求和</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="JavaScript 数组去重" href="/rs7zqd/">JavaScript 数组去重</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="js对象排序" href="/sortObj/">js对象排序</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="js if/else 语句优化策略" href="/sp8d6i/">js if/else 语句优化策略</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="js 深拷贝总结" href="/va1sn5/">js 深拷贝总结</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="javascript 之 this 指向问题" href="/vtadwe/">javascript 之 this 指向问题</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Promise(二):手动实现一个 Promise" href="/ymm751/">Promise(二):手动实现一个 Promise</a></div></li><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="Axios 封装" href="/zw2gqe/">Axios 封装</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="浏览器渲染过程简介" href="/gc6agg/">浏览器渲染过程简介</a></div></li></ul><li class="card-category-list-item"><div class="card-category-list-link"><a class="card-category-list-name" href="/categories/%E8%B7%AF%E7%94%B1/">路由</a><span class="card-category-list-count">1</span><i class="fa fa-chevron-left" onclick="classifyclick(this)"></i></div></li><ul class="card-post-list child card-category-list child"><li class="card-post-list-item card-category-list-item"><div class="card-post-list-link card-category-list-link"><a class="card-post-name" title="前端路由实现" href="/bhkocy/">前端路由实现</a></div></li></ul></ul></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/git/" style="font-size:1.1em;color:#223253">git<sup>1</sup></a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size:1.1em;color:#7665ac">算法<sup>1</sup></a><a href="/tags/Markdown/" style="font-size:1.1em;color:#9cb56e">Markdown<sup>1</sup></a><a href="/tags/Router/" style="font-size:1.1em;color:#2fa65a">Router<sup>1</sup></a><a href="/tags/CSS/" style="font-size:1.2em;color:#9c873b">CSS<sup>2</sup></a><a href="/tags/javascript/" style="font-size:1.5em;color:#240d9c">javascript<sup>17</sup></a><a href="/tags/RegExp/" style="font-size:1.1em;color:#989e64">RegExp<sup>1</sup></a><a href="/tags/Promise/" style="font-size:1.3em;color:#655202">Promise<sup>3</sup></a><a href="/tags/hexo/" style="font-size:1.2em;color:#2a3671">hexo<sup>2</sup></a><a href="/tags/GitHub/" style="font-size:1.1em;color:#47709f">GitHub<sup>1</sup></a><a href="/tags/Element-UI/" style="font-size:1.1em;color:#739214">Element-UI<sup>1</sup></a><a href="/tags/ES6/" style="font-size:1.2em;color:#4e5a8c">ES6<sup>2</sup></a><a href="/tags/utils/" style="font-size:1.1em;color:#3c126b">utils<sup>1</sup></a><a href="/tags/Vue/" style="font-size:1.4em;color:#37ac9b">Vue<sup>4</sup></a><a href="/tags/Browser/" style="font-size:1.1em;color:#363b16">Browser<sup>1</sup></a><a href="/tags/Chrome/" style="font-size:1.1em;color:#3e841d">Chrome<sup>1</sup></a><a href="/tags/Table/" style="font-size:1.1em;color:#708d3c">Table<sup>1</sup></a><a href="/tags/MySQL/" style="font-size:1.1em;color:#57b552">MySQL<sup>1</sup></a><a href="/tags/React/" style="font-size:1.1em;color:#c53b62">React<sup>1</sup></a><a href="/tags/Axios/" style="font-size:1.1em;color:#b04278">Axios<sup>1</sup></a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多"><i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/08/"><span class="card-archive-list-date">八月 2022</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/2022/01/"><span class="card-archive-list-date">一月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</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/07/"><span class="card-archive-list-date">七月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</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/05/"><span class="card-archive-list-date">五月 2021</span><span class="card-archive-list-count">5</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/04/"><span class="card-archive-list-date">四月 2021</span><span class="card-archive-list-count">8</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/03/"><span class="card-archive-list-date">三月 2021</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">37</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">76.2k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastpushdate="2022-08-31T08:05:30.629Z"></div></div></div></div></div></div></main><footer id="footer"><div class="github-div"><div></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动" data-pjax-state=""><span class="badge-subject">🌴Powered</span><span class="badge-value bg-blue">Hexo</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://imgtu.com/" target="_blank" title="本站图片使用路过图床" data-pjax-state=""><span class="badge-subject">🌈Drawing bed</span><span class="badge-value bg-brightgreen">imagtu</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://github.com/" target="_blank" title="静态网页托管于 GitHub Pages" data-pjax-state=""><span class="badge-subject">📖Pages</span><span class="badge-value bg-brightgreen">GitHub</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 CDN 加速服务" data-pjax-state=""><span class="badge-subject">🎈CDN</span><span class="badge-value bg-orange">jsDelivr</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://vercel.com/" target="_blank" title="vercel 提供 CDN 加速服务" data-pjax-state=""><span class="badge-subject">🎃Server</span><span class="badge-value bg-orange">vercel</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可" data-pjax-state=""><span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-gradient">BY-NC-SA 4.0</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" title="主题" data-pjax-state=""><span class="badge-subject">🎨Theme</span><span class="badge-value bg-blueviolet">Butterfly</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="https://beian.miit.gov.cn/" target="_blank" title="本站点已通过工信部ICP备案" data-pjax-state=""><span class="badge-subject">赣ICP备</span><span class="badge-value bg-gradient">2022000236号-1</span></a></div><div class="github-badge"><a style="color:#fff" rel="external nofollow noopener noreferrer" href="http://imagineblog.host" target="_blank" title="copyright" data-pjax-state=""><span class="badge-subject">📑copyright</span><span class="badge-value bg-gradient"><div class="copyright">©2020 - 2022<i id="heartbeat" class="fa fas fa-heartbeat"></i> Peng</div></span></a></div><div class="github-badge"><span class="badge-subject">安全运行</span><a style="text-decoration:none;color:#fff;padding:4px 4px 4px 6px;border-top-right-radius:4px;border-bottom-right-radius:4px;min-width:180px;display:inline-block" id="running-time" rel="external nofollow noopener noreferrer" href="" target="_blank" title="网站运行时间" data-pjax-state=""></a></div><div id="running-time"><script>//- setInterval(()=>{let create_time=Math.round(new Date('2020-02-18 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml=time[0]+'年'+time[1]+'天'+time[2]+'时'+time[3]+'分'+time[4]+'秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);
setInterval(()=>{
let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);
let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);
let second=timestamp-create_time;
let time=new Array(0,0,0,0,0);
if(second>=365*24*3600){
time[0]=parseInt(second/(365*24*3600));
second%=365*24*3600;
}
if(second>=24*3600){
time[1]=parseInt(second/(24*3600));
second%=24*3600;
}
if(second>=3600){
time[2]=parseInt(second/3600);second%=3600;
}
if(second>=60){
time[3]=parseInt(second/60);second%=60;
}
if(second>0){
time[4]=second;
}
currentTimeHtml=`<span style="color:#fff;"><span style="color:#000">${time[0]}</span> 年 <span style="color:#9253A8">${time[1]}</span> 天 <span style="color:#50ABF1">${time[2]}</span> 时<span style="color:#666">${time[3]}</span> 分<span style="color:red">${time[4]}</span> 秒</span>`;
document.getElementById("running-time").innerHTML=currentTimeHtml;
},1000);</script></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat_btn" type="button" title="SMS"><i class="iconfont icon-sms"></i></button><button id="go-up" type="button" title="回到顶部"><i class="iconfont icon-backtop"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div></div><hr><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
if (typeof pangu === 'object') pangu.autoSpacingPage()
else {
getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
.then(() => {
pangu.autoSpacingPage()
})
}
}
function panguInit () {
if (true){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(() => {
const getCommentUrl = () => {
const eleGroup = document.querySelectorAll('#recent-posts .article-title')
let urlArray = []
eleGroup.forEach(i=>{
urlArray.push(i.getAttribute('href'))
})
return urlArray
}
const getCount = () => {
const runTwikoo = () => {
twikoo.getCommentsCount({
envId: 'https://twikoo-talks.vercel.app/',
region: '',
urls: getCommentUrl(),
includeReply: false
}).then(function (res) {
document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
item.innerText = res[index].count
})
}).catch(function (err) {
console.log(err)
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runTwikoo)
}
}
window.pjax ? getCount() : window.addEventListener('load', getCount)
})()</script><script>function subtitleType () {
getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
jinrishici.load(function (result) {
if (true) {
var sub = "Welcome to imagine's Blog!,欢迎来到imagine的搬砖日志小站📝!".length == 0 ? new Array() : "Welcome to imagine's Blog!,欢迎来到imagine的搬砖日志小站📝!".split(',')
var content = result.data.content
var both = sub.unshift(content)
var typed = new Typed('#subtitle', {
strings: sub,
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50,
})
} else {
document.getElementById('subtitle').innerHTML = result.data.content
}
})
})
}
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
}
} else {
subtitleType()
}</script><script>if (document.getElementsByClassName('mermaid').length) {
if (window.mermaidJsLoad) mermaid.init()
else {
getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
window.mermaidJsLoad = true
mermaid.initialize({
theme: 'default',
})
true && mermaid.init()
})
}
}</script><script>var gitcalendar = new Vue({
el: '#gitcalendar',
data: {
simplemode: false,
user: 'lp-Imagine',
fixed: 'fixed',
px: 'px',
x: '',
y: '',
span1: '',
span2: '',
month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthchange: [],
oneyearbeforeday: '',
thisday: '',
amonthago: '',
aweekago: '',
weekdatacore: 0,
datacore: 0,
total: 0,
datadate: '',
data: [],
positionplusdata: [],
firstweek: [],
lastweek: [],
beforeweek: [],
thisweekdatacore: 0,
mounthbeforeday: 0,
mounthfirstindex: 0,
crispedges: 'crispedges',
thisdayindex: 0,
amonthagoindex: 0,
amonthagoweek: [],
firstdate: [],
first2date: [],
montharrbefore: [],
monthindex: 0,
color: ['rgb(145, 145, 145, 0.2)', '#c6ecc1', '#a0e2bb', '#81D8CF', '#70c5d3', '#60a2ce', '#507ac9', '#4356c5', '#423cc4', '#5b3abc', '#7138b6']
},
methods: {
selectStyle(data, event) {
document.querySelector('.angle-wrapper').style.display = 'block'
this.span1 = data.date;
this.span2 = data.count;
this.x = event.clientX - 100;
this.y = event.clientY - 60
},
outStyle() {
document.querySelector('.angle-wrapper').style.display = 'none'
},
thiscolor(x) {
if (x === 0) {
let i = parseInt(x / 2);
return this.color[0]
} else if (x < 2) {
return this.color[1]
} else if (x < 20) {
let i = parseInt(x / 2);
return this.color[i]
} else {
return this.color[9]
}
},
}
});
var apiurl = 'python-github-calendar-api-zfour.vercel.app' ? 'https://python-github-calendar-api-zfour.vercel.app/api?' : 'https://githubapi.ryanchristian.dev/user/'
var githubapiurl = apiurl + gitcalendar.user;
//canvas绘图
function responsiveChart() {
let c = document.getElementById("gitcanvas");
if (c) {
let cmessage = document.getElementById("gitmessage");
let ctx = c.getContext("2d");
c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
let linemaxwitdh = 0.96 * c.width / gitcalendar.data.length;
c.height = 9 * linemaxwitdh;
let lineminwitdh = 0.8 * linemaxwitdh;
let setposition = {
x: 0.02 * c.width,
y: 0.025 * c.width
};
for (let week in gitcalendar.data) {
weekdata = gitcalendar.data[week];
for (let day in weekdata) {
let dataitem = {
date: "",
count: "",
x: 0,
y: 0
};
gitcalendar.positionplusdata.push(dataitem);
ctx.fillStyle = gitcalendar.thiscolor(weekdata[day].count);
setposition.y = Math.round(setposition.y * 100) / 100;
dataitem.date = weekdata[day].date;
dataitem.count = weekdata[day].count;
dataitem.x = setposition.x;
dataitem.y = setposition.y;
ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);
setposition.y = setposition.y + linemaxwitdh
};
setposition.y = 0.025 * c.width;
setposition.x = setposition.x + linemaxwitdh
};
ctx.font = "600 Arial";
ctx.fillStyle = '#aaa';
ctx.fillText("日", 0, 1.9 * linemaxwitdh);
ctx.fillText("二", 0, 3.9 * linemaxwitdh);
ctx.fillText("四", 0, 5.9 * linemaxwitdh);
ctx.fillText("六", 0, 7.9 * linemaxwitdh);
let monthindexlist = c.width / 24;
for (let index in gitcalendar.monthchange) {
ctx.fillText(gitcalendar.monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
monthindexlist = monthindexlist + c.width / 12
};
cmessage.onmousemove = function(event) {
document.querySelector('.angle-wrapper').style.display = 'none'
};
c.onmousemove = function(event) {
document.querySelector('.angle-wrapper').style.display = 'none'
getMousePos(c, event);
};
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left * (canvas.width / rect.width);
var y = event.clientY - rect.top * (canvas.height / rect.height);
//console.log("x:"+x+",y:"+y);
for (let item of gitcalendar.positionplusdata) {
let lenthx = x - item.x;
let lenthy = y - item.y;
//console.log(lenthx,lenthy);
if (0 < lenthx && lenthx < lineminwitdh) {
if (0 < lenthy && lenthy < lineminwitdh) {
//console.log(item.date,item.count)
document.querySelector('.angle-wrapper').style.display = 'block'
gitcalendar.span1 = item.date;
gitcalendar.span2 = item.count;
gitcalendar.x = event.clientX - 100;
gitcalendar.y = event.clientY - 60
}
}
//if(0< x - item.x <lineminwitdh&&0< y - item.y <lineminwitdh){
//console.log(item.count,item.date);
//}
}
}
}
}
//数据统计算法
function addlastmonth() {
if (gitcalendar.thisdayindex === 0) {
thisweekcore(52);
thisweekcore(51);
thisweekcore(50);
thisweekcore(49);
thisweekcore(48);
gitcalendar.thisweekdatacore += gitcalendar.firstdate[6].count;
gitcalendar.amonthago = gitcalendar.firstdate[6].date
} else {
thisweekcore(52);
thisweekcore(51);
thisweekcore(50);
thisweekcore(49);
thisweek2core();
gitcalendar.amonthago = gitcalendar.first2date[gitcalendar.thisdayindex - 1].date
}
};
function thisweek2core() {
for (let i = gitcalendar.thisdayindex - 1; i < gitcalendar.first2date.length; i++) {
gitcalendar.thisweekdatacore += gitcalendar.first2date[i].count
}
};
function thisweekcore(index) {
for (let item of gitcalendar.data[index]) {
gitcalendar.thisweekdatacore += item.count
}
};
function addlastweek() {
for (let item of gitcalendar.lastweek) {
gitcalendar.weekdatacore += item.count
}
};
function addbeforeweek() {
for (let i = gitcalendar.thisdayindex; i < gitcalendar.beforeweek.length; i++) {
gitcalendar.weekdatacore += gitcalendar.beforeweek[i].count
}
};
function addweek(data) {
if (gitcalendar.thisdayindex === 6) {
gitcalendar.aweekago = gitcalendar.lastweek[0].date;
addlastweek()
} else {
lastweek = data.contributions[51];
gitcalendar.aweekago = lastweek[gitcalendar.thisdayindex + 1].date;
addlastweek();
addbeforeweek()
}
}
fetch(githubapiurl)
.then(data => data.json())
.then(data => {
gitcalendar.data = data.contributions;
gitcalendar.total = data.total;
gitcalendar.first2date = gitcalendar.data[48];
gitcalendar.firstdate = gitcalendar.data[47];
gitcalendar.firstweek = data.contributions[0];
gitcalendar.lastweek = data.contributions[52];
gitcalendar.beforeweek = data.contributions[51];
gitcalendar.thisdayindex = gitcalendar.lastweek.length - 1;
gitcalendar.thisday = gitcalendar.lastweek[gitcalendar.thisdayindex].date;
gitcalendar.oneyearbeforeday = gitcalendar.firstweek[0].date;
gitcalendar.monthindex = gitcalendar.thisday.substring(5, 7) * 1;
gitcalendar.montharrbefore = gitcalendar.month.splice(gitcalendar.monthindex, 12 - gitcalendar.monthindex);
gitcalendar.monthchange = gitcalendar.montharrbefore.concat(gitcalendar.month);
addweek(data);
addlastmonth();
responsiveChart();
})
.catch(function(error) {
console.log(error);
});
//手机版更换为svg绘制
if (document.getElementById("gitcalendarcanvasbox") && document.getElementById("gitcalendarcanvasbox").offsetWidth < 500) {
gitcalendar.simplemode = false
}
//当改变窗口大小时重新绘制canvas
window.onresize = function() {
if (gitcalendar.simplemode) responsiveChart()
}
//解决滚动滑轮时出现的标签显示
window.onscroll = function() {
if (document.querySelector('.angle-wrapper')) {
document.querySelector('.angle-wrapper').style.display = 'none'
}
};</script></div><script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g,"") // remove html tag
if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: 'https://twikoo-talks.vercel.app/',
region: '',
pageSize: 6,
includeReply: true
}).then(function (res) {
const twikooArray = res.map(e => {
return {
'content': changeContent(e.comment),
'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)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "无法获取评论,请确认相关配置是否正确"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runTwikoo)
}
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
const name = 'data-lazy-src'
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${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('#card-newest-comments .aside-list')
$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))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/close.js"></script><script defer data-pjax src="/js/maopao.js"></script><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer data-pjax src="/js/wow-init.js"></script><script src="https://myhkw.cn/api/player/1618646380121" id="myhk" key="1618646380121" m="1"></script><script defer data-pjax src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script><script src="/js/moments.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script id="canvas_nest" defer color="67,173,127" opacity="0.7" zindex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,POWERMODE.mobile=!1,document.body.addEventListener("input",POWERMODE)</script><script src="//code.tidio.co/bisrc3ghmylr0jd2ikrwcv8xp5i2nkwz.js" async></script><script>function onTidioChatApiReady() {
window.tidioChatApi.hide();
window.tidioChatApi.on("close", function() {
window.tidioChatApi.hide();
});
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
var chatBtnFn = () => {
document.getElementById("chat_btn").addEventListener("click", function(){
window.tidioChatApi.show();
window.tidioChatApi.open();
});
}
chatBtnFn()</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
'#web_bg',
'.js-pjax'
]
if (false) {
pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}
var pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
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)
})
//- document.querySelectorAll("script[data-pjax], .pjax-reload script").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.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
if (typeof gtag === 'function') {
gtag('config', '', {'page_path': 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:send', function () {
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:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script></body></html>