-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
521 lines (363 loc) · 20.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
<title>把生命浪费在美好的代码上</title>
<link rel="shortcut icon" href="/img/favicon.png">
<meta property="og:type" content="website">
<meta property="og:title" content="把生命浪费在美好的代码上">
<meta property="og:url" content="https://buildall.github.io/index.html">
<meta property="og:site_name" content="把生命浪费在美好的代码上">
<meta property="og:locale">
<meta property="article:author" content="Zhao Biao">
<meta name="twitter:card" content="summary">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js" defer></script>
<meta name="generator" content="Hexo 6.3.0"></head>
<html>
<body>
<div class="container">
<header class="user-select">
<div class="header-container-wrap">
<div class="header-container">
<style>
.logo>* {
width:auto;height:4rem;
}
</style>
<a href="/" class="logo">
<img data-src="/img/site-logo.png" / src=/img/site-logo.png>
</a>
<span class="site-title">
把生命浪费在美好的代码上
</span>
<nav>
<div class="search" tabindex="-1">
<input class="search-input" placeholder="Search for articles" type="search" maxlength="64">
<div class="seach-icon-container">
<svg class="search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4008 12.4008C14.744 10.0577 14.744 6.25871 12.4008 3.91556C10.0577 1.57242 6.25871 1.57242 3.91556 3.91556C1.57242 6.25871 1.57242 10.0577 3.91556 12.4008C6.25871 14.744 10.0577 14.744 12.4008 12.4008ZM12.4008 12.4008L15.5828 15.5828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"></path>
</svg>
</div>
<div class="search-history">
<div class="search-history-title">
<span>Search for History</span>
<span class="search-history-clear">Clear</span>
</div>
<div class="search-history-list"></div>
</div>
<div class="search-result"></div>
<script src="/js/search.js" path="/search.json" defer></script>
</div>
<ul class="nav-list">
<li class="nav-list-item">
<a href="/">Home</a>
</li>
</ul>
<div class="sidebar-nav" tabindex="-1">
<svg class="sidebar-nav-btn" viewBox="0 0 16 16" width="16" height="16">
<path d="M3,11.335h16M3,6h16M3,16.67h16" transform="translate(-3-3.335)" stroke="currentColor" stroke-width="2" />
</svg>
<div class="mask" tabindex="-1"></div>
<ul class="nav-list">
<li class="nav-list-item">
<a href="/">Home</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="main-wrap">
<main class="main-width">
<ul class="post-list">
<li class="post-item">
<div class="post-meta">
<div class="post-date">2017.09.11</div>
<div class="post-tag">
<a href="/tags/lego/" class="post-tag-item">lego</a>
<a href="/tags/%E4%B9%90%E9%AB%98/" class="post-tag-item">乐高</a>
<a href="/tags/%E4%BA%B2%E5%AD%90/" class="post-tag-item">亲子</a>
</div>
</div>
<div class="post-content-wrap">
<div class="post-content">
<a href="/2017/09/11/howtoplaylegowithkids/" class="post-title" >如何与孩子一起玩乐高</a>
<a href="/2017/09/11/howtoplaylegowithkids/" class="post-abstract">周末和四岁的儿子一起玩了乐高，很有意思，并且觉得有些经验可以总结和分享的。这篇文章主要说以下两点内容:我是怎么为孩子 选择乐高 玩具的我是怎么 引导孩子 正确的完成乐高玩具的拼装乐高玩具大概可以分为两类: 自由拼装和按照图纸安装成特定玩具。本文中说的乐高玩具都是后者，既按照图纸安装的乐高。怎么选乐高玩具乐高玩具那么多，有各种动漫、电影、主题、建筑类的乐高，我们应该怎么给孩子选择乐高呢？我总结...</a>
<ul class="post-action-list">
<li class="post-action-item post-word">
<svg class="word-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path d="M10 4H30L40 14V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6C8 4.89543 8.89543 4 10 4Z"></path>
<path d="M16.0083 20L19.0083 34L24.0083 24L29.0083 34L32.0083 20"></path>
</svg>
<span>2k</span>
</li>
<li class="post-action-item post-time">
<svg class="time-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" />
<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" />
</svg>
<span>6min</span>
</li>
</ul>
</div>
<img class="post-cover" data-src="/images/lego.jpg" / src=/img/site-logo.png>
</div>
</li>
<li class="post-item">
<div class="post-meta">
<div class="post-date">2017.08.20</div>
<div class="post-tag">
<a href="/tags/hexo/" class="post-tag-item">hexo</a>
</div>
</div>
<div class="post-content-wrap">
<div class="post-content">
<a href="/2017/08/20/howhexoworks/" class="post-title" >hexo是怎么工作的</a>
<a href="/2017/08/20/howhexoworks/" class="post-abstract">你可能用过hexo(或者jekyll)来搭建自己的博客网站。通常我们在安装、配置完成hexo之后，借助hexo，一般通过以下步骤，就可以完成一篇博客的编写及发布，真是方便极了：$ hexo init // 创建一个新的hexo项目$ hexo new mynewblog // 新建一篇标题为mynewblog的文章$ hexo server // 为he...</a>
<ul class="post-action-list">
<li class="post-action-item post-word">
<svg class="word-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path d="M10 4H30L40 14V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6C8 4.89543 8.89543 4 10 4Z"></path>
<path d="M16.0083 20L19.0083 34L24.0083 24L29.0083 34L32.0083 20"></path>
</svg>
<span>1.7k</span>
</li>
<li class="post-action-item post-time">
<svg class="time-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" />
<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" />
</svg>
<span>6min</span>
</li>
</ul>
</div>
<img class="post-cover" data-src="/images/howhexoworks/hexo_logo.png" / src=/img/site-logo.png>
</div>
</li>
<li class="post-item">
<div class="post-meta">
<div class="post-date">2017.08.12</div>
<div class="post-tag">
<a href="/tags/JavaScript/" class="post-tag-item">JavaScript</a>
</div>
</div>
<div class="post-content-wrap">
<div class="post-content">
<a href="/2017/08/12/js-standard/" class="post-title" >用standard来管理JavaScript代码规范</a>
<a href="/2017/08/12/js-standard/" class="post-abstract">怎么才能使前端团队写的JavaScript代码都有统一的风格、符合规范呢?要解决这个问题大概要做下面几件事:制定规范标准写代码时执行代码规范检查代码是否符合规范修改不符合规范的代码那么，到底具体应该如何实施以上几个步骤呢？我的回答是你什么都不用做了，有人已经帮你把以上四步全部做好了！是的，这个好用的工具就是本文要介绍的JavaScript规范库，standarad。关于standardsta...</a>
<ul class="post-action-list">
<li class="post-action-item post-word">
<svg class="word-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path d="M10 4H30L40 14V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6C8 4.89543 8.89543 4 10 4Z"></path>
<path d="M16.0083 20L19.0083 34L24.0083 24L29.0083 34L32.0083 20"></path>
</svg>
<span>963</span>
</li>
<li class="post-action-item post-time">
<svg class="time-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" />
<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" />
</svg>
<span>3min</span>
</li>
</ul>
</div>
<img class="post-cover" data-src="/images/jsstandard/standard_logo.png" / src=/img/site-logo.png>
</div>
</li>
<li class="post-item">
<div class="post-meta">
<div class="post-date">2016.04.26</div>
<div class="post-tag">
<a href="/tags/JavaScript/" class="post-tag-item">JavaScript</a>
</div>
</div>
<div class="post-content-wrap">
<div class="post-content">
<a href="/2016/04/26/scopeandclosure/" class="post-title" >作用域和闭包--读《你不知道的JavaScript》</a>
<a href="/2016/04/26/scopeandclosure/" class="post-abstract">本文是在看完《你不知道的JavaScript》这本书之后整理而成。本文中所有的代码可以在这里找到。如果你不想读下面的文字，可以直接clone代码并运行，然后结合代码和注释，试着去理解作用域和闭包的概念。词法作用域JavaScript采用词法作用域。所谓词法作用域就是代码书写完成之后，作用域随即确定，所写既所得。看下面的代码;var printSpace = require(&#x27;./p...</a>
<ul class="post-action-list">
<li class="post-action-item post-word">
<svg class="word-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path d="M10 4H30L40 14V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6C8 4.89543 8.89543 4 10 4Z"></path>
<path d="M16.0083 20L19.0083 34L24.0083 24L29.0083 34L32.0083 20"></path>
</svg>
<span>2.9k</span>
</li>
<li class="post-action-item post-time">
<svg class="time-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" />
<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" />
</svg>
<span>11min</span>
</li>
</ul>
</div>
<img class="post-cover" data-src="/images/javascript_logo/js.jpg" / src=/img/site-logo.png>
</div>
</li>
<li class="post-item">
<div class="post-meta">
<div class="post-date">2015.12.09</div>
<div class="post-tag">
<a href="/tags/vim/" class="post-tag-item">vim</a>
<a href="/tags/front-end-tool/" class="post-tag-item">front-end tool</a>
</div>
</div>
<div class="post-content-wrap">
<div class="post-content">
<a href="/2015/12/09/frontendvim/" class="post-title" >现在开始用vim开发Web前端吧</a>
<a href="/2015/12/09/frontendvim/" class="post-abstract">如果你是一名web前端工程师并且没有vim使用经验的话，那么这篇博文就是为你准备的。vim是什么vim是一款文本编辑器应用程序。和一般的编辑器程序不同，vim有以下特点:运行在终端,而非桌面不需要使用鼠标进行操作，所有操作都通过键盘实现Linux系统默认安装这款编辑器为什么用vim前端最流行的编辑器应该是sublime text和web storm，这两个应用程序确实也非常好用，能有效的提高...</a>
<ul class="post-action-list">
<li class="post-action-item post-word">
<svg class="word-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" >
<path d="M10 4H30L40 14V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42V6C8 4.89543 8.89543 4 10 4Z"></path>
<path d="M16.0083 20L19.0083 34L24.0083 24L29.0083 34L32.0083 20"></path>
</svg>
<span>2.6k</span>
</li>
<li class="post-action-item post-time">
<svg class="time-icon" width="16" height="16" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" />
<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" />
</svg>
<span>9min</span>
</li>
</ul>
</div>
<img class="post-cover" data-src="/images/vim-logo.png" / src=/img/site-logo.png>
</div>
</li>
</ul>
</main>
<aside tabindex="-1">
<div class="sidebar-block categories-wrap">
<div class="sidebar-title categories-title">Categories</div>
<div class="sidebar-body">
<ul class="categories-list">
<li class="categories-item">
<a class="categories-link" href="/categories/CSS/">
<div class="categories-name">CSS</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/JavaScript/">
<div class="categories-name">JavaScript</div>
<div class="categories-count">5</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/Tools/">
<div class="categories-name">Tools</div>
<div class="categories-count">2</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/HowItWorks/">
<div class="categories-name">HowItWorks</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/CSS/sass/">
<div class="categories-name">sass</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/JavaScript/standard/">
<div class="categories-name">standard</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/%E6%97%A7%E5%8D%9A%E5%AE%A2/">
<div class="categories-name">旧博客</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/%E5%92%8C%E4%BB%A3%E7%A0%81%E6%97%A0%E5%85%B3%E7%9A%84%E7%94%9F%E6%B4%BB/">
<div class="categories-name">和代码无关的生活</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/Tools/vim/">
<div class="categories-name">vim</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/HowItWorks/hexo/">
<div class="categories-name">hexo</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/%E5%92%8C%E4%BB%A3%E7%A0%81%E6%97%A0%E5%85%B3%E7%9A%84%E7%94%9F%E6%B4%BB/lego/">
<div class="categories-name">lego</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/JavaScript/requirejs/">
<div class="categories-name">requirejs</div>
<div class="categories-count">1</div>
</a>
</li>
<li class="categories-item">
<a class="categories-link" href="/categories/Tools/GitHub/">
<div class="categories-name">GitHub</div>
<div class="categories-count">1</div>
</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-block tags-wrap">
<div class="sidebar-title tags-title">Tags</div>
<div class="sidebar-body">
<a href="/tags/sass/" style="color:#f1d872;font-size:1.2395626485292022rem">sass</a>
<a href="/tags/JavaScript/" style="color:#45ab0c;font-size:1.752637148020887rem">JavaScript</a>
<a href="/tags/vim/" style="color:#e1b6d1;font-size:0.5467410721872281rem">vim</a>
<a href="/tags/front-end-tool/" style="color:#91c21f;font-size:1.0265117505238441rem">front-end tool</a>
<a href="/tags/hexo/" style="color:#d11eb8;font-size:1.8359972773900113rem">hexo</a>
<a href="/tags/JS%E7%BB%A7%E6%89%BF/" style="color:#213caa;font-size:0.7364074182683491rem">JS继承</a>
<a href="/tags/%E6%97%A7%E5%8D%9A%E5%AE%A2/" style="color:#3535aa;font-size:0.4976793124986134rem">旧博客</a>
<a href="/tags/lego/" style="color:#83c7ec;font-size:1.801691855222331rem">lego</a>
<a href="/tags/%E4%B9%90%E9%AB%98/" style="color:#522118;font-size:0.7716850847719914rem">乐高</a>
<a href="/tags/%E4%BA%B2%E5%AD%90/" style="color:#c1d53d;font-size:1.7403122166340812rem">亲子</a>
<a href="/tags/requirejs/" style="color:#94a3da;font-size:1.9058267414341619rem">requirejs</a>
<a href="/tags/GitHub/" style="color:#9ed5c7;font-size:0.5216436832084868rem">GitHub</a>
</div>
</div>
</aside>
</div>
<div class="pagination main-width user-select">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
</svg>
</a>
</div>
<footer class="footer main-width">
<div class="copyright">
© 2015 - 2024
Zhao Biao
</div>
<!-- <div class="framework-info">
<span>Framework</span>
<a href="https://hexo.io" target="_blank">Hexo</a>
<span class="footer-separator">|</span>
<span>Theme</span>
<a href="https://github.com/Lete114/hexo-theme-MengD" target="_blank">MengD</a>
</div> -->
<div class="custom"> </div>
</footer>
</div>
</body>
</html>