-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
898 lines (812 loc) · 83.6 KB
/
atom.xml
File metadata and controls
898 lines (812 loc) · 83.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Alimon's Blog]]></title>
<subtitle><![CDATA[业精于勤而荒于嬉,行成于思而毁于随]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://www.yangjian.me/"/>
<updated>2014-03-21T04:14:21.974Z</updated>
<id>http://www.yangjian.me/</id>
<author>
<name><![CDATA[YangJian]]></name>
<email><![CDATA[i@yangjian.me]]></email>
</author>
<generator uri="http://zespia.tw/hexo/">Hexo</generator>
<entry>
<title><![CDATA[浏览器中的Reflow和Reprint]]></title>
<link href="http://www.yangjian.me/learning/reflow-and-reprint-in-browsers/"/>
<id>http://www.yangjian.me/learning/reflow-and-reprint-in-browsers/</id>
<published>2014-03-19T16:00:00.000Z</published>
<updated>2014-03-21T02:06:30.000Z</updated>
<content type="html"><![CDATA[<h2 id="幕后故事">幕后故事</h2>
<p>要谈Reflow(重排)和Reprint(重绘)总是离不开浏览器解析网页的原理,可以先看下这篇文章:<a href="http://taligarsiel.com/Projects/howbrowserswork1.htm" target="_blank">《How browsers work》</a>(<a href="http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/" target="_blank">中文翻译版</a>,<a href="http://coolshell.cn/articles/9666.html" target="_blank">陈浩压缩版</a>)了解下浏览器在背后都做了些什么。</p>
<p><img src="/image/2014-03-20/layers.png" alt="浏览器的主要组件" title="浏览器的主要组件"></p>
<p>浏览器由很多组件构成,他们都有不同的分工,协同工作把网页渲染出来。其中呈现引擎(Webkit)和Javascript解释器(V8)是我们今天所关注的重点。呈现引擎会尽可能快的完成:把HTML解析为DOM树(同时解析CSS)→同时构造呈现树(Render tree)→布局(Layout)→绘制(Paint)。</p>
<p><img src="/image/2014-03-20/webkitflow.png" alt="Webkit主流程" title="Webkit主流程"></p>
<p>其中解析的算法是相当复杂的(尤其对于HTML,因为它的容错性很高),引擎会根据W3C的相关规定,在通过涉及词法分析、语法分析、自动生成解析器、编译等一系列高大上的东西后完成对DOM树的构建。呈现器知道如何通过很多规则和计算来进行布局并将自身及其子元素绘制出来。我们先暂停下,因为到这里有很多需要注意的地方:</p>
<ul>
<li>DOM树和呈现树显然不是一样的,呈现树是DOM树的可见部分,部分对应但非一一对应。例如:如果元素<code>display:none</code>它就不会被添加到呈现树中;类似<code>select</code>或是无效的HTML元素会有多个呈现器。浮动和绝对/固定定位的元素在呈现树中的位置和DOM树中的位置不同(脱离文档流)。node节点在呈现树中称为 frame(或是box) 。</li>
<li>解析器遇到<code><script></code>标记时立即解析并执行脚本。文档的解析将停止,直到脚本执行完毕。如果脚本是外部的,那么解析过程会停止,直到从网络同步抓取资源完成后再继续。可以将脚本标注为<code>defer</code>,这样它就不会停止文档解析,而是等到解析结束才执行。HTML5增加了<code>async</code>属性可将脚本标记为异步。</li>
<li>Firefox在样式表加载和解析的过程中,会禁止所有脚本。而对于Webkit而言,仅当脚本尝试访问的样式属性可能受尚未加载的样式表影响时,它才会禁止该脚本。</li>
<li>由于为DOM匹配样式的计算(Calculate Style,样式优先级等)非常复杂,CSS选择器应该尽可能的简单避免过多层叠。</li>
</ul>
<p>到目前为止呈现引擎已经完成了前两个步骤,接下来就是并不轻松的布局了。呈现器在创建完成并添加到呈现树时,并不包含位置和大小信息。计算这些值的过程称为布局(Layout)或称为重排(Reflow)。至此Reflow终于现身了。现代浏览器对重排的处理越来越机智,为避免对所有细小更改都进行整体布局,浏览器采用了一种“dirty 位”系统,它会尽可能的利用缓存来减少或用队列分批进行重排。布局分为全局布局(同步)和增量布局(异步),如果更改网页字体大小或是调整窗口大小都会触发全局布局,而类似插入DOM、请求某些样式信息等需要重新计算位置和大小的操作会触发增量布局。</p>
<p>最后进入绘制阶段,系统会遍历呈现树,并调用呈现器的<code>paint</code>方法,将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。绘制也同样分为全局绘制和增量绘制。系统很巧妙的将多个区域合并成一个。绘制的顺序为:轮廓→子代→边框→背景图片→背景颜色。当有类似颜色改变这样的操作发生后会触发重新绘制(Reprint),它的开销比起重排小很多,在发生变化时,浏览器会尽可能做出最小的响应。</p>
<p>下面是利用Firefox对维基百科页面渲染的可视化视频。</p>
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzI5MDg0OTA0" frameborder=0 allowfullscreen></iframe>
<h2 id="触发重排和重绘的操作">触发重排和重绘的操作</h2>
<p>在了解完浏览器渲染页面的原理后,我们很容易总结出几种可以触发重排的操作:</p>
<ul>
<li>修改网页字体大小</li>
<li>调整浏览器窗口或是滚动(正常滚动OK,比较有问题的是fixed定位或是有动画的元素)</li>
<li>获取元素的位置信息(offset||scroll||clientTop/Left/width/height)</li>
<li>对DOM进行增删改移动操作</li>
<li>修改CSS的某些样式(尺寸和位置,<code>display:none</code>触发重排,<code>visibility:hidden</code>触发重绘)</li>
</ul>
<h2 id="利用Chrome观察重排和重绘">利用Chrome观察重排和重绘</h2>
<p>Chrome中的DevTools可以很方便的观察重排和重绘。如果你对Chrome DevTools还不太熟悉可以参考<a href="https://developers.google.com/chrome-developer-tools/" target="_blank">Google官方文档</a>和<a href="http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles" target="_blank">这篇文章</a>进行了解。</p>
<p><img src="/image/2014-03-20/chromedevtools.png" alt="利用Chrome DevTools观察重排和重绘" title="利用Chrome DevTools观察重排和重绘"></p>
<h2 id="最小化重排和重绘">最小化重排和重绘</h2>
<p>重排和重绘在实际开发中不可避免,我们只能尽量减少重排和重绘的次数,降低浏览器渲染网页的开销,以此带来的性能提升在移动平台上效果显著。</p>
<ul>
<li>不要一条一条的修改CSS属性,最好是整体替换CSS类或重写DOM的<code>cssText</code>属性。</li>
<li>将多次DOM修改合并成一次。可以使用<code>documentFragment</code>对象缓存更改,或是复制你需要修改的node节点,修改完成后再替换掉原来的。也可以隐藏元素后再对其进行操作,最后把它显示出来。</li>
<li>考虑要修改的元素的层级以及改动它引起的重排面积,选择其中开销最小的方式。</li>
<li>不要频繁获取元素的位置属性,如果需要经常使用就用变量把它缓存下来。</li>
<li>为需要有动画效果的元素设置<code>position:absolute</code>。同时动画越平滑开销越大,需要在速度和平滑度上取得平滑。</li>
<li>保持DOM树正确/简洁,减少不必要的CSS规则和复杂的选择器(尤其是后代选择器)。</li>
<li>为页面中的图片显式的声明宽度和高度。</li>
<li>不要使用table布局。尽量不要动态更新table元素。</li>
<li>jQuery中如果为<code>append()</code>方法传入多个元素组成的数组时,jQuery可能会用到<code>documentFragment</code>,但是使用<code>$.each()</code>方法就不会用到<code>documentFragment</code>。</li>
</ul>
<p>例:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="comment">//修改CSS类名而不是逐条修改属性</span>
<span class="function"><span class="keyword">function</span> <span class="title">changeStyle</span><span class="params">(element,className)</span> {</span>
element.className = className;
}
<span class="comment">//借助DocumentFragment</span>
<span class="function"><span class="keyword">function</span> <span class="title">CreateFragments</span><span class="params">()</span>{</span>
<span class="keyword">var</span> fragment = document.createDocumentFragment();
<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i < <span class="number">10000</span>;i++){
<span class="keyword">var</span> tmpNode = document.createElement(<span class="string">"div"</span>);
tmpNode.innerHTML = <span class="string">"test"</span> + i;
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}
</pre></td></tr></table></figure>
<h2 id="参考资料">参考资料</h2>
<ol>
<li><a href="http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/" target="_blank">《浏览器的工作原理:新式网络浏览器幕后揭秘》</a></li>
<li><a href="http://coolshell.cn/articles/9666.html" target="_blank">《浏览器的渲染原理简介》</a></li>
<li><a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/" target="_blank">《Rendering: repaint, reflow/relayout, restyle》</a></li>
<li><a href="https://developers.google.com/speed/articles/reflow" target="_blank">《Minimizing browser reflow》</a></li>
<li><a href="http://book.douban.com/subject/4719162/" target="_blank">《高性能网站建设进阶指南》</a></li>
<li><a href="http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles" target="_blank">《使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能》</a></li>
</ol>
]]></content>
<category term="性能优化" scheme="http://www.yangjian.me/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/"/>
<category term="浏览器" scheme="http://www.yangjian.me/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/"/>
<category term="learning" scheme="http://www.yangjian.me/categories/learning/"/>
</entry>
<entry>
<title><![CDATA[Pacman主题介绍]]></title>
<link href="http://www.yangjian.me/workspace/introducing-pacman-theme/"/>
<id>http://www.yangjian.me/workspace/introducing-pacman-theme/</id>
<published>2014-01-08T14:25:03.000Z</published>
<updated>2014-02-05T03:30:16.000Z</updated>
<content type="html"><![CDATA[<h2 id="主题概括">主题概括</h2>
<p>Pacman是一款为<a href="http://hexo.io/" target="_blank">Hexo</a>打造的一款扁平化,有着响应式设计的主题。本站正是使用了该主题,同时你也可以访问<a href="http://yangjian.me/pacman" target="_blank">Demo</a>查看效果。主题源码托管在<a href="https://github.com/A-limon/pacman" target="_blank">Github</a>上,欢迎Fork。遇到任何问题或意见请发表<a href="https://github.com/A-limon/pacman/issues" target="_blank">issue</a>。</p>
<h2 id="安装指南">安装指南</h2>
<h3 id="安装">安装</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre><span class="variable">$ </span>git clone <span class="symbol">https:</span>/<span class="regexp">/github.com/</span><span class="constant">A</span>-limon/pacman.git themes/pacman
</pre></td></tr></table></figure>
<p><strong>Pacman需要安装Hexo 2.4.5 或以上版本</strong> 请先升级您的Hexo程序,再启用此主题。</p>
<h3 id="启用">启用</h3>
<p>修改你的博客根目录下的<code>config.yml</code>配置文件中的<code>theme</code>属性,将其设置为<code>pacman</code>。同时请设置<code>stylus</code>属性中的<code>compress</code>值为<code>true</code>。</p>
<h3 id="更新">更新</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre><span class="built_in">cd</span> themes/pacman
git pull
</pre></td></tr></table></figure>
<p><strong>请先备份你的<code>_config.yml</code> 文件后再升级</strong></p>
<h2 id="配置指南">配置指南</h2>
<p>Pacman主题提供了丰富的配置属性,配置文件<code>_config.yml</code>位于主题根目录下。配置文件中已经包含了详细的英文注释,所以下面就用中文进行说明。</p>
<h3 id="属性">属性</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre>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
</pre></td><td class="code"><pre><span class="preprocessor">##### Menu</span>
menu:
Home: /
Archives: /archives
<span class="preprocessor">#### Widgets</span>
widgets:
- category
- tag
- rss
<span class="preprocessor">#### RSS</span>
rss:
<span class="preprocessor">#### Image</span>
imglogo:
enable: <span class="literal">true</span>
src: /img/logo.svg
favicon: /img/favicon.ico
apple_icon: /img/pacman.jpg
<span class="preprocessor">#### Author Avatar Picture</span>
author_img_enable: <span class="literal">true</span>
dataURI: <span class="literal">false</span>
author_img_data:
author_img: /img/author.jpg
<span class="preprocessor">#### Font</span>
ShowCustomFont: <span class="literal">true</span>
<span class="preprocessor">#### Toc</span>
toc:
article: <span class="literal">true</span>
aside: <span class="literal">true</span>
<span class="preprocessor">#### Fancybox</span>
fancybox: <span class="literal">true</span>
<span class="preprocessor">#### Author information</span>
author:
google_plus:
intro_line1:
intro_line2:
weibo:
twitter:
github:
facebook:
tsina:
<span class="preprocessor">#### Comment</span>
duoshuo:
enable: <span class="literal">false</span>
short_name:
<span class="preprocessor">#### Share button</span>
jiathis:
enable: <span class="literal">false</span>
id:
tsina:
<span class="preprocessor">#### Analytics</span>
google_analytics:
enable: <span class="literal">false</span>
id:
site:
<span class="preprocessor">#### Custom Search</span>
google_cse:
enable: <span class="literal">false</span>
cx:
</pre></td></tr></table></figure>
<h3 id="说明">说明</h3>
<ul>
<li><p>menu 默认没有启用 <code>/tags</code> 和 <code>/categories</code> 页面,如果需要启用请在博客目录下的<code>source</code>文件夹中分别建立<code>tags</code> 和 <code>categories</code>文件夹每个文件夹中分别包含一个<code>index.md</code>文件。内容为:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>layout: tags (或categories)
<span class="header">title: tags (或categories)
---</span>
</pre></td></tr></table></figure>
<p>因为主题中已经内置了这两个页面的模板,所以他们会被正确的解析出来。</p>
</li>
<li>widgets: 提供了6种小工具。</li>
<li>rss: 请填写你博客的RSS地址。</li>
<li>imglogo: 建议启用图片logo,格式建议为<code>.svg</code>或<code>.png</code>格式。同时建议提供配套的favicon以及在苹果设备上的图标(背景不要透明)。</li>
<li>author_img_enable: 是否显示底部的作者头像。主题支持头像使用dataURI格式,若使用请修改<code>dataURI</code>的值为<code>true</code>并在下面的<code>author_img_data</code>后填上图片的值,确保它是<strong>一行而且被引号包住</strong>如果还是想用传统的<code>jpg</code>格式那么就把图片路径放在<code>author_img</code>后,同时把<code>dataURI</code>设置成<code>false</code>。</li>
<li>ShowCustomFont: 启用自定义字体,如果你有一定前端基础可以修改<code>font.styl</code>替换为你喜欢的字体。</li>
<li>toc: 是否启用在文章中或侧边栏中的目录功能。二者可以都为<code>true</code>或都为<code>false</code>。同时,如果你希望在特定的某一篇文章中关闭目录功能你可以在文章文件开头中的<code>front-matter</code>中加上一行<code>toc: false</code>。</li>
<li>fancybox: 默认关闭,如果你使用Hexo经常发表Gallery类型的文章,那么请设置为<code>true</code>(同时需要复制<code>fancybox.js</code>到你的博客目录下<code>scripts</code>文件夹中)。ps: 我很佩服用Hexo发表相册的文艺青年。</li>
<li>author: 作者信息,建议尽量填写完整。其中<code>tsina</code>是你的新浪微博ID,不同于用户名或微博主页地址。启用这个属性后,其他用户在微博上分享你文章的同时会自动@你。</li>
<li>duoshuo: <a href="http://duoshuo.com" target="_blank">多说</a>评论系统。在大陆地区更好用的评论系统,如果你想更换为disqus请参考默认主题后自行修改。</li>
<li>jiathis: <a href="http://www.jiathis.com/" target="_blank">加网</a>分享系统。默认关闭,因为主题已经内置了原生的分享功能。</li>
<li>google_analytics: Google Analytics追踪代码。请注意:<strong>*Google Analytics已经升级到了Universal Analytics。请先前往后台升级你的Google Analytics版本后再启用追踪代码 </strong> 更多信息请点击<a href="https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN" target="_blank">这里</a>了解。</li>
<li>google_cse: Google自定义搜索。如果开启自定义搜索需要先登录<a href="https://www.google.com/cse/" target="_blank">Google CSE</a>,配置好你的站点,并获得此自定义搜索的ID。此外你需要在博客目录下的<code>source</code>文件夹中建立<code>search</code>文件夹并包含一个<code>index.md</code>文件。内容为:<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>layout: search
<span class="header">title: search
---</span>
</pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Q&A">Q&A</h2>
<ul>
<li><strong>Q: 楼主我审美和你不同,我想换个颜色怎么办?</strong><br/><strong>A:</strong> 因为这次主题是使用<a href="http://learnboost.github.io/stylus/" target="_blank">Stylus</a>完全重写的,所以包括颜色在内的很多变量都可以在<code>variable.styl</code>文件中修改。</li>
<li><strong>Q: 为毛CSS有70kb?</strong><br/><strong>A:</strong> 其中有将近20多kb左右的作者头像(DataURI格式),还有一部分响应式代码,而且动画效果均使用CSS3而不是jQuery实现,这样流畅性可以在移动平台上得到一定程度的提升。上线前请压缩一下,也就60k左右,还可以接受。</li>
<li><strong>Q: 友情链接怎么添加?</strong><br/><strong>A:</strong> 友情链接请到主题目录下的<code>/layout/_widget/links.ejs</code>文件中自行添加。 </li>
<li><strong>Q: 代码高亮不给力啊老湿!</strong><br/><strong>A:</strong> 代码高亮使用Hexo内置的<a href="http://highlightjs.org" target="_blank">highlight.js</a>原来是在浏览器端渲染,这次是Hexo在生成静态页面的时候直接渲染好了。如果希望使用其他高亮插件可以关闭highlight.js后安装其他插件。</li>
<li><strong>Q: 老子原来使用<code><--! more --></code>分割的摘要怎么在首页中就剩下140个字了?</strong><br/><strong>A:</strong> 骚年,慧眼啊!是这样的:为了提高打开首页的速度故首页不加载文章图片,只加载文章摘要。因此我强烈建议大家在写文章的时候自己总结<code>description</code>并将其放在开头的<code>front-matter</code>中。如果没有会截取<code><--! more --></code>内容前的140个字,如果你连这个都懒得写,没关系,依旧为你截取文章内容的前140个字作为摘要。</li>
<li><strong>Q: 为什么目录跳转到指定章节不好使?</strong><br/><strong>A:</strong> <del>目前目录跳转仅在标题是以英文开头的文章中生效,至于什么时候支持中文,你可以等待Hexo更新或Pull Request。</del><br>更新:hexo 2.5.2版本已经修复了目录跳转问题。</li>
</ul>
]]></content>
<category term="hexo" scheme="http://www.yangjian.me/tags/hexo/"/>
<category term="stylus" scheme="http://www.yangjian.me/tags/stylus/"/>
<category term="workspace" scheme="http://www.yangjian.me/categories/workspace/"/>
</entry>
<entry>
<title><![CDATA[使用hexo搭建博客]]></title>
<link href="http://www.yangjian.me/workspace/building-blog-with-hexo/"/>
<id>http://www.yangjian.me/workspace/building-blog-with-hexo/</id>
<published>2013-05-25T16:00:00.000Z</published>
<updated>2014-01-19T13:21:17.000Z</updated>
<content type="html"><![CDATA[<p><a href="http://zespia.tw/hexo/" target="_blank">hexo</a>是由Node.js驱动的一款快速、简单且功能强大的博客框架。它和<a href="http://jekyllrb.com/" target="_blank">jekyll</a>相比,更快,更轻量。之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它。但是jekyll目前有不少缺点,包括生成速度尤其是文章多了以后的生成速度让人无法接受,默认引擎Redcarpet解析Markdown时对中文支持不好,而且在Windows上使用问题多多,之前被严重坑过,虽然有解决的办法但是实在是耗费精力。经过<a href="http://weibo.com/aries77devil" target="_blank">@AriesDevil</a>同学介绍,认识了hexo,这个来自台湾大学生的作品,蒙拜之情瞬间产生。<br>于是从Github Clone项目,在非常详细的<a href="http://zespia.tw/hexo/docs/" target="_blank">文档</a>帮助下马上就在本地跑起来博客了,速度飕飕的果不其然,V8引擎不是盖的,快赶上法拉利了。下面是具体的步骤和需要注意的事情。</p>
<h2 id="安装与配置">安装与配置</h2>
<h3 id="准备和迁移工作">准备和迁移工作</h3>
<p>需要先配置好Node.js环境,npm工具以及Git,之后的本地初始化请参考文档中的<a href="http://zespia.tw/hexo/docs/index.html" target="_blank">说明</a>,照着文档一步步做就行。 </p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre> npm install -g hexo
hexo init <span class="tag"><<span class="title">folder</span>></span>
</pre></td></tr></table></figure>
<p>全局设定文件储存于网站根目录下的<code>_config.yml</code>文件,根据你的需要配置站点名,固定链接等诸多设定。<br>如果你是从jekyll/Octopress/Wordpress迁移过来的,也很容易,顺着<a href="http://zespia.tw/hexo/docs/migration.html" target="_blank">这里</a>安装下插件。<strong>注意留意所有文件中,尤其是配置文件中的空格,缺少空格会报错。</strong></p>
<h3 id="安装插件和主题">安装插件和主题</h3>
<p>Hexo提供丰富的<a href="https://github.com/tommy351/hexo/wiki/Plugins" target="_blank">插件</a>以及<a href="https://github.com/tommy351/hexo/wiki/Themes" target="_blank">主题</a>。安装方法都是一样的。</p>
<ul>
<li><p>插件</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>$ npm install <plugin-<span class="property">name</span>> <span class="comment">--save</span>
</pre></td></tr></table></figure>
</li>
<li><p>主题</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>$ git clone <span class="tag"><<span class="title">repository</span>></span> themes/<span class="tag"><<span class="title">theme-name</span>></span>
</pre></td></tr></table></figure>
</li>
</ul>
<p>无论是插件还是主题在安装后都需要在根目录下<code>_config.yml</code>中修改<code>plugins</code>和<code>theme</code>的值以启用他们。</p>
<h2 id="使用与调试">使用与调试</h2>
<p>在本地如果需要预览或者调试你的博客,可以启动本地服务器:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>hexo <span class="keyword">server</span>
</pre></td></tr></table></figure>
<p>部署到Github前需要配置<code>_config.yml</code>文件。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="label">deploy:</span>
type: github
repository: git@github<span class="preprocessor">.com</span>:A-limon/a-limon<span class="preprocessor">.github</span><span class="preprocessor">.com</span><span class="preprocessor">.git</span>
branch: master
</pre></td></tr></table></figure>
<p>如果你是为一个项目制作网站,那么需要把<code>branch</code>设置为<code>gh-pages</code>。若要绑定自定义域名也可以参考<a href="http://zespia.tw/hexo/docs/deployment.html" target="_blank">Hexo</a>或<a href="http://pages.github.com/" target="_blank">Github Page</a>的帮助文档,制作一个<code>cname</code>文件。<br>之后执行下列指令即可完成部署,注意部署会覆盖掉你之前在版本库中存放的文件。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>hexo clean
hexo <span class="keyword">generate</span>
hexo deploy
</pre></td></tr></table></figure>
<p>或可加入 —generate 选项,在部署前自动生成文件。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre><span class="comment">hexo</span> <span class="comment">deploy</span> <span class="literal">-</span><span class="literal">-</span><span class="comment">generate</span>
</pre></td></tr></table></figure>
<p>其原理就是hexo在执行<code>hexo generate</code>时会在本地先把博客生成的一套静态站点放到<code>public</code>文件夹中,在执行<code>hexo deploy</code>时将其复制到<code>.deploy</code>文件夹中。Github的版本库通常建议同时附上README.md说明文件,但是hexo默认情况下会把所有md文件解析成html文件,所以即使你在线生成了README.md,它也会在你下一次部署时被删去。怎么解决呢?<br>在执行<code>hexo deploy</code>前把在本地写好的README.md文件复制到<code>.deploy</code>文件夹中,再去执行<code>hexo deploy</code>。</p>
<h2 id="注意事项">注意事项</h2>
<h3 id="关于摘要">关于摘要</h3>
<p>如果你之前使用过jekyll那么可能这一切都很熟悉。hexo的文章保存在<code>source/_post</code>目录下。在文档中插入<code><!--more--></code>就可以将文章分隔,more以上的部分会已摘要的形式显示,当查看全文时more以下的部分才会显示出来。也可以在Markdown文件中定义<code>description</code>。</p>
<h3 id="图片显示">图片显示</h3>
<p>同样放到<code>source</code>目中下。建议大家建立一个<code>image</code>文件夹,把文章中使用到的图片丢到这里来(当然可以按照你的习惯进行分类),之后在Markdown文件中按照这样的语法进行插入图片的操作。</p>
<script src="https://gist.github.com/8504808.js"></script>
<h3 id="自定义页面">自定义页面</h3>
<p>如果想建立一个简单的Page很容易,只需要在<code>source</code>下建立一个文件夹,如<code>page</code>。在这个目录下新建<code>index.md</code>:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre>title: Page
<span class="header">date: 2013-12-26 22:52:56
---</span>
This is a page test.
</pre></td></tr></table></figure>
<p>最后在你的主题目录下找到主题的配置文件<code>_config.yml</code>,在里面配置页面的路径即可。<br>so easy?那么如果我放一些不需要hexo帮我解析的HTML文件(比如404页面)呢?<br>在<code>source</code>下放入一个HTML文件,hexo还是会自作多情的用render帮你解析了。这个时候需要在html文件的头部加入:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre><span class="header">layout: false
--------</span>
</pre></td></tr></table></figure>
<p>好吧,我的静态页面比较多,不想在每个html页面头部加入layout定义。那你可以修改主题的<code>layout.ejs</code>文件。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><% <span class="keyword">if</span>(page.<span class="keyword">layout</span>==<span class="string">'page'</span>){ <span class="variable">%></span>
<% <span class="keyword">if</span>(page.<span class="keyword">source</span>.<span class="keyword">match</span>(/\.md<span class="variable">$/</span>)){ <span class="variable">%></span>
原来的内容
<% }<span class="keyword">else</span>{ <span class="variable">%></span>
<<span class="variable">%-</span> page.content <span class="variable">%></span>
<% } <span class="variable">%></span>
<% }<span class="keyword">else</span>{ <span class="variable">%></span>
原来的内容
<% } <span class="variable">%></span>
</pre></td></tr></table></figure>
<p>这样你放入<code>source</code>文件夹中的html页面就会被hexo忽略掉。</p>
<h3 id="实时预览">实时预览</h3>
<p>如今的Hexo已经可以自动监控文件修改,并为你自动更新。如果连刷新都懒得去按怎么办?<br>使用<a href="http://livereload.com/" target="_blank">livereload</a>。</p>
<blockquote>
<p>livereload不仅仅跨平台,而且是<a href="https://github.com/livereload/LiveReload" target="_blank">开源</a>的,可以使用<a href="http://hahack.com/codes/livereload-for-hexo/" target="_blank">npm</a>安装,同时提供包括自动编译Less、Stylus或集成Sublime Text等编辑器的<a href="https://github.com/livereload/livereload-plugins" target="_blank">插件</a>。神器在手妈妈再也不用担心我的F5键了。</p>
</blockquote>
<h3 id="其他Tips">其他Tips</h3>
<ul>
<li>有的时候当你修改页面或更改配置后发现并没有立即生效,可以执行<code>hexo clean</code>然后再启动<code>hexo server</code>。 </li>
<li>默认的评论组件可能并不太适合中国大陆用户(你懂的。。),你可以选择性的换成别的组件,或主题,比如我用的<a href="http://duoshuo.com/" target="_blank">多说评论</a>以及<a href="https://github.com/A-limon/pacman" target="_blank">Pacman</a>主题。</li>
<li>参与开源项目很简单,你只需要学会使用<a href="http://yangjian.me/learning/learning-git/" target="_blank">Git</a>以及Github,遇到bug或任何程序问题可以递交issue,当然如果你有能力自己解决问题或可以为Hexo开发新的功能,那么请pull request。</li>
</ul>
]]></content>
<category term="github" scheme="http://www.yangjian.me/tags/github/"/>
<category term="hexo" scheme="http://www.yangjian.me/tags/hexo/"/>
<category term="workspace" scheme="http://www.yangjian.me/categories/workspace/"/>
</entry>
<entry>
<title><![CDATA[写给2012]]></title>
<link href="http://www.yangjian.me/personal/my-2012/"/>
<id>http://www.yangjian.me/personal/my-2012/</id>
<published>2012-12-31T16:00:00.000Z</published>
<updated>2013-12-25T08:01:21.000Z</updated>
<content type="html"><![CDATA[<p>连续三年写年终总结了,看到最近大家都在写,刚刚还是犹豫了下,不写文章自己的博客都不打开,打开了就是种种愧疚,就像一位多年没有说话的挚友再次相见的尴尬。好吧,我保证,13年我会经常写博客的。这是我<a href="http://yangjian.me/summary/2012/01/01/my-2011.html" target="_blank">前两年写的总结</a>。现在翻开看看,还是有种”Too young Too Simple“的感觉,这样的青春,谁又未曾有过,不念过去,不畏将来。翻了翻微博,twitter,豆瓣什么的这一年说了什么做了什么也都想起来了。先来个流水账吧。</p>
<ul>
<li>Jan.没什么重要的,大学里面我们就是要做很多我们不喜欢却必须去做的事情。回头想想,不仅仅是大学,整个人生又何尝不是呢? </li>
<li>Feb.驾驶技术+1,梦想早日开上自己的BMW+10。 </li>
<li>Mar.Apr.参加了两个比赛,后来还真获奖了。开学了开始做项目,同时指导了另外两个项目。可以在这里说下,后来挺失败的,这是我今年的一大败笔,三个项目没有一个按时上线的,我有推不开的责任。这也算是一个教训吧,引以为戒。</li>
<li>May.迁移了博客,今年还是想继续折腾下,不折腾不舒服。今年确实掌握不少管理服务器的经验,机房三天两头的出问题,也体验了一把运维人员的辛苦,自己写了点脚本,做了些优化,现在服务器我基本满意,也算是我离校前给学校做了点贡献吧。</li>
<li>Jun.Jul.考了一个六级,后来还真过了。痛恨各种考试,下半年一个考试都没报,总觉得都是骗钱的,自己爱学什么学点什么才是王道。喜欢上了Linux,Ubuntu,我对终端没啥抵抗力。弄了一个Mobile端的项目,后来没做完。</li>
<li>Aug.愉快的假期,炎热的夏天。</li>
<li>Sep.开学SDG又纳新了,自己上大学4年在SDG待了三年半,看着团队一届又一届的成长总是有种自豪感,有一群志同道合的人在一起做点大家热爱的事情,不失Geek范又挺幸福的。</li>
<li>Oct.十一假期去了一次沈阳还有北戴河,出来玩玩放松下心情,九月份的时候皮肤就过敏了,折磨我了不少时间。去了软件公司才知道什么叫软件工程,我们做的好像是过家家的玩具,各种技术技能有待提高啊。</li>
<li>Nov.Dec.不少事情,看书,学习,写了写Java,乱又杂就不谈了。 </li>
</ul>
<p>————————————————华丽的分割线呢?———————————————————- </p>
<p>感悟什么的必须要来点:</p>
<ul>
<li>朋友。我要感谢你们,没法想象没有你们的日子该怎么过。</li>
<li>健康还是最被优先考虑的。</li>
<li>时间和知识的管理是一门大学问。</li>
<li>专注,专注才能让你获得更多。</li>
<li>静心,这一年有点浮躁,不好。</li>
<li>有些事情不必去牵强,尽力就好。</li>
</ul>
<p>妄图用一篇文章就概括一年无疑是贪心的。无论如何,这一年让我更热爱这个世界,热爱我的生活了。也许这就够了。 </p>
<p><strong>人生本来就一无所有,没有理由不追随心之所向。</strong> </p>
]]></content>
<category term="总结" scheme="http://www.yangjian.me/tags/%E6%80%BB%E7%BB%93/"/>
<category term="personal" scheme="http://www.yangjian.me/categories/personal/"/>
</entry>
<entry>
<title><![CDATA[学习Git]]></title>
<link href="http://www.yangjian.me/learning/learning-git/"/>
<id>http://www.yangjian.me/learning/learning-git/</id>
<published>2012-08-05T16:00:00.000Z</published>
<updated>2013-12-25T07:54:46.000Z</updated>
<content type="html"><![CDATA[<blockquote>
<p><a href="http://git-scm.com/" target="_blank">Git</a>是一个免费开源的分布式版本控制系统,用于以高效、迅速的方式>处理从很小到非常大的项目。<br><a href="https://github.com/" target="_blank">Github</a>是程序员的名片。<br>代码,是程序员沟通的最直接的手段。 </p>
</blockquote>
<p>使用Git应该是每一位程序员的必备技能(钟情于SVN的亲们勿喷),Git被很多IT公司使用并在开源届和圈内有着巨大的声誉,之前团队做项目经常使用的也都是SVN现在接触了Github后,学习掌握Git也成了顺理成章的事情。希望这篇短文可以帮助到Git的初学者,我们共同学习。<br><img src="/image/2013-03-18/github.JPEG" alt="github"> </p>
<h2 id="Git入门">Git入门</h2>
<p>Git本身非常容易掌握,同样学习Git也很容易,通过下面几个网站你就可以轻松掌握Git。</p>
<ul>
<li>Git的官方网站提供了Git 的所有<a href="http://git-scm.com/doc" target="_blank">文档</a>。墙内用户可以参考<a href="http://gitref.org/" target="_blank">Git Reference</a>。</li>
<li>书籍:《Pro Git》提供在线的<a href="http://git-scm.com/book/zh" target="_blank">中文版</a>和<a href="http://git-scm.com/book" target="_blank">英文版</a>。</li>
<li>Github与Code School联合提供了一个在线互动教程:<a href="http://try.github.com/levels/1/challenges/1" target="_blank">Try Git</a>,除此之外<a href="http://gitimmersion.com/" target="_blank">Git Immersion</a>也是个不错的选择。</li>
<li>各种英文看不懂?来看看<a href="http://rogerdudler.github.com/git-guide/index.zh.html" target="_blank">Git 简易指南</a> 。</li>
<li>进阶篇:<a href="http://marklodato.github.com/visual-git-guide/index-zh-cn.html" target="_blank">Git图解</a>,<a href="http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/index.html" target="_blank">Git Magic</a>,<a href="http://think-like-a-git.net/" target="_blank">Think like a Git</a>。</li>
</ul>
<h2 id="Github入门">Github入门</h2>
<p>Github是一群有趣的人在做的有趣的事,Github不仅仅简单的是Git服务器,更是发展成了Social Coding,在Github你可以得到的绝对超出你的想象。</p>
<ul>
<li>Github提供了官方的<a href="https://help.github.com/" target="_blank">帮助信息</a>和他们的<a href="https://github.com/blog" target="_blank">博客</a>。</li>
<li>《Git权威指南》一书的作者编写的<a href="http://www.worldhello.net/gotgithub/01-explore-github/index.html" target="_blank">GotGitHub</a>是一份非常好的学习资料。</li>
<li>好文两篇:<a href="http://www.yangzhiping.com/tech/github.html" target="_blank">如何高效利用Github</a>,<a href="http://www.cnblogs.com/fnng/archive/2012/01/07/2315685.html" target="_blank">Gthub初级运用</a>。</li>
</ul>
<p>最好的学习当然是Learning by doing!<br>ps:<a href="https://github.com/A-limon" target="_blank">我的Github账户</a> 。</p>
]]></content>
<category term="git" scheme="http://www.yangjian.me/tags/git/"/>
<category term="学习" scheme="http://www.yangjian.me/tags/%E5%AD%A6%E4%B9%A0/"/>
<category term="learning" scheme="http://www.yangjian.me/categories/learning/"/>
</entry>
<entry>
<title><![CDATA[使用AppFog部署Web应用]]></title>
<link href="http://www.yangjian.me/web/deploy-web-service-to-AppFog/"/>
<id>http://www.yangjian.me/web/deploy-web-service-to-AppFog/</id>
<published>2012-08-04T16:00:00.000Z</published>
<updated>2013-12-25T08:04:19.000Z</updated>
<content type="html"><![CDATA[<h2 id="AppFog简介">AppFog简介</h2>
<p><a href="https://www.appfog.com/" target="_blank">AppFog</a>是一个基于<a href="http://www.cloudfoundry.com/" target="_blank">Cloud Foundry</a>的PaaS平台,类似Google APP Engine和Heroku。最底层是基于AWS, RackSpace,HP OpenStack, MS Azure这样的IaaS平台,中间层使用Cloud Foundry,最上层是AppFog。<br>以内存分配作为主要的定价规则,无缝切换IaaS平台,无需关心配置问题,专心Code,就是所谓的“Work on code, not management.”AppFog还提供了iphone App用来监控你的Web应用,由于是基于Cloud Foundry 所以可以同样适用很多第三方开源工具。可以通过他们的<a href="http://blog.appfog.com/" target="_blank">博客</a>了解更多信息。 </p>
<p><a href="http://techcrunch.com/2012/08/01/appfog-and-rackspace-want-to-break-your-app-out-of-amazons-walled-garden/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Techcrunch+%28TechCrunch%29" target="_blank">TechCrunch</a>前两天报道了AppFog,而且后者最近拿到了大笔的融资,目测还是很靠谱的。最重要的是<strong>Free方案很给力:</strong> </p>
<ul>
<li>应用数量无限制,总数2GB 的RAM,数据库服务最大1GB,最多10个扩展(add-ons)</li>
<li>免费、可扩展和负载均衡的app</li>
<li>在各平台上使用最快的服务器实例(类似m2.4xlarge)</li>
<li>免费自定义域名</li>
<li>每月50GB流量 </li>
</ul>
<p>AppFog目前支持的编程语言包括: </p>
<ul>
<li>Java1.6.0,Java Grails2.0.3, Java Spring Mysql3.0.0</li>
<li>Node0.6.8,Node Chat1.0.0,Node Express3.0.0</li>
<li>PHP5.3.2,PHP Drupal7.14.0,PHP Wordpress3.3.2</li>
<li>Python2.7.3,Python Django1.4,Python Flask0.8</li>
<li>Ruby on Rails3.2.5,Ruby Sinatra1.3.2</li>
</ul>
<p>目前支持的数据库、扩展包括: </p>
<ul>
<li>MySQL5.1,PostgreSQL9.1,MongoDB1.8(数据库都是AppFog自身提供的)</li>
<li>MongoLab,MongoHQ(以下扩展由第三方平台提供,可以一键安装)</li>
<li>ClearDB,IronMQ,IronWorker,Mailgun,Searchify,CloudMailin </li>
</ul>
<p><img src="/image/2013-03-17/appfog1.PNG" alt="Appflg"> </p>
<h2 id="创建应用:">创建应用:</h2>
<ul>
<li>Step 1: Choose an application 选择应用类型</li>
<li>Step 2: Choose an infrastructure 选择底层平台,推荐使用AWS Asia SE,访问速度还是比较快的。</li>
<li>Step 3: Choose a subdomain 填写子域名,稍后进入控制面板可以自定义域名。每个应用默认分128MB的内存,部分应用自带一个MySQL服务。</li>
</ul>
<p>Building速度很快,控制面板的UI看着很舒服。</p>
<p>在控制面板可以开启、关闭、重启应用,动态调节内存配额和实例数量,绑定服务或数据库,使用CNAME绑定自定义域名,设置环境变量,克隆应用到其他底层平台(infrastructure)。 </p>
<p><img src="/image/2013-03-17/appfog2.PNG" alt="appfog"> </p>
<p>需要注意的是,AppFog是利用ruby gem安装<code>af</code>命令行工具进行源代码更新的。在进入工作目录后,</p>
<pre><code>gem install af
af login
af <span class="operator"><span class="keyword">update</span> yourAPP </span>
</code></pre><p>Windows平台:首先安装 <a href="http://rubyinstaller.org/" target="_blank">Ruby Installer for Windows</a> (如果你还进行其他Ruby开发,也可以安装<a href="http://railsinstaller.org/" target="_blank">RailsInstaller</a>)安装完成后使用Command Prompt with Ruby完成操作</p>
<pre><code>gem <span class="operator"><span class="keyword">update</span> --system
gem install af
af login
af <span class="keyword">update</span> yourAPP </span>
</code></pre><p>这里来点题外话,Ruby使用者可以忽略本段。rubygem的资源文件由于你懂的原因经常无法访问,伟大的淘宝提供了国内<a href="http://ruby.taobao.org/" target="_blank">镜像</a>网站。 </p>
<pre><code>$ gem sources --remove http://rubygems<span class="preprocessor">.org</span>/
$ gem sources -a http://ruby<span class="preprocessor">.taobao</span><span class="preprocessor">.org</span>/
$ gem sources -l
*** CURRENT SOURCES ***
<span class="label">http:</span>//ruby<span class="preprocessor">.taobao</span><span class="preprocessor">.org</span>
<span class="preprocessor"># 请确保只有 ruby.taobao.org</span>
$ gem install rack
</code></pre><p>现在就使用AppFog创建一个应用吧。AppFog非常适合用于学习编程语言或部署、测试小的应用程序。2GB内存够做不少事情~ </p>
<p>这里是我通过AppFog创建的一个Python应用例子:<a href="http://python.yangjian.me" target="_blank">http://python.yangjian.me</a></p>
]]></content>
<category term="AppFog" scheme="http://www.yangjian.me/tags/AppFog/"/>
<category term="web" scheme="http://www.yangjian.me/categories/web/"/>
</entry>
<entry>
<title><![CDATA[针对SAE上的wordpress优化]]></title>
<link href="http://www.yangjian.me/web/optimize-wordpress-on-SAE/"/>
<id>http://www.yangjian.me/web/optimize-wordpress-on-SAE/</id>
<published>2012-02-10T16:00:00.000Z</published>
<updated>2013-12-25T08:03:37.000Z</updated>
<content type="html"><![CDATA[<p>实际上,通过新浪SAE上“应用商店”安装的wordpress已经是经过些基础优化的,比如数据库主从分离,提升性能,节省云豆消耗,使用轻量的Memcache缓存模块。而本文讨论的优化主要涉及到:<strong>关闭缩略图,减少碎片文件,邮件发送,通知用户评论被回复,彩色标签云,Ajax评论,整合社会化评论,其他优化。</strong>优化同样是个个性化的事情,需求决定命运。 </p>
<h3 id="关闭缩略图">关闭缩略图</h3>
<p>昨天发表了一篇文章,里面只有三张图片,但是今天在SAE上的Storage里面有超过十四张的图片,仔细看发现是Wordpress自己生成的缩略图,果断砍掉。<br><strong>进入“WP后台>>设置>>媒体”将所有数字改为0。完成。</strong><br><img src="/image/2013-03-18/wordpress01.PNG" alt="Image Title"> </p>
<h3 id="关闭自动保存">关闭自动保存</h3>
<p>禁止文章修订版本和自动保存功能可以减少碎片文件的生成,同时我个人从来不在WP的后台发表文章,我总是使用<a href="http://explore.live.com/windows-live-essentials-other-programs?T1=t5" target="_blank">Windows Live Writer</a>,所以这个功能也果断砍掉。<br><strong>在主题的 functions.php 文件里面加入如下代码即可。</strong> </p>
<pre><code><span class="comment">/* 移除自动保存和修订版本 */</span>
<span class="function">remove_action(<span class="string">'pre_post_update'</span>, <span class="string">'wp_save_post_revision'</span> )</span>;
<span class="function">add_action( <span class="string">'wp_print_scripts'</span>, <span class="string">'disable_autosave'</span> )</span>;
function <span class="function">disable_autosave()</span> {
<span class="function">wp_deregister_script(<span class="string">'autosave'</span>)</span>;
}
</code></pre><h3 id="邮件服务设置">邮件服务设置</h3>
<p>可以通过代码或插件实现,代码实现方法请参考<a href="http://www.evecalm.com/2011/11/wordpress-for-sae-mail-comment.html" target="_blank">这里</a>。我比较懒,改了几次没有成功,而且考虑到以后的可移植性,我选择插件法。需要两个插件实现。</p>
<h4 id="WP-Mail-SMTP_实现邮件发送">WP-Mail-SMTP 实现邮件发送</h4>
<p><img src="/image/2013-03-18/wordpress02.PNG" alt="Image Title"> </p>
<h4 id="replyMail_实现用户评论被回复邮件通知">replyMail 实现用户评论被回复邮件通知</h4>
<p><img src="/image/2013-03-18/wordpress03.PNG" alt="Image Title"><br>设置请参考截图上的说明。 </p>
<h3 id="彩色标签云">彩色标签云</h3>
<p>那个flash标签云超级难用,而且是flash的,自带的标签云完全够用,为了喜庆点可以弄成彩色的。<br><strong>在主题的 functions.php 文件里面加入如下代码即可。添加完成后每次刷新颜色都是随机改变的。</strong> </p>
<pre><code><span class="comment">/* 彩色标签云 */</span>
<span class="function"><span class="keyword">function</span> <span class="title">colorCloud</span><span class="params">(<span class="variable">$text</span>)</span>
{</span><span class="variable">$text</span> = preg_replace_callback(<span class="string">'||i'</span>, <span class="string">'colorCloudCallback'</span>, <span class="variable">$text</span>); <span class="keyword">return</span> <span class="variable">$text</span>; }
<span class="function"><span class="keyword">function</span> <span class="title">colorCloudCallback</span><span class="params">(<span class="variable">$matches</span>)</span>
{</span><span class="variable">$text</span> = <span class="variable">$matches</span>[<span class="number">1</span>]; <span class="variable">$color</span> = dechex(rand(<span class="number">0</span>,<span class="number">16777215</span>));
<span class="variable">$pattern</span> = <span class="string">'/class=(\'|\")(.*)(\'|\")/i'</span>;
<span class="variable">$text</span> = preg_replace(<span class="variable">$pattern</span>, <span class="string">"class=\"color:#{$color};$2;\""</span>, <span class="variable">$text</span>);
<span class="keyword">return</span> <span class="string">""</span>; }
add_filter(<span class="string">'wp_tag_cloud'</span>, <span class="string">'colorCloud'</span>, <span class="number">1</span>);
</code></pre><h3 id="AJAX评论">AJAX评论</h3>
<p>如果你的主题自带Ajax回复,请无视本段。如果主题没有ajax评论效果,我强烈建议你安装,增强用户体验,<strong>感谢@蒋兔兔以及@你没事儿吧 的给力评论测试,不至于场面过于冷场!</strong><br><strong>只要主题符合wp标准,安装wp-comment-master插件就能实现AJAX评论和评论翻页。</strong> </p>
<h4 id="整合社会化评论">整合社会化评论</h4>
<p>我试用了很多社会化插件,效果都不太满意,有的需要自己申请网站的appkey,大部分的插件都不支持整合现有的wp评论,还有的系统需要用户在你的网站注册成用户。所幸直接修改主题模板,直接整合两套评论系统,兼顾所有用户,亲你爱用哪个用哪个~<br>使用的是<a href="http://duoshuo.com/" target="_blank">多说</a>平台。注意,<strong>不要使用wordpress插件版</strong>,因为那样插件会自动取代现有的评论系统。注册账户后点击“获取代码”选择“通用代码”。你会得到一段带有用户ID的javascript代码。<br>将代码插入到主题的single.php中的合适位置。效果请参考本页面底部。你也可以编写成一个选项卡,点击载入“社交评论”。</p>
<h2 id="其他优化">其他优化</h2>
<p>个人认为使用15个以下插件不会给网站的性能拖后腿,总之,使用插件是一个权衡性能,可移植性,便捷性的事情。正如<a href="http://yangjian.me/web/2012/02/10/build-wordpress-on-SAE/" target="_blank">上篇文章</a>提到的推荐插件。 </p>
<ul>
<li>WP Cleaner:清除无用的文章,草稿,如果你使用了上面我介绍的“关闭自动保存”这个插件在使用完就可以卸载了。</li>
<li>WP Database Optimizer:优化你的数据库. </li>
<li>GZippy:开启Gzip压缩。 </li>
</ul>
<p>除了使用插件,定期维护网站,删除无效文件,解决死链,减少优化http请求才是维护一个高性能wordpress的王道。(SEO方面,站点监控另起文章介绍)经过这些优化,你可以大胆的放心的将你的精力集中在内容,而不是维护上。</p>
<p>毕竟创造优秀的内容才符合技术宅的身份。</p>
]]></content>
<category term="SAE" scheme="http://www.yangjian.me/tags/SAE/"/>
<category term="web" scheme="http://www.yangjian.me/categories/web/"/>
</entry>
<entry>
<title><![CDATA[在新浪SAE上搭建wordpress]]></title>
<link href="http://www.yangjian.me/web/build-wordpress-on-SAE/"/>
<id>http://www.yangjian.me/web/build-wordpress-on-SAE/</id>
<published>2012-02-09T16:00:00.000Z</published>
<updated>2013-12-25T08:03:05.000Z</updated>
<content type="html"><![CDATA[<p>个人还是很看好新浪SAE这样的云计算平台,目前国内比较成熟的云计算平台,目前支持php,python,java(需邀请码),集成了Mysql,Memcache,Storage等服务。以后还会支持更多编程语言以及服务。目前SAE的应用需要消耗云豆,成为认证开发者可以获赠云豆,支持已经备案的域名绑定,更多详细的介绍请前往官网了解。 </p>
<h3 id="准备SAE环境">准备SAE环境</h3>
<p>使用微博账号登陆,然后填写注册信息,创建一个应用,名称和地址都填写好,开发语言选择php。输入安全验证后创建成功。<br><img src="/image/2013-03-18/wp01.JPEG" alt="Image Title"><br>配置wordpress<br>进入导航中的“应用商店”,选择安装wordpress到你的刚才创建的应用。同时新建一个版本(如:1)。</p>
<p><img src="/image/2013-03-18/wp02.JPEG" alt="Image Title"> </p>
<p>出现一个弹出层,选择“进入初始化界面”。</p>
<p><img src="/image/2013-03-18/wp03.JPEG" alt="Image Title"><br>把该填的都填了吧。至此,最基本的搭建已经完成了。 </p>
<p><strong>需要注意的是: </strong> </p>
<ul>
<li>安装的版本是WordPress 3.2.1可能不是最新版本,另外新浪SAE版的wordpress是经过修改的特殊版本。针对SAE有很多的修改,部分插件或者功能不支持(如mail相关功能)如果你是wordpress或者php的玩家请认真阅读<a href="http://sae.sina.com.cn/?m=recommendapps&a=detail&id=4" target="_blank">说明文档</a>。 </li>
<li>SAE平台的所有文件都不支持直接在服务器上更改,都必须通过在本地修改代码后通过SVN的方式更新到服务器上,所以wordpress上的插件、主题等的更改都<strong>必须通过SVN更新更改(更新日志、图片等不受影响)。</strong>熟悉<a href="http://sae.sina.com.cn/?m=devcenter&catId=212" target="_blank">SVN</a>的同学可以乐了~ </li>
<li>自带的插件版本比较旧,建议通过SVN检出到本地后,在本地修改再更新到服务器上。此建议同理适用于主题的修改。(玩的就是这种feel~)</li>
</ul>
<p>推荐插件<br>插件的使用完全是因人而异或者根据具体情况使用的,其实我自己也是稀里糊涂,因为太长时间不玩wordpress了,如果你在<strong>SAE上的Wordpress</strong>有任何优秀的插件想要分享的话,请在下面的评论中留言。<br>插件请通过<a href="http://wordpress.org/extend/plugins/" target="_blank">wordpress官方插件网站</a>或者插件作者页下载。 </p>
<ul>
<li>Akismet</li>
<li>Clean Archives Reloaded</li>
<li>Custom Smilies</li>
<li>Google XML Sitemaps</li>
<li>GZippy</li>
<li>Lightbox 2</li>
<li>replyMail</li>
<li>wp-comment-master</li>
<li>WP-Mail-SMTP</li>
<li>WP-PostViews</li>
<li>WP-Syntax</li>
<li>WP Cleaner</li>
<li>WP Database Optimizer</li>
<li>无觅相关文章插件</li>
</ul>
]]></content>
<category term="SAE" scheme="http://www.yangjian.me/tags/SAE/"/>
<category term="web" scheme="http://www.yangjian.me/categories/web/"/>
</entry>
<entry>
<title><![CDATA[七款国内网盘横向测评]]></title>
<link href="http://www.yangjian.me/share/7-webdisks-review/"/>
<id>http://www.yangjian.me/share/7-webdisks-review/</id>
<published>2012-02-06T16:00:00.000Z</published>
<updated>2013-12-25T08:10:49.000Z</updated>
<content type="html"><![CDATA[<p><img src="/image/2013-03-18/netbox01.JPEG" alt="title"> </p>
<p>由于众所周知的原因备受好评的<a href="http://www.dropbox.com/" target="_blank">Dropbox</a>被GFW认证了,而且自己真没有啥国家机密级别的数据,自从上次CSDN密码泄露的时候,我对”安全性“也释然了~。转眼国内众家网盘产品,<strong>如何选择一个适合自己的呢?</strong>恰好我自己对七款网盘都试用了,就把这个过程写成测评文章分享给大家,希望对有着同样困惑的朋友有所帮助。<br><strong>另外请各位看官(尤其是该产品粉丝或者工程师)请注意:我无意偏向或者贬低任何一款产品,完全是从我这么一个普通用户的角度来思考评判。文中比较损的语句完全没有恶意,只是希望你们做的更好。</strong></p>
<h2 id="有关测评的说明">有关测评的说明</h2>
<ul>
<li>测试平台:Windows 7 64 bit+Android 2.2+Chrome 19.0.1036.7 dev-m。(由于没有IOS和Mac设备,暂不测试这两个平台的客户端,此外仅有两款产品提供Linux客户端同样不测评)</li>
<li>所有客户端使用最新版。(截止到2012年2月13号)</li>
<li>网络环境:电信ADSL 3M。手机使用Wifi。(实际使用可能根据网络环境和平台差异有所不同)</li>
<li>测试数据:包含jpg图片,mp3音乐,mp4视频,word文档,excle表格,ppt幻灯片,txt记事本,两个文件夹(含重复文件),7z压缩包,exe安装包。共约100MB。</li>
<li>很遗憾的是这里所有的网盘产品的客户端都没有支持Windows Phone 7的。<br>使用网盘的好处</li>
<li><strong>备份重要数据</strong>:即使本地硬盘数据丢失损坏,云端的服务器上还存有一份。</li>
<li><strong>同步办公</strong>:在公司没有完成的直接同步到家里的电脑,同步到你的手机。无需使用U盘。</li>
<li><strong>随时随地访问</strong>:无论身处何处,只要有网络就可以获取你的数据。</li>
<li><strong>自由分享</strong>:将你的文件轻松的发送给朋友,不管他是否在线。 </li>
</ul>
<h2 id="网盘基础信息一览">网盘基础信息一览</h2>
<p><img src="/image/2013-03-18/netbox02.PNG" alt="Image Title"> </p>
<h2 id="<a_href="http://www-kuaipan-cn/" target="_blank">金山快盘</a>"><a href="http://www.kuaipan.cn/" target="_blank">金山快盘</a></h2>
<p>金山公司有很多优秀的产品,WPS系列甚好,打开速度快,简单的办公任务完全可以取代Microsoft Office。我就使用WPS作为office文档的默认软件,因为大多数只是打开看看,没有必要等待蜗牛般的MS。所以金山的网盘靠谱程度还是很高的,安全性可靠性是有保障的。</p>
<h4 id="Windows端">Windows端</h4>
<p>安装完成后会可以选择使用虚拟硬盘还是文件目录。二者可以相互转换。如果是选择文件夹的方式,会在”计算机“中添加一个快盘的快捷链接。此外,在资源管理器右侧会集成一个大的菜单,直观的显示当前的同步过程,也方便操作。<strong>这种设计让不了解网盘的用户更容易熟悉这个产品,拉低了网盘是使用门槛。</strong><br><img src="/image/2013-03-18/netbox03.PNG" alt="Image Title"><br>如果选择”金山快盘”虚拟硬盘。文件只要放在这个虚拟硬盘里就可以同步了。至于具体的磁盘位置,金山会将虚拟硬盘放置在你硬盘剩余空间最大的分区中。</p>
<p><img src="/image/2013-03-18/netbox04.PNG" alt="Image Title"> </p>
<p>基本功能:支持选择性同步,删除本地缓存(在公共电脑上使用完后可以方便安全的删除本地数据,保护隐私)。HTTPS加密传输(速度可能会下降),局域网加速,多进程传送,速度限制,代理,设置本地密码。</p>
<p><img src="/image/2013-03-18/netbox05.PNG" alt="Image Title"></p>
<p>同步之后文件左下角会有提示图标。</p>
<p><img src="/image/2013-03-18/netbox06.PNG" alt="Image Title"> </p>
<p>速度方面:很快!达到了最大带宽,而且修改文件后再同步也是很快的。重复的文件秒传,说明系统检测了文件的信息,重复的文件不重复上传,只是再云端copy了一份。</p>
<p><img src="/image/2013-03-18/netbox07.PNG" alt="Image Title"> </p>
<p>特色功能:可以恢复误删除的文件,分享好友(好友必须也是金山快盘用户),生成下载链接。</p>
<p><img src="/image/2013-03-18/netbox08.PNG" alt="Image Title"> </p>
<p>值得注意的是,快盘还带有“一键同步助手”,可以找出电脑的照片,MSN聊天记录,IE的书签栏同步到快盘。个人感觉应该未来支持QQ,旺旺等聊天工具,浏览器增加Chrome等,(感觉未来这个功能会集成在金山卫士中)。</p>
<p><img src="/image/2013-03-18/netbox09.PNG" alt="Image Title"> </p>
<p>不足的之处在于:限制了单个文件最大300MB。</p>
<p><img src="/image/2013-03-18/netbox10.PNG" alt="Image Title"> </p>
<p>此外,<strong>你只要退出了金山快盘。在“计算机”里面就找不到金山快盘的入口了(无论采用文件夹还是虚拟硬盘)!瞬间你就凌乱了~</strong></p>
<h4 id="Web端">Web端</h4>
<p>界面制作简单美观,方便管理。</p>
<p><img src="/image/2013-03-18/netbox11.PNG" alt="Image Title"> </p>
<p>功能方面支持:右键操作(很有感觉~),在线上传,文件预览(doc,excle,ppt,txt,jpg)。<br>文件均提供下载地址,且可以设置密码。这样你可以把地址发给特定的朋友而不用担心地址泄露而造成重要资料外泄。另外好友(非金山快盘用户)无需注册即可下载。</p>
<p><img src="/image/2013-03-18/netbox12.PNG" alt="Image Title"> </p>
<p>不满意的是web端没有采用HTTPS协议。</p>
<h4 id="Android端">Android端</h4>
<p>这可能是最好的网盘Android客户端了。<br><img src="/image/2013-03-18/netbox13.PNG" alt="Image Title"><br>点击文件后就可下载,之后会出现一个“放大镜图标”如果本地有相应的软就可以再金山快盘中预览。<br><img src="/image/2013-03-18/netbox14.PNG" alt="Image Title"><br>可以选择上传上传“照片,本机应用,其他文件”<br><img src="/image/2013-03-18/netbox15.PNG" alt="Image Title"><br>这个本机应用很有意思啊。<br><img src="/image/2013-03-18/netbox16.PNG" alt="Image Title"><br>设置选项很丰富。支持自动备份手机中的相册。有点icloud的感觉了。<br><img src="/image/2013-03-18/netbox17.PNG" alt="Image Title"><br>传输管理<br><img src="/image/2013-03-18/netbox18.PNG" alt="Image Title"><br>分享功能同样可以在手机上使用<br><img src="/image/2013-03-18/netbox19.PNG" alt="Image Title"><br>如果你决定使用金山快盘:<a href="http://www.kuaipan.cn/index.php?ac=account&op=register&channel=qhidce" target="_blank">请点击这里注册</a>。 </p>
<h2 id="<a_href="http://disk-qq-com/" target="_blank">QQ网盘</a>"><a href="http://disk.qq.com/" target="_blank">QQ网盘</a></h2>
<p>我对QQ网盘的第一感觉就是:<strong>腾讯还没有开始卖力</strong>。网盘只有简单的上传。连基本的同步功能都没有。不过越是简单,越是让人怀疑(腾讯在下一盘很大的棋 - - !)。</p>
<h4 id="Windows端-1">Windows端</h4>
<p>客户端QQ程序自带,只有两个字:简单!分为“任务”以及“网盘”两个部分。<br><img src="/image/2013-03-18/netbox20.PNG" alt="Image Title"><br>基本功能:<br>只提供上传功能,支持文件夹整体上传。<br>速度方面:<br>很快。能达到350kb/s的上传速度。<br><img src="/image/2013-03-18/netbox20.PNG" alt="Image Title"><br>特色功能:<br>得益于QQ旋风的离线下载。大量的热门资源在腾讯的服务器已经存在。如果你上传了这些已经存在的文件,基本上是<strong>秒传</strong>。</p>
<h4 id="Web端-1">Web端</h4>
<p>Web端就是腾讯的<a href="http://web.qq.com/" target="_blank">WebQQ</a>。有趣的是,在Web端,你会发现“云存储”里面多了个金山快盘提供5GB存储空间。发现“基情”了有木有啊~<br><img src="/image/2013-03-18/netbox22.PNG" alt="Image Title"><br>Web端支持<strong>Html5拖拽上传</strong>——唯一的亮点。同样也没有采用https协议。</p>
<h4 id="Android端-1">Android端</h4>
<p>启动界面还是叫”QQ硬盘“,里面有了“QQ网盘”,下边有写着“QQ硬盘”。尼玛你名字不少啊~<br><img src="/image/2013-03-18/netbox23.PNG" alt="Image Title"><br>本地文件不显示,点击上传只能选择“相册照片”和“拍照上传”。 </p>
<h2 id="<a_href="http://www-dbank-com/" target="_blank">华为网盘</a>"><a href="http://www.dbank.com/" target="_blank">华为网盘</a></h2>
<p>华为网盘就是原来的Dbank.在稳定性,可靠性,安全性还是有保障的。华为网盘把产品分为两种:一是单纯的,传统意义上的网盘。二是”爱同步”,更像我们今天所讨论的网盘:具有同步功能。<br>先谈谈”网盘“:支持Windows 和Android,Web平台。<strong>免费用户不支持发布加密外链,普通外链会提示注册,不注册无法下载,更要命的是:有弹出窗口广告!</strong><br>再谈谈“爱同步”:不谈了,支持平台太少。<br>pass pass。</p>
<h2 id="<a_href="http://www-everbox-com/" target="_blank">盛大网盘</a>"><a href="http://www.everbox.com/" target="_blank">盛大网盘</a></h2>
<p>盛大的麦库我一直在使用。麦库是类似Evernote的云笔记。我就在使用麦库,感觉比有靠谱。故对盛大网盘EverBox抱有很大的期望。</p>
<h4 id="Windows端-2">Windows端</h4>
<p>安装完成后会在“计算机”生成一个快捷方式的图标。占用的本地文件夹位置你可以自定义。<br><img src="/image/2013-03-18/netbox24.PNG" alt="Image Title"><br>基本功能:选择性同步,速度限制,代理,https传输。同步模式可以设置“双向同步”以及“只上传不下载”我觉得这两种模式划分的很脑残!<br>速度方面:没超过200kb/s,而且明显感觉同步速度不给力。检查文件就需要好几秒钟。<br><img src="/image/2013-03-18/netbox25.PNG" alt="Image Title"><br>退出后“盛大网盘”的快捷方式依然存在。<br>亲,已经没有其他特色了~</p>
<h4 id="Web端-2">Web端</h4>
<p>比起Windows端,Web表示毫无压力。设计上很直观,不支持右键操作,不过影响不大。同样没有采用HTTPS协议。<br><img src="/image/2013-03-18/netbox26.PNG" alt="Image Title"><br>亮点是支持音乐以及视频的在线预览,但是,但是不支持office系列,txt文件的预览!<br><img src="/image/2013-03-18/netbox27.PNG" alt="Image Title"><br>此外支持误删文件回复,支持外链分享,但是不支持加密分享。外链分享是限制次数的:100次。<br><img src="/image/2013-03-18/netbox28.PNG" alt="Image Title"> </p>
<h4 id="Android端-2">Android端</h4>
<p>没有什么亮点,只有最基本的功能:传输,下载,设置选项很少。<br><img src="/image/2013-03-18/netbox29.PNG" alt="Image Title"><br>如果你选择使用盛大网盘:<a href="http://account.everbox.com/signup/1623464403%40sdo" target="_blank">点击这里注册</a>。</p>
<h2 id="<a_href="http://www-115-com/" target="_blank">115网盘</a>"><a href="http://www.115.com/" target="_blank">115网盘</a></h2>
<p>同Dbank一样,都是半路出家的和尚,将产品分为了传统意义上的”网盘“和”同步盘“。115的网盘是非常出色的,但是同步盘只提供Web和Windows平台。好吧,115就不要打肿脸充胖子了,咱就不测它的同步盘了。只谈115网盘。<strong>我个人认为115网盘非常适合分享写小众或者独特的资源,空间大,下载速度快,很适合博客主等分享资源。这是我对115最满意的地方。</strong><br><img src="/image/2013-03-18/netbox30.PNG" alt="Image Title"><br>Web端支持右键操作,支持插件快速上传,速度基本能达到带宽最大。当然Windows和iphone下还提供“优蛋客户端”,还是依托服务器海量的文件,热门资源都是秒传。分享文件简单快捷不用思考。现在115支持资源搜索。<br>如果你选择使用115网盘:<a href="http://115.com/invite/46ce5f" target="_blank">点击这里注册</a>。</p>
<h2 id="<a_href="">云诺</a>"><a href="">云诺</a></h2>
<p>云诺是最近才进入大家视线,它是由蒋士揆带领的创业团队开发的产品。关于他们的故事你可以去<a href="http://www.ifanr.com/70046" target="_blank">ifanr的访谈</a>中了解。云诺的亮点是<strong>支持全平台</strong>。我对这个创业团队期待还是蛮大的,可是吧~</p>
<h4 id="Windows端-3">Windows端</h4>
<p>安装完云诺后可以选择云诺所在的本地磁盘位置,并在“计算机”中创建一个叫做“Y盘”的快捷方式。推出程序后一直会存在。<br><img src="/image/2013-03-18/netbox31.PNG" alt="Image Title"><br>基本功能:局域网加速,速度控制,代理,都是支持的。但是<strong>不支持选择性同步</strong>。是否支持HTTPS传输未知。(默认吗?)<br><img src="/image/2013-03-18/netbox32.PNG" alt="Image Title"><br>特色功能:截图?谁需要呢?你不好好做做你的网盘做个毛截图啊?!<br>速度方面:不给力啊!速度就没有超过150kb/s。革命尚未成功,同志仍需努力。<br><img src="/image/2013-03-18/netbox33.PNG" alt="Image Title"><br>Window版仅支持一个右键功能:分享下载链接。好可怜啊<br><img src="/image/2013-03-18/netbox34.PNG" alt="Image Title"> </p>
<h4 id="Web端-3">Web端</h4>
<p>最明显的是Web端支持Https协议。这也让我怀疑云诺桌面端传输速度慢是不是默认就是用了Https协议?<br><img src="/image/2013-03-18/netbox35.PNG" alt="Image Title"><br>不支持右键操作,手感欠佳,点击“操作”按钮,<strong>那个菜单出来的这个慢啊!这个慢啊!你们的产品的主题就是为了突出“慢”的?!</strong><br><img src="/image/2013-03-18/netbox36.PNG" alt="Image Title"><br>支持共享,但是我发现个<strong>逻辑Bug</strong>啊!文件夹也可以分享?!好,可是它只能给注册的用户保存。不支持加密分享,另外没有找到管理分享的地方。难道是永久性的分享?好吧,观念太,太先进了…<br>预览方面,仅支持图片和TXT,TXT记事本还是乱码!乱码啊亲~汉字不显示有木有啊。<br>不支持误删文件恢复。<br><img src="/image/2013-03-18/netbox37.PNG" alt="Image Title"> </p>
<h4 id="Android端-3">Android端</h4>
<p>最美观的客服端,下载下来的图片可以再内部打开。<br><img src="/image/2013-03-18/netbox38.PNG" alt="Image Title"><br>不过功能太少了,上传做的太复杂了。<br><img src="/image/2013-03-18/netbox39.PNG" alt="Image Title"><br>如果你决定使用云诺:<a href="https://www.yun.io/index/url/code/02b41f8e0832bf33" target="_blank">请点击这里注册</a> </p>
<h2 id="<a_href="http://jianguopuzi-com/" target="_blank">坚果铺子</a>"><a href="http://jianguopuzi.com/" target="_blank">坚果铺子</a></h2>
<p>我喜欢坚果铺子的图标。 </p>
<p>坚果铺子现在还没有彻底的开放注册,但是你可以留下自己的邮箱,或是点击后边的邀请注册链接(前5次有效)用来开通自己的坚果铺子。坚果铺子的历史和背景我表示不太清楚~但是坚果铺子<strong>最大的亮点是“无限容量,全平台,多文件夹同步以及版本控制。</strong></p>
<h4 id="Windows端-4">Windows端</h4>
<p>安装完成后,坚果铺子会让你选择一个文件夹作为本地目录。同样会在“计算机”中多出一个“我的坚果铺子”的快捷方式,可以方便的进入你设定的本地文件夹。退出程序后快捷方式也会存在。<br><img src="/image/2013-03-18/netbox40.PNG" alt="Image Title"><br>基本功能方面:局域网加速,代理,选择性同步,本地分享,这些都是具有的。此外还包含<strong>“图片自动压缩”</strong>功能,个人感觉其他格式的数据也应该使用了某种压缩技术,毕竟坚果铺子是限制流量的。但是很费解的是,<strong>没有提供“暂停同步”</strong>这个简单的选项。<br>速度方面:不理想。200kb/s左右,没有达到带宽的最大速度。不知道是否默认采用HTTPS加密传输。 </p>
<p>特色功能必须逐个介绍,我感觉坚果铺子是所有网盘中最有个性,最创新的产品!我喜欢。<br>第一个亮点是<strong>多文件夹同步</strong>。<br>所谓多文件夹同步就是可以设置你电脑上任意一个文件夹同步到坚果铺子中,而不用特意的把它移动到“我的坚果铺子”中。而且可以在其他设备中选择时候同步该文件夹。<br><img src="/image/2013-03-18/netbox41.PNG" alt="Image Title"><br>如上图所示,只要右键选择文件夹,然后选择”私人同步“即可。<br>源引官网的介绍:</p>
<blockquote>
<p>本地无需同步所有文件夹。例如,将私人文件和工作文档放在两个同步文件夹。这样,公司电脑上只同步工作文档,无需同步私人文件。或者,您可以每台设备用一个同步文件夹存储备份,这个同步文件夹不需要同步到其他终端, 当然, 您仍然可以通过网页或其他形式访问备份文件. </p>
</blockquote>
<p>当然在同步完成后你可以选择今后不再本地同步该文件夹,但是你仍然可以通过Web端获取文件。<br><img src="/image/2013-03-18/netbox42.PNG" alt="Image Title"><br>也可以在此设定将他同步回本地文件夹。<br><img src="/image/2013-03-18/netbox43.PNG" alt="Image Title"><br>更多关于该功能的使用方法请参考<a href="http://blog.jianguopuzi.com/?p=302" target="_blank">官网的帮助文件</a>。</p>
<h4 id="Web端-4">Web端</h4>
<p>第二个亮点是<strong>版本控制</strong>。<br><img src="/image/2013-03-18/netbox44.PNG" alt="Image Title"><br>当我在本地修改文件后,同步的内容仅仅是我修改的那部分(节省流量),而每次修改都记录在Web端中。你可以方便的恢复到任意存在的版本。<strong>这样就非常适合存储我们经常修改的文件。</strong><br>Web端默认使用HTTPS协议,支持恢复误删文件,支持分享,支持分享管理。<br><img src="/image/2013-03-18/netbox45.PNG" alt="Image Title"><br>第三个亮点是:<strong>丰富的权限设置。不仅可以对文件夹进行权限设置,而且还可以针对分享给好友的文件夹设置权限。另外,支持每个人设置不同的权限。这种模式非常适合团队或者公司协同办公。</strong><br><img src="/image/2013-03-18/netbox46.PNG" alt="Image Title"><br>当然缺点也是有的,Web端<strong>不支持</strong>任何文件类型的预览,不支持右键交互,还发现一个小Bug。<br><img src="/image/2013-03-18/netbox47.PNG" alt="Image Title"> </p>
<h4 id="Android端-4">Android端</h4>
<p>太简陋了吧!比起Web和Windows端逊色太多了。<br><img src="/image/2013-03-18/netbox48.PNG" alt="Image Title"><br>这大黑菜单~<br><img src="/image/2013-03-18/netbox49.PNG" alt="Image Title"><br>如果你决定使用坚果铺子:<a href="https://jianguopuzi.com/d/ref/DLnjX74CPOGRterakELfVw" target="_blank">请点击这里注册</a>。(仅支持五次注册)</p>
<h2 id="测评总结">测评总结</h2>
<p>不完全汇总信息:<br><img src="/image/2013-03-18/netbox50.PNG" alt="Image Title"><br>在重点体验了Web,Windows和Android客户端后,我个人觉得: </p>
<p><strong>金山快盘和坚果铺子是国内最优秀的网盘。</strong><br><strong>金山快盘凭借着自己在行业的优势地位,做出的产品完全能满足普通用户的需求,有着很明显的亲民性。功能基本全面,但是仍然有很多细节没有注意到。Android客服端毫无悬念是最好的。</strong> </p>
<p><strong>坚果铺子最具有个性和创新性,是网盘界的一匹黑马产品。应该在把基础做好点,传输速度搞上去,以后要是碰到啥投资的,就加大每月的流量吧。</strong></p>
<p>在今后的使用上我会将需要存档的文放到金山快盘中,而我需要经常修改,或者在硬盘上不宜移动的文件我会选择使用坚果铺子。<strong>至于115网盘,我认为他是最好的分享文件类产品。今后会将博客中或者其他小众资源上传到115供大家下载。</strong> </p>
<p>而今天参加对比的其他网盘,我只能说:<strong>你们还有没有用心。QQ网盘不发力,115同步盘对比自家的115网盘显得太逊色了,华为网盘有弹出广告让我很厌烦,盛大网盘没有特色,留不住用户。云诺这个团队还很年轻,虽然有太多的不足,但是希望仍是很大。</strong></p>
<p>我在做完这个对比测评后,发现只要用心做产品,总是会有回报的。<strong>用户体验都是一点点的细节积攒起来的,不是盖的!</strong>只有对比才有进步,希望自己在今后涉及到产品设计的时候,应该考虑的能周到些,<strong>以一个用户的角度思考问题</strong>,这样问题就都凸显出来了。</p>
<p>同样希望这篇网盘的测评对你有所帮助!</p>
]]></content>
<category term="tools" scheme="http://www.yangjian.me/tags/tools/"/>
<category term="share" scheme="http://www.yangjian.me/categories/share/"/>
</entry>
<entry>
<title><![CDATA[我的2011]]></title>
<link href="http://www.yangjian.me/personal/my-2011/"/>
<id>http://www.yangjian.me/personal/my-2011/</id>
<published>2011-12-31T16:00:00.000Z</published>
<updated>2013-12-25T08:00:06.000Z</updated>
<content type="html"><![CDATA[<p>去年的这个时候,我写了一篇文章把2010年发生的事情总结了下,我今天又去看了下,有很多我都不记得了。看来是很有必要再写一次。2011即将走过,花点时间把今年总结一下,等老了也能明白自己是怎么老的。</p>
<p>好吧,说说今年都发生了什么。</p>
<ul>
<li><p>Jan.一切都从一个快乐且疯狂的新年夜晚开始了。接下来就不那么疯狂了,上大学第一次挂科,最后一次当班长,用三天学完一学期的课程……假期开心的回家过年开始学车考驾照。</p>
</li>
<li><p>Feb.拿到驾照。我是爱车之人。我只用了20天,一千元。不过发生了一个小插曲:在考科三的时候我是自己开车去的,结果还没开始考试就被交警拦下来了,警察叔叔一个敬礼,无证驾驶扣车罚款- -! 一千三了。这个月还有一段值得回忆的故事。接下来是为数不多让我印象深刻的春节,总之,甚是愉快,美好,幸福。</p>
</li>
<li><p>Mar.大二第二学期。继续学习前端的知识,做了一个后来烂尾的项目。开始后悔选择软件工程日语强化这样吃力不讨好学日语的专业。我想更专注在软件,但日语又占用我很多时间。开始学习GTD时间管理,到今天总结的时候已经有些经验了,我总结下就分享给大家。</p>
</li>
<li><p>Apr.月底是杯具的开始。开始只是有点胃痛,但没想到胃病到现在都还没有彻底好。不多说了。</p>
</li>
<li><p>May.开始做精品课网站项目。从这个项目我才知道前期的需求分析和文档的确定是多么的重要,也是知道了客户更改需求是多么的操蛋。这个项目的后期重构还有维护花费了我以及团队大量的时间和精力,可能它不是一个完美的项目,但是从中学习到的经验确是不可多得的珍贵。</p>
</li>
<li><p>Jun.Jul.考了英语四级,通过。考了日语三级,没过。开始接手学校网络中心的部分工作。在此期间我遇到了上大学以来对我最为重要的老师。不仅仅在技术上,还是生活上对我产生了很大的影响。郭涛老师由于工作原因需要离职,他之前负责学校的一些网站还有服务器,现在交给我来管理。完全陌生,而且东西都很杂,从服务器架构,数据库管理,到具体的代码实现跨度很大,一开始我很怀疑我是否能够胜任这样的工作。答案不是能不能,是我必须做到。最后完完成了近20份文档,接手了近十台服务器。一年中最辛苦的两个月。值了。</p>
</li>
<li><p>Aug.假期做了一个胃镜,擦,人生完整了。这段时期多亏了我妈,世界上最爱我的人,最该报答和感恩的人,的照顾。假期还是很愉快的度过了。恩,这就是我为什么喜欢假期的缘故。</p>
</li>
<li><p>Sep.大三第一学期。正式担任SDG软件开发组组长。瞬间感觉压力很大,肩上的担子也多了。开学的时候学校服务器老挂,大大锻炼了我处理突发事件的能力:淡定。后来组织了我们团队的纳新工作,看似简单但很下心思,后来证明用心总是有好结果的。</p>
</li>
<li><p>Oct.哦,这个月发生了太多太多的事情。带给我太多的感悟。度过了一个不愉快的十一假期。之后,有一天是我们团队纳新的首场宣讲会,就在我准备下午的演讲时候我收到了一个噩耗:我的一位挚爱的亲人去世了。一切都是那么的突然。晚上,我在台上面对一百多人开始了我的演讲,我努力的做到最好,我希望可以早点结束,这样就不必勉强的微笑了。回去以后一晚上没睡着,涌上心头的是那些抹不去的回忆。悲伤过后留给自己的是对生命意义的重新思考:有爱你的人,有你爱的人,做你爱的事。</p>
</li>
<li><p>Nov.继续新人培训。现在体会到了原来做项目,只用管理组内的人就行。现在是一个人带领30多人的团队,做事情要思前顾后考虑很多,要尽量照顾到所有人。在带领新人的过程中也总结出来些经验和教训,但是感悟最多的还是团队合作的重要性还有它的力量和魅力。</p>
</li>
<li><p>Dec.培训结束,组织了考试,最终留下的同学也算是正式加入了我们团队。开始启动三个项目。分别是校园社区,文库,某团体的官方网站。年底各种折腾,把网站迁到了这里。正如你所见。这就是2011年发生的主要事情。</p>
</li>
</ul>
<p>————————————————————华丽の分割线—————————————————————-</p>
<p>说几点感悟</p>
<ul>
<li>身体是革命的本钱,一定要健康。</li>
<li>多花点时间和亲人在一起,亲情是用任何东西都换不来的。</li>
<li>不要相信自己做不要。</li>
<li>学会淡定。</li>
<li>要成熟。</li>
<li>管理好时间。</li>
<li>勇敢面对缺点和失败。</li>
<li>坦诚相待,用心做事。</li>
<li>美好的就让它留下吧,不好的事情就去他妈的吧!</li>
</ul>
<p>愿明天更好。</p>
<p>——————————————-由于原网站调整,将去年的总结发布到这里———————————</p>
<p>2010即将走过,花点时间把今年总结一下,等老了也能明白自己是怎么老的。第一篇就从简单的写起,说说这一年都干了什么。</p>
<ul>
<li>Jan.一月:大一上结束。来大连上学,第一次出这么远门。还是很想家的。谈不上精彩,但收获不少,明白事了。</li>
<li>Feb.二月:寒假。不太愉快,就不写了。</li>
<li>Mar.大一下开始。加入SDG小组。22号我去面试,现在还记得。这是今年我最不后悔的一件事了。能说的最多的只有“谢谢”两个字。在宝哥还有不点姐的指导下,开始努力学习。从此走上了前端开发的道路,还真没打算停下来。当班长,跟同学混熟了。</li>
<li>Apr.学习HTML+CSS。脑子里面基本不会想别的了,全是margin和padding了 。这估计是那一学期最忙的时候了,天天没日没夜的Coding。很累,但很充实。这个月参加了辩论赛,N场,第一次穿西服。</li>
<li>May.学习PhotoShop。基本掌握了PS,平时没事就恶搞一下胖子的照片。事后挨揍是难免的~还是每天写到很晚,任务基本上是模仿一些其他大网站。</li>
<li>Jun.我第一个原创作品诞生了。这个月踢世界杯,开始接触Javascript。开始规划自己的职业人生。</li>
<li>Jul.SDG新版官方网站通过审批。第一次做的网站就得到了组长,老师的认同,算是开了个好头。真是幸福的一个月啊。</li>
<li>Aug.大一下结束。暑假。开始考驾照,刚过科目一。身体有点不给力。yangjian.me上线,个人主页总算成型。<br>至于其他的呢~~~哎呦,不错哦!</li>
<li>Sep.大二上开始。做新的项目“公司模板”。学习Jquery。真是好东西啊。</li>
<li>Oct.“公司模板”项目完成,通过验收。SDG又纳新了,我开始讲课了。带带新人,自己也在这个过程中不断学习。从学到教,用了7个月。</li>
<li>Nov.开始“中国房网”项目。这回只负责设计,读了很多WEB前端的书。对WEB前端有了一个全新的系统的认识。</li>
<li>Dec.优化个人网站,博客重新上线。新人学了两三个月,已经可以跟着做项目了。付出的,总会有回报。</li>
</ul>
]]></content>
<category term="总结" scheme="http://www.yangjian.me/tags/%E6%80%BB%E7%BB%93/"/>
<category term="personal" scheme="http://www.yangjian.me/categories/personal/"/>
</entry>
</feed>