-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
123 lines (58 loc) · 81.2 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>留在南京</title>
<link href="/2019/08/18/stay-in-nanjing/"/>
<url>/2019/08/18/stay-in-nanjing/</url>
<content type="html"><![CDATA[<p>今天忽然发现我的刷牙杯子居然用了八年之久了，是我刚去南昌上学的时候买的，跟着我，从南昌到北京，吕梁，最后来到了南京……这个杯子虽然见证了我这八年的生活历程，但用了这么久了，也该换一换了，不能太寒酸了，此时不换，更待何时！</p><p><img src="/2019/08/18/stay-in-nanjing/my-cup.jpg" alt="我的旧杯子" title="我的旧杯子"></p><p>转念一想，我来南京已经一年了，经历了不少事，也差不多习惯这边的生活了。</p><p>虽然我在南京举目无亲，没有亲人，也没有朋友，更没钱没房，是一个不折不扣的三无青年，但我当初毅然决然地来到了这里，而且把户口也迁过来了。</p><p>一个人生活惯了，在哪儿都是一样的生活，所以我来之前并没有什么特别的考虑，只是觉得这个地方不错。</p><p>留在南京吧！</p><p><img src="/2019/08/18/stay-in-nanjing/nanjing-1.jpg" alt="南京玄武湖" title="南京玄武湖"></p><p><img src="/2019/08/18/stay-in-nanjing/nanjing-2.jpg" alt="南京紫峰大厦" title="南京紫峰大厦"></p><p><img src="/2019/08/18/stay-in-nanjing/i-am-li.jpg" alt="这就是我" title="这就是我"></p><blockquote><p>分享刘莱斯的单曲《留在南京》: <a href="http://music.163.com/song/483836565/">http://music.163.com/song/483836565/</a> (来自@网易云音乐)</p></blockquote>]]></content>
<tags>
<tag> 个人日记 </tag>
<tag> 南京 </tag>
</tags>
</entry>
<entry>
<title>家乡的小学被拆掉了</title>
<link href="/2019/05/07/primary-school-in-my-hometown/"/>
<url>/2019/05/07/primary-school-in-my-hometown/</url>
<content type="html"><![CDATA[<p>最近几天，听家里人说，村里搞拆迁，学校院子里的那九孔窑洞被拆掉了。村里的小学搁置了好几年了，院子里虽说很久没人住了，现在突然拆掉了，自己还是有点不舍。</p><p>我的童年是在这里度过的，回想起自己曾经在这所学校的那段时光，感触良多。</p><p>这所小小的学校办了好多个年头了，历经了风雨沧桑，承载着沉甸甸的历史，孕育了我们村一代又一代的人。我们村大部分人都是在这里上的小学，我们家四兄妹也是从这儿出来的。我1999年入学的时候，学校里有30几个同学，到我妹妹他们那一班之后，一度支离破碎，最后只剩下2人，但仍然坚持了好长时间。</p><p>学校前后也换了好几批老师，中间还装修过一次，装修那次正好是我小学史上经历过的一次最隆重的六一儿童节。那次六一我们学校的所有同学都去邻村表演节目了，好几个村庄的小学生都聚在了一起，办了一个特别热闹的大party。出村的时候我们是扭着秧歌去的，我和李云堂因为扭的太有特色，老师让我们扮了一对老头子和老太婆，我爷爷还特此为我制了一杆道具烟枪，秧歌队前排同学举的画板上的剪纸图案-狮子戏球，是学校的老师请我妈剪的。所以，这一次六一儿童节对我来说是意义重大。还记得那一次，我们年级表演的节目叫《成长在社会主义花园里》，6个人跳了一个小舞蹈。节目表演完后我作为全村唯一获奖的男生在舞台上领了2张“三好学生”的奖状，我还亲自给我们的村长系上了红领巾，这对我来说是至高的荣耀，因为全村只有2名同学获此殊荣，一男一女。那次六一是我外婆作为家长陪我去的，因为太过热闹，加上天气很热，最后我还中暑了。</p><p>我在这所小学毕业已经十几年了，现在伴随着国家城镇化的步伐这所学校也退出了历史的舞台，但小时候我在这里上学时的许多情景仍然历历在目。</p><p>再见了，我的母校！</p><p><img src="/2019/05/07/primary-school-in-my-hometown/my-school.jpg" alt="My School" title="我的母校"></p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29722424&auto=1&height=66"></iframe>]]></content>
<tags>
<tag> 个人日记 </tag>
</tags>
</entry>
<entry>
<title>我家的那只猫</title>
<link href="/2019/01/26/my-cat-in-my-hometown/"/>
<url>/2019/01/26/my-cat-in-my-hometown/</url>
<content type="html"><![CDATA[<p>快过年了，马上就要回家了，我想起了我家的那只猫。</p><p>2018年年初的时候，我从北京辞职回到在山西农村的家里，开始复习备战我谋划已久的考研计划，中途因为给眼睛做了个手术，花费太大，缺钱而不得不放弃考研，9月份的时候我离开家来到了南京。</p><p>考研复习这段时间陪伴我一起度过的除了老妈外还有我家的一只猫，这只猫到现在只有一周岁大，我在家复习的时候经常睡在我的腿上，我们没给它起正式的名字，平时就叫它喵喵，它是一只非常勤快而且本领超强的猫，除了经常能抓到老鼠外，麻雀、野山鸡、鸽子等也常是它的盘中餐。我离开家的时候喵喵刚好生下3只小喵，坦白说，真的有点不舍得离开，我是看着它长大的，也是陪它一起玩大的。</p><p>前段时间听老妈说喵喵晚上出去执行任务的时候因为天气寒冷先后冻掉了两只耳朵，它不幸的遭遇让我感到怜悯，同时也激励了我自己。这跟我们人是一样的，越是能力强的人，越要承担更大的风险，越要得到自己想要的，越要付出更多，生活就是这样，如果生活很容易，对努力的人太不公平。仔细一想，对喵喵来说也没什么遗憾的了，它虽然付出了这么多，但也得到了自己想要的，现在它的3只小喵也都可以自食其力了，它也可以功成身退了。</p><p>细想自己这么多年来，几乎没有做成什么，考研失败，工作也没做好，钱也没挣到。像我家的猫一样，我必须要做出一些勇敢而孤独的决定，找到自己想要的生活。接下来的五年时间内，我将着重于读书、写作、软件开发以及吉他这4个方向的学习，2019年我也给自己定了几个重要的任务，希望能够达到预期目标：</p><pre><code>1. 读书（20本+）2. 写作（20篇+）3. 开发（掌握Java高级工程师必备的基础知识，提高项目经验、架构能力、应用能力等硬技能）4. 吉他（掌握《音乐人吉他课》这本书的内容）</code></pre><p>离过年还有一周的时间，我也买了1月30号回吕梁的火车票，这次回家过年，除了与家人团聚外，我还想回去看看我家的那只猫。</p><p><img src="/2019/01/26/my-cat-in-my-hometown/my-cat.jpg" alt="My Cat"></p><p><img src="/2019/01/26/my-cat-in-my-hometown/my-cat-0.jpg" alt="My Cat"></p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29812165&auto=1&height=66"></iframe>]]></content>
<tags>
<tag> 个人日记 </tag>
</tags>
</entry>
<entry>
<title>jQuery 插件开发</title>
<link href="/2017/09/26/jquery-plugin-development/"/>
<url>/2017/09/26/jquery-plugin-development/</url>
<content type="html"><![CDATA[<blockquote><p>本文转载自互联网</p></blockquote><p>jQuery 插件的开发包括两种：一种是类级别的插件开发，即给 jQuery 添加新的全局函数，相当于给 jQuery 类本身添加方法。jQuery 的全局函数就是属于 jQuery 命名空间的函数。另一种是对象级别的插件开发，即给 jQuery 对象添加方法。下面就两种函数的开发做详细的说明。</p><h2 id="类级别的插件开发"><a href="#类级别的插件开发" class="headerlink" title="类级别的插件开发"></a>类级别的插件开发</h2><p>类级别的插件开发最直接的理解就是给 jQuery 类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于 jQuery 的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：</p><h3 id="添加一个新的全局函数"><a href="#添加一个新的全局函数" class="headerlink" title="添加一个新的全局函数"></a>添加一个新的全局函数</h3><p>添加一个全局函数，只需如下定义：</p><figure class="highlight javascript"><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">jQuery.<span class="property">foo</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This is a test. This is only a test.'</span>); </span><br><span class="line">};</span><br></pre></td></tr></table></figure><h3 id="添加多个全局函数"><a href="#添加多个全局函数" class="headerlink" title="添加多个全局函数"></a>添加多个全局函数</h3><p>添加多个全局函数，可采用如下定义：</p><figure class="highlight javascript"><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">jQuery.<span class="property">foo</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This is a test. This is only a test.'</span>);</span><br><span class="line">};</span><br><span class="line">jQuery.<span class="property">bar</span> = <span class="keyword">function</span>(<span class="params">param</span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This function takes a parameter, which is "'</span> + param + <span class="string">'".'</span>);</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>调用时和一个函数的一样的: <code>jQuery.foo();</code> <code>jQuery.bar();</code> 或者 <code>$.foo();</code> <code>$.bar('bar');</code></p><h3 id="使用-jQuery-extend-object"><a href="#使用-jQuery-extend-object" class="headerlink" title="使用 jQuery.extend(object)"></a>使用 jQuery.extend(object)</h3><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">jQuery.<span class="title function_">extend</span>({</span><br><span class="line"> <span class="attr">foo</span>: <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This is a test. This is only a test.'</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">bar</span>: <span class="keyword">function</span>(<span class="params">param</span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This function takes a parameter, which is "'</span></span><br><span class="line"> + param +<span class="string">'".'</span>);</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="使用命名空间"><a href="#使用命名空间" class="headerlink" title="使用命名空间"></a>使用命名空间</h3><p>虽然在 jQuery 命名空间中，禁止使用了大量的 JavaScript 函数名和变量名。但是仍然不可避免某些函数或变量名将于其他 jQuery 插件冲突，因此习惯上将一些方法封装到另一个自定义的命名空间。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">jQuery.<span class="property">myPlugin</span> = {</span><br><span class="line"> <span class="attr">foo</span>:<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This is a test. This is only a test.'</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">bar</span>: <span class="keyword">function</span>(<span class="params">param</span>) {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">'This function takes a parameter, which is "'</span></span><br><span class="line"> + param +<span class="string">'".'</span>);</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>采用命名空间的函数仍然是全局函数，调用时采用的方法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$.myPlugin.<span class="title function_">foo</span>(); </span><br><span class="line">$.myPlugin.<span class="title function_">bar</span>(<span class="string">'baz'</span>);</span><br></pre></td></tr></table></figure><p>通过这个技巧（使用独立的插件名），可以避免命名空间内函数的冲突。</p><h2 id="对象级别的插件开发"><a href="#对象级别的插件开发" class="headerlink" title="对象级别的插件开发"></a>对象级别的插件开发</h2><p>对象级别的插件开发需要如下的两种形式：</p><p>形式 1：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span>(<span class="params">$</span>){ </span><br><span class="line"> $.fn.<span class="title function_">extend</span>({ </span><br><span class="line"> <span class="attr">pluginName</span>:<span class="keyword">function</span>(<span class="params">opt,callback</span>){ </span><br><span class="line"> <span class="comment">// Our plugin implementation code goes here. </span></span><br><span class="line"> } </span><br><span class="line"> }) </span><br><span class="line">})(jQuery);</span><br></pre></td></tr></table></figure><p>形式 2：</p><figure class="highlight javascript"><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">(<span class="keyword">function</span>(<span class="params">$</span>) {</span><br><span class="line"> $.fn.<span class="property">pluginName</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// Our plugin implementation code goes here.</span></span><br><span class="line"> };</span><br><span class="line">})(jQuery);</span><br></pre></td></tr></table></figure><p>上面定义了一个 jQuery 函数，形参是$，函数定义完成之后，把 jQuery 这个实参传递进去，立即调用执行。这样的好处是，我们在写 jQuery 插件时，也可以使用$这个别名，而不会与 prototype 引起冲突。</p><h3 id="在-jQuery-名称空间下申明一个名字"><a href="#在-jQuery-名称空间下申明一个名字" class="headerlink" title="在 jQuery 名称空间下申明一个名字"></a>在 jQuery 名称空间下申明一个名字</h3><p>这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如：<code>$.fn.doSomething()</code> 和 <code>$.fn.undoSomething()</code>），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为<code>highlight</code></p><figure class="highlight javascript"><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">$.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// Our plugin implementation code goes here.</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>我们的插件通过这样被调用：<code>$('#myDiv').highlight();</code></p><p>但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是 JavaScript 中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明<code>highlight</code>为 jQuery 的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在<code>highlight</code>函数中被声明属性。稍后继续。</p><h3 id="接受-options-参数以控制插件的行为"><a href="#接受-options-参数以控制插件的行为" class="headerlink" title="接受 options 参数以控制插件的行为"></a>接受 options 参数以控制插件的行为</h3><p>让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个 options 对象传递给插件函数。例如： </p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// plugin definition</span></span><br><span class="line">$.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="keyword">var</span> defaults = {</span><br><span class="line"> <span class="attr">foreground</span>: <span class="string">'red'</span>,</span><br><span class="line"> <span class="attr">background</span>: <span class="string">'yellow'</span></span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// Extend our default options with those provided.</span></span><br><span class="line"> <span class="keyword">var</span> opts = $.<span class="title function_">extend</span>(defaults, options);</span><br><span class="line"> <span class="comment">// Our plugin implementation code goes here.</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>我们的插件可以这样被调用：</p><figure class="highlight javascript"><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="string">'#myDiv'</span>).<span class="title function_">highlight</span>({</span><br><span class="line"> <span class="attr">foreground</span>: <span class="string">'blue'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="暴露插件的默认设置"><a href="#暴露插件的默认设置" class="headerlink" title="暴露插件的默认设置"></a>暴露插件的默认设置</h3><p>我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// plugin definition</span></span><br><span class="line">$.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="comment">// Extend our default options with those provided.</span></span><br><span class="line"> <span class="comment">// Note that the first arg to extend is an empty object -</span></span><br><span class="line"> <span class="comment">// this is to keep from overriding our "defaults" object.</span></span><br><span class="line"> <span class="keyword">var</span> opts = $.<span class="title function_">extend</span>({}, $.fn.<span class="property">highlight</span>.<span class="property">defaults</span>, options);</span><br><span class="line"> <span class="comment">// Our plugin implementation code goes here.</span></span><br><span class="line">};</span><br><span class="line"><span class="comment">// plugin defaults - added as a property on our plugin function</span></span><br><span class="line">$.fn.<span class="property">highlight</span>.<span class="property">defaults</span> = {</span><br><span class="line"> <span class="attr">foreground</span>: <span class="string">'red'</span>,</span><br><span class="line"> <span class="attr">background</span>: <span class="string">'yellow'</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>现在使用者可以包含像这样的一行在他们的脚本里：</p><figure class="highlight javascript"><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">//这个只需要调用一次，且不一定要在 ready 块中调用</span></span><br><span class="line">$.fn.<span class="property">highlight</span>.<span class="property">defaults</span>.<span class="property">foreground</span> = <span class="string">'blue'</span>;</span><br><span class="line">接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色： </span><br><span class="line">$(<span class="string">'#myDiv'</span>).<span class="title function_">highlight</span>();</span><br></pre></td></tr></table></figure><p>如你所见，我们可以写一行代码在插件的默认前景色。而且我们仍然在需要的时候可以有选择的覆盖这些新的默认值：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 覆盖插件缺省的背景颜色</span></span><br><span class="line">$.fn.<span class="property">highlight</span>.<span class="property">defaults</span>.<span class="property">foreground</span> = <span class="string">'blue'</span>;</span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="comment">// 使用一个新的缺省设置调用插件</span></span><br><span class="line">$(<span class="string">'.highlightDiv'</span>).<span class="title function_">highlight</span>();</span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="comment">// 通过传递配置参数给插件方法来覆盖缺省设置</span></span><br><span class="line">$(<span class="string">'#green'</span>).<span class="title function_">highlight</span>({</span><br><span class="line"> <span class="attr">foreground</span>: <span class="string">'green'</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="适当的暴露一些函数"><a href="#适当的暴露一些函数" class="headerlink" title="适当的暴露一些函数"></a>适当的暴露一些函数</h3><p>这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫<code>format</code>的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的 format 方法的实现部分在 hiligth 函数下面。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// plugin definition</span></span><br><span class="line">$.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="comment">// iterate and reformat each matched element</span></span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">each</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> $this = $(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="keyword">var</span> markup = $this.<span class="title function_">html</span>();</span><br><span class="line"> <span class="comment">// call our format function</span></span><br><span class="line"> markup = $.fn.<span class="property">highlight</span>.<span class="title function_">format</span>(markup);</span><br><span class="line"> $this.<span class="title function_">html</span>(markup);</span><br><span class="line"> });</span><br><span class="line">};</span><br><span class="line"><span class="comment">// define our format function</span></span><br><span class="line">$.fn.<span class="property">highlight</span>.<span class="property">format</span> = <span class="keyword">function</span>(<span class="params">txt</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<strong>'</span> + txt + <span class="string">'</strong>'</span>;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>很容易地支持 options 对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效地暴露 format 函数进而让它能被重新定义。通过这技巧，使其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。 </p><p>考虑到这篇文章中我们建立的无用的插件，你也许想知道究竟什么时候这些会有用。一个真实的例子是 Cycle 插件，这个 Cycle 插件是一个滑动显示插件，他能支持许多内部变换作用到滚动、滑动、渐变、消失等。但是实际上，没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。Cycle 插件对使用者暴露<code>transitions</code>对象，使他们添加自己变换定义。插件中定义就像这样：</p><figure class="highlight javascript"><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">$.fn.<span class="property">cycle</span>.<span class="property">transitions</span> = { </span><br><span class="line"> <span class="comment">// ... </span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>这个技巧使其他人能定义和传递变换设置到 Cycle 插件。</p><h3 id="保持私有函数的私有性"><a href="#保持私有函数的私有性" class="headerlink" title="保持私有函数的私有性"></a>保持私有函数的私有性</h3><p>这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个<code>debug</code>函数到我们的插件中。这个 debug 函数将为输出被选中的元素格式到 firebug 控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span>(<span class="params">$</span>) {</span><br><span class="line"> <span class="comment">// plugin definition</span></span><br><span class="line"> $.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="title function_">debug</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// private function for debugging</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">debug</span>(<span class="params">$obj</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">console</span> && <span class="variable language_">window</span>.<span class="property">console</span>.<span class="property">log</span>)</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">console</span>.<span class="title function_">log</span>(<span class="string">'highlight selection count: '</span> + $obj.<span class="title function_">size</span>());</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">})(jQuery);</span><br></pre></td></tr></table></figure><p>我们的<code>debug</code>方法不能从外部闭包进入，因此对于我们的实现是私有的。</p><h3 id="支持-Metadata-插件"><a href="#支持-Metadata-插件" class="headerlink" title="支持 Metadata 插件"></a>支持 Metadata 插件</h3><p>在你正在写的插件的基础上，添加对 Metadata 插件的支持能使他更强大。个人来说，我喜欢这个 Metadata 插件，因为它让你使用不多的<code>markup</code>覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">$.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> <span class="comment">// build main options before element iteration</span></span><br><span class="line"> <span class="keyword">var</span> opts = $.<span class="title function_">extend</span>({}, $.fn.<span class="property">highlight</span>.<span class="property">defaults</span>, options);</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">each</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> $this = $(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="comment">// build element specific options</span></span><br><span class="line"> <span class="keyword">var</span> o = $.meta ? $.<span class="title function_">extend</span>({}, opts, $this.<span class="title function_">data</span>()) : opts;</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>这些变动行做了一些事情：它是测试 Metadata 插件是否被安装，如果它被安装了，它能扩展我们的 options 对象通过抽取元数据这行作为最后一个参数添加到<code>JQuery.extend</code>，那么它将会覆盖任何其它选项设置。现在我们能从<code>markup</code>处驱动行为，如果我们选择了<code>markup</code>：</p><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- markup --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"highlight { background: 'red', foreground: 'white' }"</span>></span></span><br><span class="line">Have a nice day!</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"highlight { foreground: 'orange' }"</span>></span></span><br><span class="line">Have a nice day!</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"highlight { background: 'green' }"</span>></span></span><br><span class="line">Have a nice day!</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>现在我们能高亮这些 div 仅使用一行脚本：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'.highlight'</span>).<span class="title function_">highlight</span>();</span><br></pre></td></tr></table></figure><h3 id="整合"><a href="#整合" class="headerlink" title="整合"></a>整合</h3><p>下面使我们的例子完成后的代码：</p><figure class="highlight javascript"><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><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个闭包</span></span><br><span class="line">(<span class="keyword">function</span>(<span class="params">$</span>) {</span><br><span class="line"> <span class="comment">// 插件的定义</span></span><br><span class="line"> $.fn.<span class="property">highlight</span> = <span class="keyword">function</span>(<span class="params">options</span>) {</span><br><span class="line"> <span class="title function_">debug</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="comment">// build main options before element iteration</span></span><br><span class="line"> <span class="keyword">var</span> opts = $.<span class="title function_">extend</span>({}, $.fn.<span class="property">highlight</span>.<span class="property">defaults</span>, options);</span><br><span class="line"> <span class="comment">// iterate and reformat each matched element</span></span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">each</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> $this = $(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="comment">// build element specific options</span></span><br><span class="line"> <span class="keyword">var</span> o = $.meta ? $.<span class="title function_">extend</span>({}, opts, $this.<span class="title function_">data</span>()) : opts;</span><br><span class="line"> <span class="comment">// update element styles</span></span><br><span class="line"> $this.<span class="title function_">css</span>({</span><br><span class="line"> <span class="attr">backgroundColor</span>: o.<span class="property">background</span>,</span><br><span class="line"> <span class="attr">color</span>: o.<span class="property">foreground</span></span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">var</span> markup = $this.<span class="title function_">html</span>();</span><br><span class="line"> <span class="comment">// call our format function</span></span><br><span class="line"> markup = $.fn.<span class="property">highlight</span>.<span class="title function_">format</span>(markup);</span><br><span class="line"> $this.<span class="title function_">html</span>(markup);</span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// 私有函数：debugging</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">debug</span>(<span class="params">$obj</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">console</span> && <span class="variable language_">window</span>.<span class="property">console</span>.<span class="property">log</span>)</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">console</span>.<span class="title function_">log</span>(<span class="string">'highlight selection count: '</span> + $obj.<span class="title function_">size</span>());</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// 定义暴露 format 函数</span></span><br><span class="line"> $.fn.<span class="property">highlight</span>.<span class="property">format</span> = <span class="keyword">function</span>(<span class="params">txt</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<strong>'</span> + txt + <span class="string">'</strong>'</span>;</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// 插件的 defaults</span></span><br><span class="line"> $.fn.<span class="property">highlight</span>.<span class="property">defaults</span> = {</span><br><span class="line"> <span class="attr">foreground</span>: <span class="string">'red'</span>,</span><br><span class="line"> <span class="attr">background</span>: <span class="string">'yellow'</span></span><br><span class="line"> };</span><br><span class="line"> <span class="comment">// 闭包结束</span></span><br><span class="line">})(jQuery);</span><br></pre></td></tr></table></figure><p>这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>jQuery 为开发插件提拱了两个方法，分别是：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">jQuery.<span class="property">fn</span>.<span class="title function_">extend</span>(object); <span class="comment">// 给 jQuery 对象添加方法。</span></span><br><span class="line">jQuery.<span class="title function_">extend</span>(object); <span class="comment">// 为扩展 jQuery 类本身.为类添加新的方法</span></span><br></pre></td></tr></table></figure><h3 id="jQuery-fn-extend-object"><a href="#jQuery-fn-extend-object" class="headerlink" title="jQuery.fn.extend(object)"></a>jQuery.fn.extend(object)</h3><p>fn 是什么东西呢。查看 jQuery 代码，就不难发现：</p><figure class="highlight javascript"><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">jQuery.<span class="property">fn</span> = jQuery.<span class="property"><span class="keyword">prototype</span></span> = { </span><br><span class="line"> <span class="attr">init</span>: <span class="keyword">function</span>(<span class="params"> selector, context </span>) { <span class="comment">//...</span></span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>原来<code>jQuery.fn = jQuery.prototype</code>。对 prototype 肯定不会陌生啦，虽然 JavaScript 没有明确的类的概念，但是用类来理解它，会更方便。jQuery 便是一个封装得非常好的类，比如我们用语句<br>$(“#btn1”) 会生成一个 jQuery 类的实例。</p><p><code>jQuery.fn.extend(object)</code>对 jQuery.prototype 进行扩展，就是为 jQuery 类添加“成员函数”。jQuery 类的实例可以使用这个“成员函数”。比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便 alert 当前编辑框里的内容。可以这么做：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line">$.fn.<span class="title function_">extend</span>({</span><br><span class="line"> <span class="attr">alertWhileClick</span>: <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> $(<span class="variable language_">this</span>).<span class="title function_">click</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">alert</span>($(<span class="variable language_">this</span>).<span class="title function_">val</span>());</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 页面上为：<input id="input1" type="text"/></span></span><br><span class="line">$(<span class="string">"#input1"</span>).<span class="title function_">alertWhileClick</span>();</span><br></pre></td></tr></table></figure><p><code>$("#input1")</code>为一个 jQuery 实例，当它调用成员方法<code>alertWhileClick</code>后，便实现了扩展，每次被点击时它会先弹出目前编辑框里的内容。</p><h3 id="jQuery-extend-object"><a href="#jQuery-extend-object" class="headerlink" title="jQuery.extend(object)"></a>jQuery.extend(object)</h3><p>为 jQuery 类添加添加类方法，可以理解为添加静态方法。如：</p><figure class="highlight javascript"><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">$.<span class="title function_">extend</span>({</span><br><span class="line"> <span class="attr">add</span>:<span class="keyword">function</span>(<span class="params">a, b</span>){</span><br><span class="line"> <span class="keyword">return</span> a + b;</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>便为 jQuery 添加一个为 add 的“静态方法”，之后便可以在引入 jQuery 的地方，使用这个方法了：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">add</span>(<span class="number">3</span>, <span class="number">4</span>); <span class="comment">// return 7</span></span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> 开发者手册 </tag>
<tag> jQuery </tag>
</tags>
</entry>
<entry>
<title>使用 Hexo 搭建个人博客</title>
<link href="/2017/09/19/blogging-with-hexo/"/>
<url>/2017/09/19/blogging-with-hexo/</url>
<content type="html"><![CDATA[<p>一直想开个博客写几篇技术文章，因为写博客不仅能让自己更深入地理解某项技术，而且可以总结归纳一些我学到的知识点分享给别人，但总是犹豫在什么地方写博客，因为现在有很多比如 CSDN、博客园、简书等博客平台，很难选择，也都不是我喜欢的类型。后来看到我关注的一些大牛都自行搭建了个人博客，所以就选了这种形式。因为自建博客权限比较高，可控性也高，博客的样式、布局都可以由自己来设定，最重要的是搭建过程包括发文章都使用命令来操作，更像是一个极客的风格。于是我在网上查了些资料，折腾了大半天，终于使用 <a href="https://hexo.io/">Hexo</a> + <a href="https://pages.github.com/">Github Pages</a> 搭起了自己的博客 <a href="https://lihtdev.github.io/">lihtdev</a>。相对于使用专业的已经成型的博客平台，自行搭建博客可能有点折腾，下面详细记录下我的搭建过程。</p><h2 id="什么是-Hexo"><a href="#什么是-Hexo" class="headerlink" title="什么是 Hexo ?"></a>什么是 Hexo ?</h2><p><a href="https://hexo.io/">Hexo</a> 是个静态博客框架。使用 <a href="https://daringfireball.net/projects/markdown">Markdown</a> 撰写好文章，Hexo 会转成静态网页部署到 <a href="https://pages.github.com/">Github Pages</a>。</p><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><h3 id="安装-Node-js-和-Git"><a href="#安装-Node-js-和-Git" class="headerlink" title="安装 Node.js 和 Git"></a>安装 Node.js 和 Git</h3><p>在安装 Hexo 之前，首先要安装 <a href="https://nodejs.org/en/">Node.js</a> 和 <a href="https://git-scm.com/">Git</a>， Node.js 和 Git 的安装比较简单，请自行查看官方文档，这里不再赘述。</p><p>安装好 Node.js 和 Git 后，用 <a href="https://npmjs.org/">npm</a> 安装 Hexo ， npm 是 Node.js 的 package manager，会随 Node.js 一同安装。由于墙的关系，建议 npm 换成国内的源，比如<a href="http://npm.taobao.org/">淘宝 NPM 镜像</a>。推荐安装 <a href="https://github.com/Pana/nrm">nrm</a> (NPM registry manager)，可以在不同的 registry 之间快速切换：</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></pre></td><td class="code"><pre><span class="line">$ npm install -g nrm <span class="comment"># 安装 nrm</span></span><br><span class="line">$ nrm <span class="built_in">ls</span> <span class="comment"># registry 列表</span></span><br><span class="line">$ nrm use taobao <span class="comment"># 将 registry 切换为 taobao</span></span><br></pre></td></tr></table></figure><h3 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h3><p>接着使用 npm 安装 Hexo：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span><br></pre></td></tr></table></figure><p><em>说明：本文所有命令 Linux/Mac 在终端（terminal）输入，Windows 在 CMD 输入。</em></p><h2 id="创建-Hexo-项目"><a href="#创建-Hexo-项目" class="headerlink" title="创建 Hexo 项目"></a>创建 Hexo 项目</h2><p>安装好 Hexo 后，在本地新建个文件夹作为 Hexo 项目文件夹，名称随意，我的叫 <code>lihtdev.github.io</code> ，执行下列命令，Hexo 会在指定文件夹 <code>lihtdev.github.io</code> 中新建所需要的文件：</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></pre></td><td class="code"><pre><span class="line">$ hexo init lihtdev.github.io <span class="comment"># 初始化 Hexo 项目</span></span><br><span class="line">$ <span class="built_in">cd</span> lihtdev.github.io</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure><p>初始化后，会在文件夹 <code>lihtdev.github.io</code> 里生成以下目录结构，这就是你的 Workspace：</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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml <span class="comment"># 配置文件</span></span><br><span class="line">├── package.json <span class="comment"># 项目所需模块项目的配置信息</span></span><br><span class="line">├── scaffolds <span class="comment"># 用命令生成文章等的模板</span></span><br><span class="line">├── <span class="built_in">source</span> <span class="comment"># 源文件夹，这里放置网站内容</span></span><br><span class="line">| ├── _drafts <span class="comment"># 放置草稿 markdown 文件</span></span><br><span class="line">| └── _posts <span class="comment"># 放置博文 markdown 文件</span></span><br><span class="line">└── themes <span class="comment"># 主题文件夹，Hexo 通过将网站内容与主题相结合来生成一个静态网站</span></span><br></pre></td></tr></table></figure><p>在 <code>_config.yml</code> 配置文件中填写你的网站的 <code>title</code>、<code>description</code>、<code>author</code> 。更多配置请参考 <a href="https://hexo.io/docs/configuration.html">Hexo Configuration</a>。</p><p>接着执行下列命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate <span class="comment"># 生成静态文件</span></span><br><span class="line">$ hexo server <span class="comment"># 启动本地服务</span></span><br></pre></td></tr></table></figure><p>到这里本地的博客已经有了初步的原型，先访问 <a href="http://localhost:4000/">http://localhost:4000/</a> 查看下效果，后面继续。</p><p>Hexo 的命令可以通过 <code>hexo help</code> 和 <code>hexo help [command]</code> 查看帮助，更多请参考 <a href="https://hexo.io/docs/commands.html">Hexo Commands</a>。</p><h2 id="Hexo-主题"><a href="#Hexo-主题" class="headerlink" title="Hexo 主题"></a>Hexo 主题</h2><p>Hexo 的默认主题不怎么好看，可以在 <a href="https://github.com/hexojs/hexo/wiki/Themes">Hexo Themes</a> 选一款自己喜欢的主题，我用的是 <a href="https://github.com/probberechts/cactus-dark">Cactus Dark</a>。</p><p>在 Github 下载主题文件，将文件整个目录 <code>cactus-dark</code> 复制到本地项目的 <code>themes</code> 目录下，然后修改配置文件 <code>_config.yml</code>：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">cactus-dark</span> <span class="comment"># 主题文件夹的名称</span></span><br></pre></td></tr></table></figure><p>主题相关的配置在 <code>themes/cactus-dark/_config.yml</code> 里面，可以设置链接、添加菜单等，根据自己的需要配置。</p><h2 id="Hexo-插件"><a href="#Hexo-插件" class="headerlink" title="Hexo 插件"></a>Hexo 插件</h2><h3 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h3><p><del>Hexo 默认支持 <a href="http://disqus.com/">DISQUS</a> 的评论功能，只要在 <a href="http://disqus.com/">disqus.com</a> 注册获得 Disqus Comments Shortname，然后在 <code>_config.yml</code> 里配置：</del></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqus_shortname:</span> <span class="string">your</span> <span class="string">shortname</span> <span class="comment"># Disqus Comments Shortname</span></span><br></pre></td></tr></table></figure><p><strong>以上插件已不建议使用，推荐使用 <a href="https://gitalk.github.io/">Gitalk</a> 2021/07/25</strong></p><h3 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h3><p>在 <code>_config.yml</code> 里启用以下配置项：</p><figure class="highlight plaintext"><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">post_asset_folder: true</span><br><span class="line">marked:</span><br><span class="line"> prependRoot: true</span><br><span class="line"> postAsset: true</span><br></pre></td></tr></table></figure><p>启用后，资源图片将会被自动解析为其对应文章的路径。 例如： image.jpg 位置为 <code>/2020/01/02/foo/image.jpg</code>，这表示它是 <code>/2020/01/02/foo/</code> 文章的一张资源图片， <code> </code>将会被解析为 <code><img src="/2020/01/02/foo/image.jpg"> </code>。</p><p>用 Hexo 新建文章时会在文章同目录下 <code>source/_posts</code> 生成一个和文章同名的文件夹，文章相关的所有图片放这个文件夹里就行，例如：</p><figure class="highlight plaintext"><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">MacGesture2-Publish</span><br><span class="line">├── apppicker.jpg</span><br><span class="line">├── logo.jpg</span><br><span class="line">└── rules.jpg</span><br><span class="line">MacGesture2-Publish.md</span><br></pre></td></tr></table></figure><p>在文章中插入图片时链接只要写图片名称就可以，比如要插入 <code>logo.jpg</code> ，只要写成 <code></code>。</p><h3 id="RSS"><a href="#RSS" class="headerlink" title="RSS"></a>RSS</h3><p><a href="https://github.com/hexojs/hexo-generator-feed">hexo-generator-feed</a> 可生成 <code>atom.xml</code> 文件供订阅使用，安装命令是：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure><p>在 <code>_config.yml</code> 中配置以下内容：</p><figure class="highlight yaml"><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"><span class="attr">feed:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">atom</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">atom.xml</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">20</span></span><br><span class="line"> <span class="attr">hub:</span></span><br><span class="line"> <span class="attr">content:</span></span><br></pre></td></tr></table></figure><p>然后将 <code>/atom.xml</code> 链接添加到 <code>themes/cactus-dark/_config.yml</code> 中设置RSS的位置。</p><h3 id="Sitemap"><a href="#Sitemap" class="headerlink" title="Sitemap"></a>Sitemap</h3><p>Sitemap 可方便搜索引擎抓取网页，安装 <a href="https://github.com/hexojs/hexo-generator-sitemap">hexo-generator-sitemap</a> 即可自动生成 sitemap.xml 文件：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-generator-sitemap --save</span><br></pre></td></tr></table></figure><h3 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h3><p>由于要使用 Git 部署 Hexo，所以需要安装 <a href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><h3 id="站内搜索"><a href="#站内搜索" class="headerlink" title="站内搜索"></a>站内搜索</h3><p>首先安装 <a href="https://www.npmjs.com/package/hexo-generator-search">hexo-generate-search</a> 插件，它会生成一个搜索索引文件：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-generator-search --save</span><br></pre></td></tr></table></figure><p>接下来，创建一个页面来显示搜索引擎：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page search</span><br></pre></td></tr></table></figure><p>并将 <code>search: true</code> 放入 <a href="https://hexo.io/zh-cn/docs/front-matter.html">Front-matter</a> ，也就是 <code>.md</code> 文件最上方以 <code>---</code> 分隔的区域。</p><p>最后编辑 <code>_config.yml</code> 并在导航菜单上添加一个搜索链接。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">nav:</span><br><span class="line"> search: /search/</span><br></pre></td></tr></table></figure><p>更多 Hexo 插件请参考 <a href="https://hexo.io/plugins/">Hexo Plugins</a></p><h2 id="发布到-Github"><a href="#发布到-Github" class="headerlink" title="发布到 Github"></a>发布到 Github</h2><p>至此本地的博客已经搭建起来了，下一步就是要发布到 Github。</p><p>发布到 Github 前首先要配置 Git 用户信息和在 Github 上加入 SSH key ，如果之前在 Github 上提交过项目或者配置过这两项则可以忽略。</p><h3 id="Git-用户信息"><a href="#Git-用户信息" class="headerlink" title="Git 用户信息"></a>Git 用户信息</h3><p>首先要配置的是你个人的用户名称和电子邮件地址。这两条配置很重要，每次 Git 提交时都会引用这两条信息，说明是谁提交了更新，所以会随更新内容一起被永久纳入历史记录：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git config --global user.name lihaitao</span><br><span class="line">$ git config --global user.email [email protected]</span><br></pre></td></tr></table></figure><p>如果用了 <code>--global</code> 选项，那么更改的配置文件就是位于你用户主目录下的那个，以后你所有的项目都会默认使用这里配置的用户信息。如果要在某个特定的项目中使用其他名字或者电邮，只要去掉 <code>--global</code> 选项重新配置即可，新的设定保存在当前项目的 <code>.git/config</code> 文件里。</p><h3 id="在-Github-添加-SSH-key"><a href="#在-Github-添加-SSH-key" class="headerlink" title="在 Github 添加 SSH key"></a>在 Github 添加 SSH key</h3><p>使用 SSH key 可以连接到 GitHub ，而无需在每次访问时提供用户名或密码，方便 Git 提交代码到 Github 。所以必须提供 SSH key 用于授权。生成 SSH key 的命令是（Linux/Mac 在终端输入，Windows 在 Git Bash 输入）：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa <span class="comment"># 指定 rsa 算法生成密钥</span></span><br></pre></td></tr></table></figure><p>接着连续三个回车键（不需要输入密码），然后就会生成两个文件 <code>id_rsa</code> 和 <code>id_rsa.pub</code> ，id_rsa 是密钥，id_rsa.pub 是公钥。这两个文件在 Linux/Mac 系统是在 <code>~/.ssh</code> 下，Windows 系统在 <code>C:/Users/username/.ssh</code> 下。</p><p>接下来要把 id_rsa.pub 的内容添加到 GitHub 上，这样你本地的 id_rsa 密钥跟 Github 上的 id_rsa.pub 公钥进行配对，授权成功才可以提交代码。</p><p>打开 Github 的 Setting 页面，点击左侧的 SSH and GPG keys：</p><p><img src="/2017/09/19/blogging-with-hexo/github-setting.png" alt="Github Setting"></p><p>然后点击页面右上角的 New SSH key 按钮：</p><p><img src="/2017/09/19/blogging-with-hexo/new-ssh-key.png" alt="New SSH key"></p><p>在 Key 那栏把 <code>id_rsa.pub</code> 文件里的内容复制粘贴进去就可以了，<code>Title</code> 不需要填写，点击 Add SSH key 按钮就 ok 了。</p><p>SSH key 添加成功后，输入 <code>ssh -T [email protected]</code> 进行测试，如果出现以下提示就证明添加成功了。</p><figure class="highlight plaintext"><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">$ ssh -T [email protected]</span><br><span class="line">Hi lihaitao! You've successfully authenticated, but GitHub does</span><br><span class="line">not provide shell access.</span><br></pre></td></tr></table></figure><h3 id="Github-Pages"><a href="#Github-Pages" class="headerlink" title="Github Pages"></a>Github Pages</h3><p>在 Github 上<a href="https://github.com/new">新建</a>一个名为 <code>username</code>.github.io 的 repository ， username 是你的 Github 账号，比如我的叫 lihtdev.github.io 。然后修改配置文件 <code>_config.yml</code> 里的以下内容：</p><figure class="highlight yaml"><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># url 就是刚才新建的 repository 的名称</span></span><br><span class="line"><span class="comment"># repo 是刚才新建的 repository 的 SSH url</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">https://lihtdev.github.io</span></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">[email protected]:lihtdev/lihtdev.github.io.git</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure><p>经过前面的更改主题、安装插件等一系列配置之后，静态文件需要重新生成：</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></pre></td><td class="code"><pre><span class="line">$ hexo clean <span class="comment"># 清除 public 文件夹中的静态文件</span></span><br><span class="line">$ hexo generate <span class="comment"># 生成静态文件</span></span><br><span class="line">$ hexo server <span class="comment"># 启动本地服务</span></span><br></pre></td></tr></table></figure><p>访问 <a href="http://localhost:4000/">http://localhost:4000/</a> 查看效果，确认页面无误后执行下列命令将静态文件发布到 Github:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>到这里博客就完全搭建起来了，访问 <a href="https://lihtdev.github.io/">https://lihtdev.github.io</a> 就可以看到博客了。</p><h2 id="写博客"><a href="#写博客" class="headerlink" title="写博客"></a>写博客</h2><p>正式发表博客前可以先打个草稿：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new draft <span class="string">"hello-world"</span> <span class="comment"># 新建标题为 hello-world 的草稿</span></span><br></pre></td></tr></table></figure><p>执行此命令后，会在 <code>source/_drafts</code> 目录下生成一个 <code>hello-world.md</code> 文件，然后用文本编辑器打开 <code>hello-world.md</code> 就可以编辑博文了，使用 <a href="https://daringfireball.net/projects/markdown">Markdown</a> 撰写。</p><p>新建草稿时标题建议使用英文单词之间加横杠的这种形式，例如 “hello-world” ，而不要使用中文，因为默认会使用文件名作为文章的 url，真正的标题可以在 <code>hello-world.md</code> 文件里面设置。</p><p>默认情况下，草稿不显示。可以在运行 Hexo 时添加 <code>--draft</code> 选项：</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></pre></td><td class="code"><pre><span class="line">$ hexo server --draft <span class="comment"># 启动服务并预览草稿</span></span><br><span class="line">$ hexo publish <span class="string">"hello-world"</span> <span class="comment"># 发布草稿，会把草稿移到 source/_posts 目录下</span></span><br><span class="line">$ hexo deploy --generate <span class="comment"># 生成静态文件并发布到 Github</span></span><br></pre></td></tr></table></figure><p>也可以不打草稿：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new post <span class="string">"hello-world"</span> <span class="comment"># 新建标题为 hellow-world 的博文</span></span><br></pre></td></tr></table></figure><p>这个命令会在 <code>source/_posts</code> 目录下生成一个 <code>hello-world.md</code> 文件，同样使用文本编辑器编辑这个文件。博文写完预览后直接发布到 Github：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server <span class="comment"># 启动服务预览博文</span></span><br><span class="line">$ hexo deploy --generate <span class="comment"># 生成静态文件并发布到 Github</span></span><br></pre></td></tr></table></figure><p>更多请参考 <a href="https://hexo.io/docs/writing.html">Hexo Writing</a>。</p><h2 id="源文件管理"><a href="#源文件管理" class="headerlink" title="源文件管理"></a>源文件管理</h2><p>如果要用另一台电脑写博客怎么办呢，这里介绍一种方法就是使用 Git 分支，创建两个分支，一个分支用来放博客的原始文件，另一个分支用来放生成的静态文件。</p><h3 id="提交源文件到分支"><a href="#提交源文件到分支" class="headerlink" title="提交源文件到分支"></a>提交源文件到分支</h3><p>先删除 <code>themes</code> 文件夹下的 <code>.git</code> 文件。然后在 <code>_config.yml</code> 中的 <code>deploy</code> 参数下设置 <code>branch: master</code> ，如果前面已经设置过就不用改了，这一步是为了确认将静态文件提交到 <code>master</code> 分支：</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></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repo: [email protected]:lihtdev/lihtdev.github.io.git</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure><p>接着在本地博客文件夹下依次执行下列命令：</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><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$ git init <span class="comment"># 初始化 Git 项目</span></span><br><span class="line">$ git checkout -b develop <span class="comment"># 新建并切换到 develop 分支</span></span><br><span class="line"><span class="comment"># 添加远程仓库 origin ，后面是你在 Github 上创建的 repository 的 url</span></span><br><span class="line">$ git remote add origin [email protected]:lihtdev/lihtdev.github.io.git</span><br><span class="line">$ git add . <span class="comment"># 将当前目录的所有文件加入暂存区</span></span><br><span class="line">$ git commit -m <span class="string">"提交说明"</span> <span class="comment"># 提交更新</span></span><br><span class="line">$ git push origin develop <span class="comment"># 推送到远程仓库 origin 的 develop 分支</span></span><br></pre></td></tr></table></figure><p>需要注意的是本地博客文件夹根目录下的 <code>.gitignore</code> 是 Hexo 自带的文件，也要提交到仓库，里面列的是要被 Git 忽略的文件，这些文件不需要纳入 Git 的管理。</p><p>这样就把本地博客项目提交到你的 Github 中 <code>lihtdev.github.io</code> 仓库的 <code>develop</code> 分支上了。然后将仓库的默认分支设置为 develop，因为 develop 分支需要手动管理。</p><p>在 Github 中打开 <code>lihtdev.github.io</code> 仓库的主页面，点击上面的 2 branches:</p><p><img src="/2017/09/19/blogging-with-hexo/lihtdev-github-io.png" alt="lihtdev.github.io"></p><p>然后点击页面右上角的 Change default branch 按钮:</p><p><img src="/2017/09/19/blogging-with-hexo/change-default-branch.png" alt="lihtdev.github.io"></p><p>然后按下图所示依次点击将 Default branch 设为 <code>develop</code>:</p><p><img src="/2017/09/19/blogging-with-hexo/switch-default-branch.png" alt="lihtdev.github.io"></p><p>每次更新完博客或者更改了源文件都要执行下列命令提交更新：</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></pre></td><td class="code"><pre><span class="line">$ git status <span class="comment"># 检查文件状态</span></span><br><span class="line">$ git add . <span class="comment"># 将当前目录的所有更新加入暂存区</span></span><br><span class="line">$ git commit -m <span class="string">"提交说明"</span> <span class="comment"># 提交更新</span></span><br><span class="line">$ git push origin develop <span class="comment"># 推送到远程仓库 origin 的 develop 分支</span></span><br></pre></td></tr></table></figure><h3 id="换台电脑写博客"><a href="#换台电脑写博客" class="headerlink" title="换台电脑写博客"></a>换台电脑写博客</h3><p>首先需要在新电脑上将远程仓库克隆下来：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git <span class="built_in">clone</span> [email protected]:lihtdev/lihtdev.github.io.git</span><br></pre></td></tr></table></figure><p>输入 <code>git branch</code> 确认一下当前分支是否为 develop 。然后安装 Node.js 和 Git 。接着执行以下命令安装 Hexo：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span><br></pre></td></tr></table></figure><p>装好 Hexo 后，进入 <code>lihtdev.github.io</code> 目录，安装所需要的 Hexo 插件：</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><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> lihtdev.github.io</span><br><span class="line">$ npm install</span><br><span class="line">$ npm install hexo-asset-image --save <span class="comment"># 图片管理</span></span><br><span class="line">$ npm install hexo-generator-feed --save <span class="comment"># RSS订阅</span></span><br><span class="line">$ npm install hexo-generator-sitemap --save <span class="comment"># 生成 sitemap.xml</span></span><br><span class="line">$ npm install hexo-deployer-git --save <span class="comment"># Git部署</span></span><br><span class="line">$ npm install hexo-generator-search --save <span class="comment"># 站内搜索</span></span><br></pre></td></tr></table></figure><p>按前面的步骤配置好 Git 用户信息和在 Github 上加入 SSH key 后新电脑的环境就搭建好了，就可以写博客了。</p>]]></content>
<tags>
<tag> 开发者手册 </tag>
<tag> Hexo </tag>
<tag> Github Pages </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/2017/09/08/hello-world/"/>
<url>/2017/09/08/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html">Deployment</a></p>]]></content>
</entry>
</search>