-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1241 lines (900 loc) · 61 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
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
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.9.0">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"xllily.github.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
</script>
<meta property="og:type" content="website">
<meta property="og:title" content="Just Notes">
<meta property="og:url" content="https://xllily.github.io/index.html">
<meta property="og:site_name" content="Just Notes">
<meta property="og:locale" content="en">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Just Notes">
<link rel="canonical" href="https://xllily.github.io/">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome : true,
isPost : false,
lang : 'en'
};
</script>
<title>Just Notes</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="Toggle navigation bar">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<h1 class="site-title">Just Notes</h1>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger">
<i class="fa fa-search fa-fw fa-lg"></i>
</div>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="main-menu menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>About</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>Categories</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a>
</li>
<li class="menu-item menu-item-sitemap">
<a href="/sitemap.xml" rel="section"><i class="fa fa-sitemap fa-fw"></i>Sitemap</a>
</li>
<li class="menu-item menu-item-search">
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
</a>
</li>
</ul>
</nav>
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off"
placeholder="Searching..." spellcheck="false"
type="search" class="search-input">
</div>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
</div>
<div id="search-result">
<div id="no-result">
<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content index posts-expand">
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2024/10/15/Simplifying-Web-UI/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2024/10/15/Simplifying-Web-UI/" class="post-title-link" itemprop="url">Simplifying Web UI</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2024-10-15 11:38:56 / Modified: 11:39:23" itemprop="dateCreated datePublished" datetime="2024-10-15T11:38:56+08:00">2024-10-15</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="从原始-CSS-到-CSS-框架的演变"><a href="#从原始-CSS-到-CSS-框架的演变" class="headerlink" title="从原始 CSS 到 CSS 框架的演变"></a>从原始 CSS 到 CSS 框架的演变</h2><p>在 CSS 发展的初期，开发者主要使用以下几种方式来编写和应用样式：</p>
<ul>
<li><strong>内联样式</strong>：在 HTML 标签内直接使用 <code>style</code> 属性。这种方式简单直接，但难以维护和复用。</li>
<li><strong>内嵌样式</strong>：在 HTML 文档的 <code><head></code> 中使用 <code><style></code> 标签编写样式。虽然比内联样式稍好，但仍不够模块化。</li>
<li><strong>外部样式表</strong>：通过 <code><link></code> 标签将独立的 CSS 文件引入 HTML 文档。这种方式使得样式得以复用和集中管理，成为现代开发的主流方法。</li>
</ul>
<p>这些原始的 CSS 编写方式虽然有效，但当项目规模扩大时，其维护性和复用性逐渐成为挑战。历史的车轮滚滚向前，开发者需要从容应对项目复杂性不断提升的方案，CSS 预处理器如 <strong><a href="https://sass-lang.com/" target="_blank" rel="noopener">Sass</a></strong> 和 <strong><a href="http://lesscss.org/" target="_blank" rel="noopener">LESS</a></strong> 也应运而生。它们通过提供变量、嵌套规则、混合宏等功能，极大地提升了 CSS 的可维护性和扩展性，使得开发者可以更高效地管理复杂项目中的样式。</p>
<p>随后，<strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3" target="_blank" rel="noopener">CSS3</a></strong> 的发布为 CSS 带来了许多新特性，包括动画、变换、媒体查询等，使得样式的编写更为灵活和丰富。CSS3 的这些扩展为开发者提供了更强大的工具来创建现代化的响应式页面，从而为 CSS 框架的进一步发展奠定了基础。</p>
<p>接下来，CSS 框架逐渐成为解决方案，以标准化和模块化的方式提升开发效率。</p>
<p>在 CSS 框架的进化过程中，尽管 <strong><a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a></strong> 被广泛视为使前端开发者摆脱手写样式的首个大规模流行 CSS 框架，但它并非最早的尝试。在 Bootstrap 之前，已有若干框架为后续 CSS 发展奠定了基础，例如 <strong><a href="https://github.com/joshuaclayton/blueprint-css" target="_blank" rel="noopener">Blueprint CSS</a></strong> 和 <strong><a href="https://github.com/nathansmith/960-Grid-System" target="_blank" rel="noopener">960 Grid System</a></strong>。</p>
<ul>
<li><strong>Blueprint CSS</strong>（2007 年）：是早期极具影响力的 CSS 框架之一，它通过定义通用样式和布局规范来提高开发效率。Blueprint CSS 的出现意味着开发者可以依赖一套统一的标准，而不必重复发明轮子，从而提高了代码的可读性和维护性。</li>
<li><strong>960 Grid System</strong>（2008 年）：引入基于 960 像素宽度的网格布局系统，为开发者提供标准化的页面布局方法。这个系统在当时极大地简化了页面布局的工作，使得开发者可以快速创建一致性强的响应式页面。</li>
</ul>
<p>Bootstrap 于 <strong>2011 年</strong> 由 Twitter 的开发者 Mark Otto 和 Jacob Thornton 发布，其结合了现代化的响应式布局理念和组件化风格，迅速成为广泛应用的 CSS 框架。Bootstrap 的成功在于它将响应式网格布局、样式和组件整合到了一起，为开发者提供了一种“一站式”的前端开发解决方案。Bootstrap 引入了大量的预定义样式和 UI 组件，极大地降低了开发复杂性，尤其是在构建跨浏览器兼容的用户界面时，Bootstrap 的贡献功不可没。</p>
<p>Bootstrap 的出现标志着前端开发进入了一个新的时代，使得开发者能够高效地实现页面布局。然而，Bootstrap 的预定义样式也逐渐显现出其局限性——页面设计趋于一致，缺乏个性化表达。这种标准化设计虽然提升了效率，但也导致了许多网站的“千篇一律”现象，限制了创意的发挥。随着前端领域需求的多样化，开发者开始寻求更加灵活和高度可定制化的解决方案，一场新的变革正在酝酿之中。</p>
<h2 id="从-CSS-预处理器到-UI-组件库的兴起"><a href="#从-CSS-预处理器到-UI-组件库的兴起" class="headerlink" title="从 CSS 预处理器到 UI 组件库的兴起"></a>从 CSS 预处理器到 UI 组件库的兴起</h2><p>在 CSS 预处理器提升了样式管理的效率之后，<strong>UI 组件库</strong>随着在<a href="https://modern-web.dev/" target="_blank" rel="noopener">Modern Web</a>时代的全面到来应运而生。它们不仅提供了样式，还封装了交互逻辑与功能，使得前端开发更加模块化与高效。UI 组件库的出现将“预制组件”带入了前端开发的日常，为开发者提供了一整套标准化、可复用的组件，极大地减少了样式和功能的重复开发。以下几位重要的玩家在这一过程中发挥了关键作用：</p>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2024/10/15/Simplifying-Web-UI/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2021/08/13/Git-Guide/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/08/13/Git-Guide/" class="post-title-link" itemprop="url">Git 指北</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-08-13 17:33:01" itemprop="dateCreated datePublished" datetime="2021-08-13T17:33:01+08:00">2021-08-13</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-15 09:54:56" itemprop="dateModified" datetime="2024-10-15T09:54:56+08:00">2024-10-15</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Extract-and-Organize/" itemprop="url" rel="index"><span itemprop="name">Extract and Organize</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p>本指南暂不包含 <code>fetch</code> , <code>pull</code>, <code>push</code>, <code>clone</code> 等 Git 版本库操作和 <code>CI/CD</code> 工作流搭建等</p>
</blockquote>
<h2 id="一、版本规范："><a href="#一、版本规范：" class="headerlink" title="一、版本规范："></a>一、版本规范：</h2><p>结合 <a href="https://semver.org/" target="_blank" rel="noopener">semver</a> 语义化版本以及 <a href="http://en.wikipedia.org/wiki/Software_release_life_cycle" target="_blank" rel="noopener">software release life cycle</a> 软件发布生命周期两块概念，约定 <code>git tag</code> 标签规则</p>
<h3 id="格式命名"><a href="#格式命名" class="headerlink" title="格式命名"></a>格式命名</h3><h4 id="基础版本格式："><a href="#基础版本格式：" class="headerlink" title="基础版本格式："></a>基础版本格式：</h4><p> <code><主版本号>.<次版本号>.<修订版本号></code> 三位数字用 <code>.</code> 连接组成一个版本号，如 <code>1.0.0</code><br> 版本号数字递增规则：</p>
<ul>
<li><strong>主版本号</strong>：对代码进行了不向前兼容的修改</li>
<li><strong>次版本号</strong>：向前兼容的修改，只是新增了功能</li>
<li><strong>修订版本号</strong>：向前兼容的故障修复、需求细节变更<h4 id="细化版本格式："><a href="#细化版本格式：" class="headerlink" title="细化版本格式："></a>细化版本格式：</h4>在原来 <code>x.y.z</code> 基础版本号后面添加<code>软件生命周期</code>作为先行版本号，以及添加<code>附加信息（编译信息、时间戳、序号等）</code>来进一步细化控制版本</li>
<li><strong>先行版本号</strong>：表示在正式版之前发布的版本，并非稳定而且可能无法满足预期的兼容性需求，格式是标注在修订版之后，先加上一个连接号<code>-</code>, 再加上一连串以句点分隔的标识符来修饰, 。范例：<code>1.0.0-alpha.1</code>、<code>1.0.0-rc.22</code>、<code>1.0.0-beta.33</code> …<blockquote>
<p>常见的先行版本</p>
<ul>
<li><code>alpha</code>: 内测版本，通常提测至测试部</li>
<li><code>beta</code>: 公测版本，通常可以面向用户全量或者灰度发布</li>
<li><code>rc</code>: 即 <code>Release candiate</code>，正式版本的候选版本，用作预发布<br>注：这些版本的发布可能需要团队的工作流程以及部署环境的隔离去支撑</li>
</ul>
</blockquote>
</li>
<li><strong>版本编译信息</strong>: 可以在修订版或先行版本号之后，先加上一个加号再加上一连串以句点分隔的标识符来修饰。范例：<code>1.0.0+jested</code>、<code>1.0.0-alpha+001</code>、<code>1.0.0-rc+20130313144700</code>、<code>1.0.0-beta+exp.sha.5114f85</code>、<code>1.0.0-next+0</code>…</li>
</ul>
<h3 id="创建标签"><a href="#创建标签" class="headerlink" title="创建标签"></a>创建标签</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 创建</span></span><br><span class="line">$ git tag -a <span class="string">"x.y.z-alpha+timestamp"</span> -m <span class="string">"summary..."</span></span><br><span class="line"><span class="comment"># 推送</span></span><br><span class="line">$ git push --tags</span><br></pre></td></tr></table></figure>
<h3 id="常用命令行"><a href="#常用命令行" class="headerlink" title="常用命令行:"></a>常用命令行:</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># < xxx > just means variable</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># List tags</span></span><br><span class="line">$ git tag</span><br><span class="line"></span><br><span class="line"><span class="comment"># Show details of the tag</span></span><br><span class="line">$ git show <TAG Name></span><br><span class="line"></span><br><span class="line"><span class="comment"># Add tag to newest commit</span></span><br><span class="line">$ git tag <TAG Name></span><br><span class="line"></span><br><span class="line"><span class="comment"># Add tag to specified commit</span></span><br><span class="line">$ git tag <TAG Name> <Commit Hash ID></span><br><span class="line"></span><br><span class="line"><span class="comment"># remove tag (local)</span></span><br><span class="line">$ git tag -d <TAG Name></span><br><span class="line"></span><br><span class="line"><span class="comment"># remove tag (remote)</span></span><br><span class="line">$ git push <Host Name> :refs/tags/<TAG Name></span><br><span class="line">$ git push <Host Name> :<TAG Name></span><br><span class="line">$ git push --delete <Host Name> <TAG Name></span><br><span class="line">$ git push -d <Host Name> <TAG Name></span><br><span class="line"></span><br><span class="line"><span class="comment"># Push specified tag to remote</span></span><br><span class="line">$ git push <Host Name> <TAG Name></span><br><span class="line"></span><br><span class="line"><span class="comment"># Push all tags to remote</span></span><br><span class="line">$ git push <Host Name> --tags</span><br><span class="line"></span><br><span class="line"><span class="comment"># Fetch all tags from remote</span></span><br><span class="line">$ git fetch --tags</span><br><span class="line"></span><br><span class="line"><span class="comment"># Create a new branch from the TAG</span></span><br><span class="line">$ git checkout -b <New Branch Name> <TAG Name></span><br></pre></td></tr></table></figure>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2021/08/13/Git-Guide/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2020/11/29/Hello-State/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/11/29/Hello-State/" class="post-title-link" itemprop="url">Hello State</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-11-29 16:30:07" itemprop="dateCreated datePublished" datetime="2020-11-29T16:30:07+08:00">2020-11-29</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-15 11:25:09" itemprop="dateModified" datetime="2024-10-15T11:25:09+08:00">2024-10-15</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Chat-Aimlessly/" itemprop="url" rel="index"><span itemprop="name">Chat Aimlessly</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><strong><em>TL;DR</em></strong></p>
<p>主导着当今世界前端技术发展的两家公司依然是 Google, Facebook；<br>目前前端的”三大框架“：Google 「Angular」 ，Facebook 「React」，而「Vue」也不完全算是是“自立门户”，也是吸收并借鉴了前者的优秀思想并进一步融合。</p>
<p>而 “三大框架” ，哪怕自身只是一个 View Library, 无一列外也都离不开 MV<em> 的设计模式，在此设计模式下开发，就绕不开至关重要的的概念：<strong>状态管理</strong>，笔者也一如既往固执己见地认为，整个状态管理的过程其实就是贯彻 MV</em> 对 Model、View 、 Controller/View Model 三者分层管理具体实施的过程，从而尽可能地保证 View 层的单薄，保证 Controller 的逻辑“C位”， 保证 Model 的数据中心，自始至终将应用的可维护性控制在一个较好的水平。</p>
<p>今天借 「State Management」 题发挥，基于团队目前项目所采用的技术框架 Vue, 来聊一聊状态管理。</p>
<h1 id="Intro"><a href="#Intro" class="headerlink" title="Intro"></a>Intro</h1><p>Vue 框架也是深受 <code>MVVM</code>（model, view, view-model) 优秀的编程模型规范的启发,</p>
<img src="/2020/11/29/Hello-State/mvvm.jpg" title="This is mvvm an image">
<p>同时结合了<strong>组件化</strong>的先进理念，自然而然地驱使开发者将整个WEB应用抽象分离到一个一个组件的颗粒度， 当一个应用不断被组件化抽象，小到一个按钮，大到一个页面，每个组件本身就是一个个独立的 <code>vm</code> 单元。</p>
<img src="/2020/11/29/Hello-State/components.png" title="This is components an image">
<p>在 <a href="https://cn.vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener">SFC (single-file components)</a> 单文件组件的开发范式下，每个 <code>*.vue</code> 文件就是一个 <code>vm</code> ， <code><template>...</template></code> 可以理解为 <code>vm</code> 中的 <code>v</code> ；而 <code><style><style></code> 可以理解为 <code>vm</code> 中的 <code>m</code>的样式控制部分，<code><script></script></code> 可以理解为 <code>vm</code>中的 <code>m</code>的逻辑和数据部分, 另外框架底层实现了一个 <code>MVVM</code> 模型中的“绑定器” ，通过开发者对每个视图模型的声明式编程来驱动程序的视图更新。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// *.vue</span></span><br><span class="line">vm</span><br><span class="line">├── v <span class="comment">// view</span></span><br><span class="line">│ └── template</span><br><span class="line">└── m <span class="comment">// model</span></span><br><span class="line"> ├── style</span><br><span class="line"> └── script</span><br><span class="line"> ├── data</span><br><span class="line"> │ ├── data(){}</span><br><span class="line"> │ └── computed:{}</span><br><span class="line"> └── logic</span><br><span class="line"> ├── lifecycle-hooks <span class="comment">// created,...</span></span><br><span class="line"> ├── watch:{}</span><br><span class="line"> └── methods{}</span><br><span class="line"><span class="comment">// 这种“奇怪的结构“思维，源于笔者入门编程时，深受 `MVC`（model, view, controller）编程模型启蒙式的“洗脑”，应用程序分层的思维早已根深蒂固</span></span><br></pre></td></tr></table></figure></p>
<p>如此，开发者管理维护单个组件（<code>vm</code> 实例）本身，确实可以做到非常高效、清晰，<br>但是随着应用迭代，不知不觉，整个应用也变成了庞大的 “vm” 集合， 相隔层级较深的组件与组件之间可能形成了较长的通信路径。</p>
<p>而 <code>Vue</code> 本身内置的数据流管理方案有限， <code>props</code>(其实本质就像一个函数定义的参数), <code>event emit</code> 等其实在复杂场景发挥有限，不适合长路径的通信，无法支撑组织管理整个”前端应用“的状态，虽然又不是不能用，但是要追求合理可维护性则显的捉襟见肘。</p>
<p>另外，在整个前端应用生命周期下，数据既可能来源服务端接口通信，有可能来源于用户的交互操作，还有可能来源与组件之间的通信变更等，依托”绑定器“，不同流向的数据不断双向交织，并且如“化学反应”般不断产生“次生”数据，随着应用逐渐壮大的同时，形成的一张极其庞大的数据“网”笼罩着前端开发者，应用也变得越来越难以维护，开发者顿时失去了 MMVM 分层模式带来的舒适的开发体验，前端应用似乎也迎来了生命周期的”软件危机“，变的危如累卵，应用的故障将在任何时候任何地方变的一触即发。</p>
<p>如何再次贯彻 MV* 的模式思想？是否有办法再次将整个前端应用如”上帝视角“般的分层？前端开发者如何再次破局，突破瓶颈，拯救”软件危机“？</p>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2020/11/29/Hello-State/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2020/04/08/Automatically-Disable-Touchpad-When-External-Mouse-Is-Connected-Ubuntu/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/04/08/Automatically-Disable-Touchpad-When-External-Mouse-Is-Connected-Ubuntu/" class="post-title-link" itemprop="url">Automatically Disable Touchpad When External Mouse Is Connected (Ubuntu)</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-04-08 15:34:47" itemprop="dateCreated datePublished" datetime="2020-04-08T15:34:47+08:00">2020-04-08</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-14 18:47:04" itemprop="dateModified" datetime="2024-10-14T18:47:04+08:00">2024-10-14</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Learn-A-Bit/" itemprop="url" rel="index"><span itemprop="name">Learn A Bit</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p>When I want to set <code>Touchpad</code> to automatically switch the “disabled” or “enabled” according to whether an external mouse is currently connected, but I failed to find the settings that can be achieved in <code>Settings</code> > <code>Devices</code> > <code>Mouse & Touchpad</code></p>
</blockquote>
<p>Found a high-quality answer from awesome guy <strong><em>Jacob Vlijm</em></strong> : <a href="https://askubuntu.com/a/787434/957585" target="_blank" rel="noopener">Reference</a></p>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2020/04/08/Automatically-Disable-Touchpad-When-External-Mouse-Is-Connected-Ubuntu/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2020/03/09/setup-HTTPS(SSL)-on-local-development-environment/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/03/09/setup-HTTPS(SSL)-on-local-development-environment/" class="post-title-link" itemprop="url">setup HTTPS(SSL) on local development environment (Ubuntu)</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-03-09 14:29:47" itemprop="dateCreated datePublished" datetime="2020-03-09T14:29:47+08:00">2020-03-09</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-15 09:50:46" itemprop="dateModified" datetime="2024-10-15T09:50:46+08:00">2024-10-15</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Learn-A-Bit/" itemprop="url" rel="index"><span itemprop="name">Learn A Bit</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="Edit-hosts-file"><a href="#Edit-hosts-file" class="headerlink" title="Edit hosts file"></a>Edit <code>hosts</code> file</h1><p>location: <code>/etc/hosts</code></p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"># e.g:</span></span><br><span class="line"><span class="meta"># add a local domain</span></span><br><span class="line"><span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span> xllily.com</span><br></pre></td></tr></table></figure>
<h1 id="Install-nginx"><a href="#Install-nginx" class="headerlink" title="Install nginx"></a>Install nginx</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">apt-get update</span><br><span class="line">apt-get install nginx</span><br><span class="line"></span><br><span class="line"><span class="comment"># create folder 'ssl' for subsequent use</span></span><br><span class="line"><span class="built_in">cd</span> /etc/nginx</span><br><span class="line">mkdir ssl</span><br></pre></td></tr></table></figure>
<p><strong>Control:</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">nginx -s [ stop | quit | reopen | reload ]</span><br><span class="line"></span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"></span><br><span class="line">sudo systemctl [ stop | start | restart | reload | <span class="built_in">disable</span> ] nginx</span><br></pre></td></tr></table></figure>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2020/03/09/setup-HTTPS(SSL)-on-local-development-environment/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2020/02/19/Hello-Uni-App/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/02/19/Hello-Uni-App/" class="post-title-link" itemprop="url">Hello uni-app</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-02-19 09:16:55" itemprop="dateCreated datePublished" datetime="2020-02-19T09:16:55+08:00">2020-02-19</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-15 09:55:58" itemprop="dateModified" datetime="2024-10-15T09:55:58+08:00">2024-10-15</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Extract-and-Organize/" itemprop="url" rel="index"><span itemprop="name">Extract and Organize</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<blockquote>
<p>最后更新于 <code>2020-2-20</code>, 信息出入请以 <a href="https://uniapp.dcloud.io/" target="_blank" rel="noopener">uni-app official document</a> 为准<br>为了保证信息有效性, 大量使用了文字链接关联官方文档的相关内容</p>
</blockquote>
<img src="/2020/02/19/Hello-Uni-App/front-cover.png" title="This is front-cover an image">
<p>(<strong><em> 图片源 <a href="https://uniapp.dcloud.io/" target="_blank" rel="noopener">uni-app official document</a> </em></strong>)</p>
<p>开局一张图，内容开始编。</p>
<p>近期接手维护一个基于 <a href="https://uniapp.dcloud.io/" target="_blank" rel="noopener">uni-app</a> 框架开发的项目，故笔墨伺候，简单做下功课。</p>
<p>以下内容对于未听说过或者未使用过 <code>uni-app</code>的前端“熟练工”相对比较友好些，内容有误，敬请指正。</p>
<p><code>uni-app</code> 是一个使用 <code>Vue.js</code> 开发全平台(<code>App</code>,<code>小程序</code>,<code>Web/H5</code>)前端应用的框架, 由”为开发者而生的” <a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a> 成员及 <a href="https://www.html5plus.org/" target="_blank" rel="noopener">HTML5 中国产业联盟</a>的发起单位，数字天堂(北京)网络技术有限公司(<a href="https://www.dcloud.io/" target="_blank" rel="noopener">DCloud</a>)出品。</p>
<blockquote>
<p><code>uni</code>，<a href="https://uniapp.dcloud.io/history" target="_blank" rel="noopener">读</a> <code>you ni</code>，是统一的意思.<br><code>app</code> 当指“应用（软件）”时，按 <code>Google</code> 翻译以及 <code>Apple</code> 官方读音, 读<code>/æp/</code>，而非 <code>/eɪ̯.pʰiː.pʰiː/</code></p>
</blockquote>
<p>已知全貌，准予置评。 🙈🙈🙈</p>
<p>开始吧…</p>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2020/02/19/Hello-Uni-App/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2017/02/28/Stop-the-occupied-port-by-cmd-on-windows-OS/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2017/02/28/Stop-the-occupied-port-by-cmd-on-windows-OS/" class="post-title-link" itemprop="url">Stop the occupied port by cmd on windows OS</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2017-02-28 15:30:07" itemprop="dateCreated datePublished" datetime="2017-02-28T15:30:07+08:00">2017-02-28</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-14 18:47:04" itemprop="dateModified" datetime="2024-10-14T18:47:04+08:00">2024-10-14</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Learn-A-Bit/" itemprop="url" rel="index"><span itemprop="name">Learn A Bit</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="List-corresponding-ports-and-PIDs-of-all-the-network-connections"><a href="#List-corresponding-ports-and-PIDs-of-all-the-network-connections" class="headerlink" title="List corresponding ports and PIDs of all the network connections"></a>List corresponding ports and PIDs of all the network connections</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">netstat -ano</span><br></pre></td></tr></table></figure>
<h3 id="Show-the-network-connections-on-the-occupied-port"><a href="#Show-the-network-connections-on-the-occupied-port" class="headerlink" title="Show the network connections on the occupied port"></a>Show the network connections on the occupied port</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">netstat -ano|<span class="built_in">find</span> "the occupied port number"</span><br></pre></td></tr></table></figure>
<h3 id="Stop-the-network-connections-by-corresponding-PID-number-of-the-occupied-port"><a href="#Stop-the-network-connections-by-corresponding-PID-number-of-the-occupied-port" class="headerlink" title="Stop the network connections by corresponding PID number of the occupied port"></a>Stop the network connections by corresponding PID number of the occupied port</h3><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">taskkill</span> /F /PID [the corresponding PID number]</span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="https://xllily.github.io/2017/02/27/Hello-Hexo/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.jpg">
<meta itemprop="name" content="「λ」xllily">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Just Notes">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2017/02/27/Hello-Hexo/" class="post-title-link" itemprop="url">Hello Hexo</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2017-02-27 15:30:07" itemprop="dateCreated datePublished" datetime="2017-02-27T15:30:07+08:00">2017-02-27</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2024-10-14 18:47:04" itemprop="dateModified" datetime="2024-10-14T18:47:04+08:00">2024-10-14</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">In</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Extract-and-Organize/" itemprop="url" rel="index"><span itemprop="name">Extract and Organize</span></a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="Create-blog"><a href="#Create-blog" class="headerlink" title="Create blog"></a>Create blog</h1><h2 id="Pre-requirements"><a href="#Pre-requirements" class="headerlink" title="Pre-requirements"></a>Pre-requirements</h2><ul>
<li><a href="https://nodejs.org/" target="_blank" rel="noopener">Node.js</a> Recommend v12.4.0 and install via <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener">nvm</a></li>
<li><a href="https://git-scm.com/" target="_blank" rel="noopener">Git</a></li>
</ul>
<h2 id="The-blog-framework-used-is-Hexo"><a href="#The-blog-framework-used-is-Hexo" class="headerlink" title="The blog framework used is Hexo"></a>The blog framework used is <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a></h2><ul>
<li>A fast, simple & powerful blog framework!</li>
<li>Powered by Node.js</li>
</ul>
<h2 id="The-remote-site-used-is-Github-Pages"><a href="#The-remote-site-used-is-Github-Pages" class="headerlink" title="The remote site used is Github Pages"></a>The remote site used is <a href="https://pages.github.com/" target="_blank" rel="noopener">Github Pages</a></h2>
<!--noindex-->
<div class="post-button">
<a class="btn" href="/2017/02/27/Hello-Hexo/#more" rel="contents">
Read more »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<script>
window.addEventListener('tabs:register', () => {
let { activeClass } = CONFIG.comments;
if (CONFIG.comments.storage) {
activeClass = localStorage.getItem('comments_active') || activeClass;
}
if (activeClass) {
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
if (activeTab) {
activeTab.click();
}
}
});
if (CONFIG.comments.storage) {
window.addEventListener('tabs:click', event => {
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
let commentClass = event.target.classList[1];
localStorage.setItem('comments_active', commentClass);
});
}
</script>
</div>
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
Table of Contents
</li>
<li class="sidebar-nav-overview">
Overview
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image" alt="「λ」xllily"
src="/images/avatar.jpg">
<p class="site-author-name" itemprop="name">「λ」xllily</p>
<div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">posts</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/">
<span class="site-state-item-count">3</span>
<span class="site-state-item-name">categories</span></a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">23</span>
<span class="site-state-item-name">tags</span></a>
</div>
</nav>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/xllily" title="GitHub → https://github.com/xllily" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
<span class="links-of-author-item">
<a href="mailto:[email protected]" title="E-Mail → mailto:[email protected]" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
</span>
</div>
<div class="cc-license motion-element" itemprop="license">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
</div>
</div>
</div>
</aside>