-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathatom.xml
2493 lines (1867 loc) · 219 KB
/
atom.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[生命之氢]]></title>
<link href="http://shengmingzhiqing.com/atom.xml" rel="self"/>
<link href="http://shengmingzhiqing.com/"/>
<updated>2017-09-09T17:36:42+08:00</updated>
<id>http://shengmingzhiqing.com/</id>
<author>
<name><![CDATA[郝海龙]]></name>
<email><![CDATA[[email protected]]]></email>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[如何实现不翻墙同时发送微博和 Twitter]]></title>
<link href="http://shengmingzhiqing.com/blog/how-to-sync-weibo-and-twitter-with-wall.html/"/>
<updated>2016-12-18T13:09:31+08:00</updated>
<id>http://shengmingzhiqing.com/blog/how-to-sync-weibo-and-twitter-with-wall</id>
<content type="html"><![CDATA[<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150914-weibo-twitter.png" alt="微博+twitter" title="微博+twitter" /></p>
<p>刚开始用 Twitter 时，我只是把它当作一个树洞。当然这个树洞很多时候不是为了倾诉一些难以启齿的秘密，而是想把一些不吐不快而又没有太多人会听的话放到一个公开场合，体验一种「也许可能有人会看」的奇妙感觉。后来 Twitter 上的关注者多了起来，发出去的信息居然也有了回音，转而觉得这种互动也很好玩，渐渐地也成了我使用 Twitter 以及它在国内的模仿者「微博」的主要理由。既然很多时候是为了互动，为了获取回应，那么自然是越多人能够看到你的微博（Tweets）越好。同步发送微博和 Twitter 就成了我非常渴望的得到的一项服务，可是，由于众所周知的原因，国内提供这样服务的平台几乎已经找不着了（更新：大家也可以试试 <a href="https://weibo.com/erinsnowanmin">@爱尔兰_雪</a> 的 P.cat，20161218）。
<!--more--></p>
<p>于是我开始自己摸索如何才能在本地实现这一点。首先，我想到了 iPhone 上著名的自动化应用 Launch Center Pro (LCP)，也确实找到了直接用它发布 Twitter 的功能，然后，我试着做了一些整合，最终可以实现只输入一次文字，然后发送到微博和 Twitter 的功能。只是，这个流程还是存在一些问题：</p>
<ol>
<li>发布 Twitter 依然需要科学上网（这当然是我们特有的问题）；</li>
<li>在发布时，需要先按确认发布到 Twitter，然后利用 iOS 的 Share Sheets 分享到微博，本身就需要确认两次不说，Share Sheets 中寻找微博也是一种不太爽的体验。</li>
</ol>
<p>第一个问题很好解决，可以通过 IFTTT 做一个中转，然后实现不翻墙发布 Twitter，如果有需要，可以使用以下 Recipe：</p>
<blockquote>
<p><strong>推倒墙：<a href="https://ifttt.com/applets/264287p-">https://ifttt.com/applets/264287p-</a></strong><br />
注：需要在 LCP 中使用名为“tuidaoqiang”的 Trigger</p>
</blockquote>
<p>但在我遇到这个问题的时候，IFTTT 还没有原生支持微博，自己又确实不会编程，于是第二个问题搁置了很久。</p>
<p>前一段时间，IFTTT 终于支持了微博（Weibo）Channel，我突然觉得似乎已经不需要 LCP 这么麻烦了，我只需要发一条微博直接同步到 Twitter 上（或者反过来）即可。但使用了一下发现，同步的过程会有各种各样的问题，因为字数限制不一样，标签样式不一样，或者是否添加图片的原因等等。而我自己一般只需要同步纯文字的内容，这就让我又想起了使用 LCP 完成我之前的想法。基本步骤及原理如下：</p>
<ol>
<li>在 LCP 中触发一个 Action，弹出一个文本输入框，在该文本输入框中输入想要发布的内容；</li>
<li>将第 1 步中的内容拷贝到剪贴板；</li>
<li>将剪贴板内容通过 IFTTT 发布到微博；</li>
<li>将剪贴板内容通过 IFTTT （推倒墙）发布到 Twitter。</li>
</ol>
<p>整个过程只需要输入一次文本，点击一次确认（Launch），就可以同时将内容发布到微博和 Twitter——并且——不用翻墙。当然，如果你想看 Twitter 上的反馈，还是需要科学上网。</p>
<p>要实现以上这个流程并不困难，具体操作方法如下：</p>
<ol>
<li>在 IFTTT 中添加 Recipe–weiboit，以实现上述步骤中第三步。<strong>weiboit 获取地址：<a href="https://ifttt.com/applets/264288p-weiboit">https://ifttt.com/applets/264288p-weiboit</a></strong></li>
<li>在 IFTTT 中添加 Recipe–推倒墙，以实现上述步骤中第四步。<strong>「推倒墙」获取地址：<a href="https://ifttt.com/applets/264287p-">https://ifttt.com/applets/264287p-</a></strong></li>
<li>在 Launch Center Pro 中添加 Action<strong>「快速微博推」：<a href="https://launchcenterpro.com/qqjhp5">https://launchcenterpro.com/qqjhp5</a></strong>（如果你手机上已经安装了 Launch Center Pro，可以直接用手机打开这个链接安装）。</li>
</ol>
<p>至此，你就可以和我一样在不翻墙的情况下「同步」发布文字版微博和 Twitter 了。使用同样地原理，你也可以实现同步发送微博、Twitter、Facebook、App.net 等，感兴趣的话可以自己试试。</p>
<p>郝海龙<br />
2015 年 9 月 13 日<br />
2016 年 12 月 18 日 微调</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Excel 文本批量替换器]]></title>
<link href="http://shengmingzhiqing.com/blog/excel-text-replacer.html/"/>
<updated>2016-12-02T15:42:30+08:00</updated>
<id>http://shengmingzhiqing.com/blog/excel-text-replacer</id>
<content type="html"><![CDATA[<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/Excel-text-replacer-bg-design-sketch.jpeg" alt="Excel 文本批量替换器 头图" title="Excel 文本批量替换器 头图" /></p>
<p>是的，在我司产品经理的逼迫下我用 AppleScript 写了个批量处理 Excel 的 App。主要功能是针对某一文件夹下所有的 Excel 文件，批量「查找和替换」文本，严格对应区分大小写。可能各位在平时处理 Excel 文件也会有用，分享给大家。</p>
<p>（下载地址在文末）
<!--more--></p>
<h3 id="section">我想说的一些话</h3>
<p>这个应用虽然简单，但对我来说很重要，因为这不仅仅是我写的第一个应用，也印证着我一直以来对于编程的态度：我们每个人都应该学一点编程，并不是为了写出多么高大上的应用，而是为了实实在在解决一些个人遇到的非普遍性的小问题。</p>
<p>事实上，我原本也没有想过要把它打包成一个 App，但想到既然我有这样的需求，那么也会有其他人有同样的需求。于是，这就变成了我的第一个完整打包的 Mac 应用。</p>
<p>而能打包成 App 也要得益于一直以来 <a href="http://weibo.com/ibuick" title="ibuick 的微博">@ibuick</a> <a href="http://weibo.com/tinyfool" title="tinyfool 的微博">@tinyfool</a> <a href="http://weibo.com/leeyoung7" title="有才的微博">@人字拖 2 号</a> 的耳濡目染——主要是耳濡，让我了解到哪怕是 AppleScript 这样的傻瓜式脚本程序也可以打包成完整的应用，在此对他们表示感谢。</p>
<h3 id="section-1">关于图标</h3>
<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/Excel-text-replacer.png" alt="Excel 文本批量替换器 Icon" title="Excel 文本批量替换器 Icon" /></p>
<p>也许有人看过昨天 @人字拖 2 号 的「爆料」，上面这款应用的图标是一根用 Sketch 制作的冰棍，这根冰棍其实是我模仿 dribbble 上 <a href="https://dribbble.com/oliverker" title="Oliver Ker 的 dribbble 主页">Oliver Ker 先生</a>的作品，当时是作为设计练习作业做的，因为版权问题，我正式发出来的版本并没有使用这个图标。而是重新绘制了一个图标。</p>
<p>新图标的形状是一个修正液的瓶子，暗示了软件「用新的替换旧的」的意思，X 的图标表示 Excel 文件，而 Correction Script 的标签来自英文表示修正液的词 Correction Fluid。</p>
<p>坦白讲，绘制这个图标并没有花多长时间，但让我有信心能够绘制出这样一个图标，我想感谢 <a href="http://weibo.com/kevinzhow" title="周楷雯 的微博">@周楷雯 Kevin</a>，是他的 Producter 这本书让我觉得其实绘制这些 Logo 没有我想象的那么难。</p>
<h2 id="section-2">注意事项</h2>
<p>程序使用 AppleScript 编写，主要思路是让系统自动依次打开一个文件夹下所有 Excel，并按规则替换。由于没有用到直接读写 Excel 的包，为避免出错，运行过程中最好不要做其他事情。尽管如此，已经可以节约我很长时间了，昨天我处理 90 个文件，大约用了 6 分钟（比上不足，比下有余）。</p>
<p>下载地址：<a href="https://raw.githubusercontent.com/haohailong/imagebed/master/Excel-text-replacer.dmg" title="Excel 文本批量替换器">Excel 文本批量替换器</a></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[好久不见]]></title>
<link href="http://shengmingzhiqing.com/blog/long-time-no-see.html/"/>
<updated>2016-12-02T13:42:30+08:00</updated>
<id>http://shengmingzhiqing.com/blog/long-time-no-see</id>
<content type="html"><![CDATA[<p>这个博客很久没有更新了，前段时间因为 Kloudsec 关停，所以网站访问出现了一些问题。最近突然想起了搭建这个博客时认真的劲头，想想放弃挺可惜的，于是花了一点时间修正了一些解析中的问题，切回了 http 协议。虽然这样可能会降低搜索引擎的抓取权重，但暂时也没有精力去再找一个靠谱的 https 服务。</p>
<p>另外，考虑到 App.net 很久不更新了，删除了原来页面中「断章」这个标签。</p>
<p>在我没有更新的这段时间，我看到自己写的教程给很多朋友提供了帮助，收获了不少感谢，我感到非常开心。</p>
<p>在目前看来，这里将会作为我的一个实验性博客继续存在，虽然自己并非程序员，但我热爱一切酷的东西，编程即是如此。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[如何为 Mac 拼写检查设置默认语言]]></title>
<link href="http://shengmingzhiqing.com/blog/mac-spelling-check.html/"/>
<updated>2015-08-12T13:53:04+08:00</updated>
<id>http://shengmingzhiqing.com/blog/mac-spelling-check</id>
<content type="html"><![CDATA[<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150817-Mac-Spelling-Check.png" alt="Mac-Spelling-Check" title="Mac-Spelling-Check" /></p>
<p>对于大多数西文写作者来说，Mac 有一个非常重要但也经常被大家忽视的功能，即全局拼写检查。拿英文来说，在几乎所有能输入文字的地方，Mac 都可以提供即时的拼写检查（甚至自动更正）。</p>
<p>由于自己所从事工作的原因，经常需要撰写或校对一些英文文件，这个时候拼写检查的功能对我来说就尤为重要：不仅能节约时间，而且检查的效果也更为精确。但我总面临一个很诡异的问题：不知为何，系统自动识别语言时，总是把我的英文识别为「英式英文」。而我的大多数文档都是用美式英文撰写的，这样在我的电脑上一些典型的美式拼法总是会被识别为错误。比如题图中 Recognize 这个词。
<!--more--></p>
<p>之前我采用了一个比较笨的解决办法，就是手动设置拼写检查语言。于是我不得不在每次撰写或校对文章前，先依次点击 Edit → Spelling and Grammar → Show Spelling and Grammar（中文系统为「编辑 → 拼写和语法 → 显示拼写和语法」），把语言设为 U. S. English. </p>
<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150817-Mac-Spelling-Check-1.png" alt="Mac-Spelling-Check-1" title="Mac-Spelling-Check-1" /></p>
<p>但我想这事肯定有比较简便的解决方案，毕竟美国人不可能使用英式英语的拼写检查规则，他们肯定也不用每写一篇新文章就调整一次。于是，我开始在网上搜索解决方案，结果解决方案没找到，却发现了很多人和我有相同的问题，比如某英国人希望把默认的拼写检查语言设为「英式英语」，但他的系统默认却是「美式英语」。不过这件事提醒我系统确实存在着默认拼写检查语言这样一种东西。</p>
<p>于是我开始在系统偏好设置（System Preferences）里面找，结果竟然毫不费力就找到了设置方法。我直接在 System Preferences 的搜索框中搜索 Spelling（中文系统可以试试搜「拼写」），发现在 Keyboard （中文系统为「键盘 」）的 Text （中文系统为「文本」）选项卡下，点击 Spelling （拼写）下面的下拉菜单，即可设置默认的拼写检查语言。</p>
<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150817-Mac-Spelling-Check-2.png" alt="Mac-Spelling-Check-2" title="Mac-Spelling-Check-2" /></p>
<p>如果英文并不是你使用的唯一拼音文字，你可以和我一样选择保留系统的自动识别语言（Automatic by Language），然后在 Set up … （设置）下面选择 U. S. English 作为默认的英文。这样在纯英文的环境下，默认使用美式英语作为拼写检查标准，而在其他拼音文字的环境下，也会根据特定的语言进行调整。</p>
<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150817-Mac-Spelling-Check-3.png" alt="Mac-Spelling-Check-3" title="Mac-Spelling-Check-3" /></p>
<p>郝海龙<br />
2015 年 8 月 12 日</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[工具：旅行清单（Travel List）]]></title>
<link href="http://shengmingzhiqing.com/blog/app-travel-list.html/"/>
<updated>2015-08-06T13:20:20+08:00</updated>
<id>http://shengmingzhiqing.com/blog/app-travel-list</id>
<content type="html"><![CDATA[<p><img src="https://raw.githubusercontent.com/haohailong/imagebed/master/20150810-Travel-list.png" alt="Travel List App Icon" title="Travel List App Icon" /></p>
<p>我有个朋友每次旅行时都会忘记带一件本来记着要带的东西，以至于后来她索性告诉自己这是命中注定，无法改变。我的另一个朋友曾经有过到了边检才发现忘记带护照的窘境，这位朋友在后来的一次旅行前告诉我：</p>
<blockquote>
<p>我不想收拾东西，我不想收拾东西，我不想收拾东西。收拾东西对我来说是一项无止境的工作，我永远不知道什么时候算是把我该带的东西带齐，在旅行结束之前，我不可能知道我这次带的东西是不是够用。
<!--more--></p>
</blockquote>
<p>我想每一个经常旅行的人都曾经遇到过类似的问题，比如我自己，经常在旅途中翻一个本该留在包中的东西，但等到旅行结束打开家门，才发现这件东西赫然在桌子的中央。于是，我在疲惫中懊恼地放下背包，却发现自己的限量版雨伞似乎落在了酒店。</p>
<p>通常遇到这种情况我们的解决办法都是把要带的东西列一个清单，然后照着清单去整理，一般来说就不会有遗漏。但实际情况是，每次旅行前列一个清单也是一件非常恼人的事情，而且总是难免会有遗漏，这次漏这一件，下次漏那一件。</p>
<p>于是我一直都期待能有一个万用清单，每次出行前照着这个清单把东西都捋一遍，然后就可以放心离开。实际情况是，我们每次出行需要的东西都可能会不太一样，万用是不太可能，但我们可以找到一种相对接近万用的方式。</p>
<p>今天我想给大家推荐一款非常好用的 iOS 应用，名字就叫<a href="http://travellistapp.com" title="旅行清单官方网站"><strong>旅行清单（Travel List）</strong></a>。这个清单最大的特点就是预置了很多可供选择的旅行所需物品的列表。基本类别有：衣服、鞋类、饰物、个人护理用品、化妆品、小工具、证件、行李、宝宝、野营/徒步旅行、潜水、雪上运动等等；每一类别下面又会有各类相应的物品，比如个人护理用品中会有牙膏牙刷，小工具中会有手机、钥匙等，可以满足绝大多数人出行的需求。</p>
<p>如果某件你需要带的东西列表中原来没有，也可以通过手动添加，而当你下一次要列旅行清单时，你会发现你添加过的物品赫然在列。</p>
<p>基本上旅行几次之后，你会有自己对旅行的分类，比如出国、短途、回老家、户外活动等等，每一类别需要带的东西其实都差不多。久而久之，你就会有一个针对某一类别旅行的万用清单了。</p>
<p>当然，现在的「旅行清单」还不支持复制之前的清单，这应该算是它最大的不足，不过无论如何它已经是最接近我心目中的完美的旅行清单应用了。</p>
<p>对了，这并不是一则商业广告。</p>
<p>郝海龙<br />
2015 年 8 月 6 日<br />
题图为旅行清单（Travel List）的图标</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Octopress 教程目录]]></title>
<link href="http://shengmingzhiqing.com/blog/octopress-tutorials-toc.html/"/>
<updated>2014-05-06T21:50:25+08:00</updated>
<id>http://shengmingzhiqing.com/blog/octopress-tutorials-toc</id>
<content type="html"><![CDATA[<p class="info">经过近十天的撰写，这份被自己当做备忘录的 Octopress 教程终于算是告一段落了，相信遵照这份教程可以生成一个不错的 Octopress 独立博客。当然正如在教程里说的，对于主题的修改是「永远的第二步」，所以我不敢说这份教程已经完成，又或者说永远都不可能完成。姑且把完成的部分的目录放在这里，供大家参考。</p>
<!--more-->
<div class="bordergrey">
<h2><a href="http://shengmingzhiqing.com/blog/everybody-should-build-his-own-writing-space.html/" target="_blank">每个人都该为自己打造专属的写作环境</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/everybody-should-build-his-own-writing-space.html/#section">我的博客史</a></li>
<li><a href="http://shengmingzhiqing.com/blog/everybody-should-build-his-own-writing-space.html/#section-1">每个人都该为自己打造专属的写作环境</a></li>
<li><a href="http://shengmingzhiqing.com/blog/everybody-should-build-his-own-writing-space.html/#wordpress--octopress">WordPress & Octopress</a></li>
<li><a href="http://shengmingzhiqing.com/blog/everybody-should-build-his-own-writing-space.html/#octopress-">关于 Octopress 搭建</a></li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/" target="_blank">Octopress 搭建流程 – Github Pages</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#octopress--github-pages">1. 为什么是 Octopress & Github Pages?</a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#section">2. 准备工作</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#git-2">2.1 安装 git </a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#ruby-3">2.2 安装 Ruby </a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#github-">2.3 注册 Github 账号</a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#section-1">2.4 域名指向（可选）</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#octopress">3. 本地安装 Octopress</a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#octopress--github-pages-1">4. 将 Octopress 部署到 Github Pages</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#repository">4.1 新建库 (Repository)</a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#octopress--github-pages-2">4.2 将本地部署的 Octopress 发布到 Github Pages</a></li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#section-2">4.3 使用自己的域名（可选）</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#section-3">5. 发布新贴</a></li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/" target="_blank">精益修改 (1) – 基本配置</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section">1. 永远的第二步</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-1">2. 简要说明</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-2">3. 新主题安装</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-3">4. 基本配置</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-4">4.1 域名，网站标题，作者</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-5">4.2 日期格式</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-6">4.3 文章链接形式</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-7">4.4 分类目录前缀</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#section-8">4.5「继续阅读」按钮</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#markdown-">4.6 修改 Markdown 文件后缀</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#markdown--1">4.7 修改默认 Markdown 解释器</a></li>
</ul>
</li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/" target="_blank">精益修改 (2) – 主题修改</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section">1. 页面相关设置</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-1">1.1 新建页面</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-2">1.2 添加公益 404 页面</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-3">1.3 添加页面和其他链接至导航栏</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-4">2. 主题汉化</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-5">2.1 汉化导航栏</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-6">2.2 汉化移动设备导航栏</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-7">2.3 汉化归档页面</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-8">2.4 汉化侧边栏</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-9">2.5 汉化其他部分</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-10">3. 网站底部</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-11">4. 添加侧边栏</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/#section-12">5. 添加评论系统</a></li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/" target="_blank">精益修改 (3) – 样式修改</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section">1. 网站布局</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section-1">1.1 修改框架宽度</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section-2">1.2 修改内容宽度</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section-3">2. 页面字体</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section-4">3. 修改链接样式</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/#section-5">4. 给中英文间添加空格</a></li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/" target="_blank">精益修改 (4) – 元素美化</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#coderay-block-">1. CodeRay Block 代码块插件</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#kramdown-coderay">1.1 安装 kramdown, CodeRay</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#section">1.2 修改样式表</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#section-1">1.3 使用方法</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#caption">2. 给图片添加说明 (Caption)</a> <ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#section-2">2.1 制作并添加插件</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#section-3">2.2 修改样式表</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#section-4">2.3 使用方法</a></li>
</ul>
</li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/#fontawesome">3. 使用 FontAwesome</a></li>
</ul>
<h2><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-5.html/" target="_blank">精益修改 (5) – 必备功能</a></h2>
<ul>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-5.html/#section">1. 侧边栏显示分类目录</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-5.html/#section-1">2. 自动生成文章目录</a></li>
<li><a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-5.html/#section-2">3. 自动添加文章修改记录</a></li>
</ul>
</div>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Octopress 精益修改 (5)]]></title>
<link href="http://shengmingzhiqing.com/blog/octopress-lean-modification-5.html/"/>
<updated>2014-05-06T18:31:11+08:00</updated>
<id>http://shengmingzhiqing.com/blog/octopress-lean-modification-5</id>
<content type="html"><![CDATA[<ul id="markdown-toc">
<li><a href="#section">1. 侧边栏显示分类目录</a></li>
<li><a href="#section-1">2. 自动生成文章目录</a></li>
<li><a href="#section-2">3. 自动添加文章修改记录</a></li>
</ul>
<h2 id="section">1. 侧边栏显示分类目录</h2>
<p>随着文章数量的增多，为了更方便检索，我们需要对文章进行整理。整理的方式一般分为两种：1. 「分类目录」，这是一种收敛式的整理方式，也是 Octopress 的默认方式；2. 「标签」，这是一种扩散式的整理方式，使用这种方式的典范是 <a href="http://www.tumblr.com">Tumblr</a> 轻博客。</p>
<p>对我个人而言，搭建这个新博客主要是为了存放自己撰写的与理工（目前看来是 IT 和经济学）相关的文章，主题比较收敛，本身文章也不多，所以采用了 Octopress 默认的「分类目录」整理方式。<!--more--></p>
<p>但我们的目的是方便检索，仅仅给每篇文章设置分类还不够，还需要专门找个地方显示分类列表。由于 Wordpress 的习惯，我更愿意把分类目录放到侧边栏显示。那么该如何实现这一功能呢？在自己动手写代码之前，先看看有没有巨人的肩膀可以踩是个非常好的习惯。Google 之后，我们找到这样一篇文章：《<a href="http://codemacro.com/2012/07/18/add-category-list-to-octopress/">为 octopress 添加分类(category)列表</a>》。参考这篇文章的方法，具体实现步骤如下：</p>
<p>首先，用如下代码新建文本文件，另存为 <code>category_list_tag.rb</code>，并把这个文件放到 <code>plugins</code> 目录下。</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>plugins/category_list_tag.rb </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="keyword">module</span> <span class="class">Jekyll</span>
<span class="keyword">class</span> <span class="class">CategoryListTag</span> < <span class="constant">Liquid</span>::<span class="constant">Tag</span>
<span class="keyword">def</span> <span class="function">render</span>(context)
html = <span class="string"><span class="delimiter">"</span><span class="delimiter">"</span></span>
categories = context.registers[<span class="symbol">:site</span>].categories.keys
categories.sort.each <span class="keyword">do</span> |category|
posts_in_category = context.registers[<span class="symbol">:site</span>].categories[category].size
category_dir = context.registers[<span class="symbol">:site</span>].config[<span class="string"><span class="delimiter">'</span><span class="content">category_dir</span><span class="delimiter">'</span></span>]
category_url = <span class="constant">File</span>.join(category_dir, category.gsub(<span class="regexp"><span class="delimiter">/</span><span class="content">_|</span><span class="char">\P</span><span class="content">{Word}</span><span class="delimiter">/</span></span>, <span class="string"><span class="delimiter">'</span><span class="content">-</span><span class="delimiter">'</span></span>).gsub(<span class="regexp"><span class="delimiter">/</span><span class="content">-{2,}</span><span class="delimiter">/</span></span>, <span class="string"><span class="delimiter">'</span><span class="content">-</span><span class="delimiter">'</span></span>).downcase)
html << <span class="string"><span class="delimiter">"</span><span class="content"><li class='category'><a href='http://shengmingzhiqing.com/</span><span class="inline"><span class="inline-delimiter">#{</span>category_url<span class="inline-delimiter">}</span></span><span class="content">/'></span><span class="inline"><span class="inline-delimiter">#{</span>category<span class="inline-delimiter">}</span></span><span class="content"> (</span><span class="inline"><span class="inline-delimiter">#{</span>posts_in_category<span class="inline-delimiter">}</span></span><span class="content">)</a></li></span><span class="char">\n</span><span class="delimiter">"</span></span>
<span class="keyword">end</span>
html
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="constant">Liquid</span>::<span class="constant">Template</span>.register_tag(<span class="string"><span class="delimiter">'</span><span class="content">category_list</span><span class="delimiter">'</span></span>, <span class="constant">Jekyll</span>::<span class="constant">CategoryListTag</span>)</pre></div>
</div>
</figure></notextile></div>
<p>然后我们使用如下代码新建 <code>category_list.html</code> 文件，并放到 <code>source/_includes/custom/asides/</code> 文件夹下。</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>source/_includes/custom/asides/category_list.html </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="tag"><section></span>
<span class="tag"><h1></span>Categories<span class="tag"></h1></span>
<span class="tag"><ul</span> <span class="attribute-name">id</span>=<span class="string"><span class="delimiter">"</span><span class="content">categories</span><span class="delimiter">"</span></span><span class="tag">></span>
{% category_list %}
<span class="tag"></ul></span>
<span class="tag"></section></span></pre></div>
</div>
</figure></notextile></div>
<p>最后，我们在 <code>_config.yml</code> 文件中 <code>default_asides:</code> 后面的方括号中，添加一项 <code>custom/asides/category_list.html</code>，放到你喜欢的位置。</p>
<p>这样我们就可以在侧边栏看到分类目录列表了。不过且慢，每个功能实现之后，我们还是测试一下为好。如果你的分类名称中有中文，你就会发现这个链接并不能正确指向该分类的页面，那么该怎么办呢？</p>
<p>打开 <code>plugins/category_list_tag.rb</code>，找到如下一行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>plugins/category_list_tag.rb </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
html << <span class="string"><span class="delimiter">"</span><span class="content"><li class='category'><a href='http://shengmingzhiqing.com/</span><span class="inline"><span class="inline-delimiter">#{</span>category_url<span class="inline-delimiter">}</span></span><span class="content">/'></span><span class="inline"><span class="inline-delimiter">#{</span>category<span class="inline-delimiter">}</span></span><span class="content"> (</span><span class="inline"><span class="inline-delimiter">#{</span>posts_in_category<span class="inline-delimiter">}</span></span><span class="content">)</a></li></span><span class="char">\n</span><span class="delimiter">"</span></span>
</pre></div>
</div>
</figure></notextile></div>
<p>替换为：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>plugins/category_list_tag.rb </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
html << <span class="string"><span class="delimiter">"</span><span class="content"><li class='category'><a href='http://shengmingzhiqing.com/blog/categories/</span><span class="inline"><span class="inline-delimiter">#{</span>category.to_url.downcase<span class="inline-delimiter">}</span></span><span class="content">/'></span><span class="inline"><span class="inline-delimiter">#{</span>category<span class="inline-delimiter">}</span></span><span class="content"> (</span><span class="inline"><span class="inline-delimiter">#{</span>posts_in_category<span class="inline-delimiter">}</span></span><span class="content">)</a></li></span><span class="char">\n</span><span class="delimiter">"</span></span>
</pre></div>
</div>
</figure></notextile></div>
<p>完工。</p>
<h2 id="section-1">2. 自动生成文章目录</h2>
<p>博客文章不想报纸杂志，自然有长有短：短文章可以短到只有标题，而长文章往往会分为好多个章节。为了方便阅读，我们往往会把一篇长文章分为好几篇来发布，比如我们的「Octopress 精益修改」，但即便如此，有些文章还是会超出最适宜阅读的长度，同样比如我们这个 Octopress 教程。那么有没有什么办法能够解决这个不宜阅读的问题呢？</p>
<p>我们知道，使用 Markdown 语言撰写的文章，只要你把章节题目标清楚，本身会生成一个内在的文档结构，如果我们直接把这个结构提取出来，作为文章的目录，放到文章开头，这样就能一举解决我们刚才所说的问题。那么有没有这样的实现方式呢？带着这个问题，我们找到了这样一篇文章：<a href="http://blog.riemann.cc/2013/04/10/table-of-contents-in-octopress/"><em>Table Of Contents in Octopress</em></a>，参考此文，具体实现步骤如下：</p>
<p>首先，请使用 kramdown 作为 Octopress 默认的 Markdown 解析器，具体如何设置请参照先前的教程。</p>
<p>然后只要你在想插入目录的地方，插入如下一段代码即可：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
* list element with functor item
{:toc}
</pre></div>
</div>
</figure></notextile></div>
<p>没错，就这么简单。当然你可能希望能在这个目录前面自动添加，类似本文前面的「本页目录」四个字，只需要修改样式表 <code>sass/custom/_style.scss</code>，添加如下代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_style.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
#markdown-toc:before {
content: "本页目录";
font-weight: bold;
}</pre></div>
</div>
</figure></notextile></div>
<p>最后，可能还有一个问题，有些朋友和我一样会在文章中使用 <code><!-- more --></code> 标签，在首页只显示部分文章，这时这个目录生成可能就会出现错误，而且事实上我们也没必要在文章的摘要中放置一个目录，所以我们可以在 <code>sass/custom/_style.scss</code> 添加如下代码，让主页不出现目录：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_style.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
.blog-index #markdown-toc {
display: none;
}</pre></div>
</div>
</figure></notextile></div>
<p>如果你对这个目录的样式不满意，还可以在样式表中进一步修改，改成什么样就看你个人喜好了。</p>
<h2 id="section-2">3. 自动添加文章修改记录</h2>
<p><a href="http://shengmingzhiqing.com/blog/setup-octopress-with-github-pages.html/#octopress--github-pages">前面我们说过</a>，写文章，建网站都难免要修改，而且会反复修改。如果能把这些修改过程记录下来，本身就是很好的学习资料，那么有没有办法实现这一点呢？Git 就是干这个的，而且也正是我们前面说的 Octopress + Github Pages 相比其他博客系统的优势之一。</p>
<p>事实上，我们每一次更新文章后提交至 Github 的 Commit 就可以当做是文章的修改记录和说明，如果我们能让这个信息自动出现在文章末尾，就可以实现我们想要的功能。同样，百事未行先 Google，我们发现了这样一篇文章：<a href="http://jhshi.me/2013/11/17/post-revision-plugin-for-octopress/"><em>Post Revision Plugin for Octopress</em></a>，参考此文，具体实现步骤如下：</p>
<ol>
<li>
<p>到这里 <a href="http://s.olo.la/a6cM">http://s.olo.la/a6cM</a> 找到 Octopress Post Revision 插件。</p>
</li>
<li>
<p>复制 <code>plugins/revision.rb</code> 到你自己的 <code>plugins</code> 目录下。</p>
</li>
<li>
<p>复制 <code>source/_includes/post/revision.html</code> 到你自己的 <code>source/_includes/post</code> 目录下。</p>
</li>
<li>
<p>在 <code>_config.yml</code> 文件中，添加你的 Github 账户信息，如下： <br /></p>
</li>
</ol>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>_config.yml </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="key">github_user</span>: <span class="comment"># 这你填你的 Github 用户名</span>
<span class="key">github_repo</span>: <span class="comment"># 这里填你博客的库名，即 [your_user_name].github.io</span>
</pre></div>
</div>
</figure></notextile></div>
<ol>
<li>在 <code>source/_layouts/post.html</code> 的 <code><footer></code> 和 <code></footer></code> 之间，你想要的位置，添加如下代码，此处即为文章修改记录的显示位置：<br /></li>
</ol>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>source/_layouts/post.html </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
{% include revision.html %}</pre></div>
</div>
</figure></notextile></div>
<p>这样，我们就可以在文章末尾看到本文的修改记录了。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Octopress 精益修改 (4)]]></title>
<link href="http://shengmingzhiqing.com/blog/octopress-lean-modification-4.html/"/>
<updated>2014-05-06T00:52:14+08:00</updated>
<id>http://shengmingzhiqing.com/blog/octopress-lean-modification-4</id>
<content type="html"><![CDATA[<ul id="markdown-toc">
<li><a href="#coderay-block-">1. CodeRay Block 代码块插件</a> <ul>
<li><a href="#kramdown-coderay">1.1 安装 kramdown, CodeRay</a></li>
<li><a href="#section">1.2 修改样式表</a></li>
<li><a href="#section-1">1.3 使用方法</a></li>
</ul>
</li>
<li><a href="#caption">2. 给图片添加说明 (Caption)</a> <ul>
<li><a href="#section-2">2.1 制作并添加插件</a></li>
<li><a href="#section-3">2.2 修改样式表</a></li>
<li><a href="#section-4">2.3 使用方法</a></li>
</ul>
</li>
<li><a href="#fontawesome">3. 使用 FontAwesome</a></li>
</ul>
<h2 id="coderay-block-">1. CodeRay Block 代码块插件</h2>
<p>用 Octopress 写博客的很多朋友需要在博客内容当中添加代码块，毕竟这是一个「为黑客而生的博客框架」。Octopress 除了可以使用 Markdown 语言默认的代码块实现方式之外，本身也集成了很强大的代码块 (Code Block) 插件，按照<a href="http://octopress.org/docs/plugins/codeblock/">官方的说明</a>调用即可，比如：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption><span>节选自比特币 Python API </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>
<span class="line-number">2</span>
<span class="line-number">3</span>
<span class="line-number">4</span>
<span class="line-number">5</span>
</pre></td><td class="code"><pre><code class="python"><span class="line"><span class="n">rv</span> <span class="o">=</span> <span class="n">conn</span><span class="o">.</span><span class="n">validateaddress</span><span class="p">(</span><span class="n">foo</span><span class="p">)</span>
</span><span class="line"><span class="k">if</span> <span class="n">rv</span><span class="o">.</span><span class="n">isvalid</span><span class="p">:</span>
</span><span class="line"> <span class="k">print</span> <span class="s">"The address that you provided is valid"</span>
</span><span class="line"><span class="k">else</span><span class="p">:</span>
</span><span class="line"> <span class="k">print</span> <span class="s">"The address that you provided is invalid, please correct"</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>官方的 Code Block 插件支持语法高亮，本身的显示效果也非常不错，可以与博客大背景的深色形成呼应。但如果你的文章中出现大量的代码块，黑色背景看起来可能不那么舒服。这时，你可能想要使用浅色系的代码块，比如：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>节选自比特币 Python API </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
rv = conn.validateaddress(foo)
<span class="keyword">if</span> rv.isvalid:
<span class="keyword">print</span> <span class="string"><span class="delimiter">"</span><span class="content">The address that you provided is valid</span><span class="delimiter">"</span></span>
<span class="keyword">else</span>:
<span class="keyword">print</span> <span class="string"><span class="delimiter">"</span><span class="content">The address that you provided is invalid, please correct</span><span class="delimiter">"</span></span>
</pre></div>
</div>
</figure></notextile></div>
<!--more-->
<p>最早看到这种风格的显示是在 <a href="http://blog.codebykat.com/2013/05/23/gorgeous-octopress-codeblocks-with-coderay/">Kat Hagan 的博客</a>，她在文章中介绍了一种新的语法高亮工具——<a href="http://coderay.rubychan.de">CodeRay</a>，使用这种工具即可实现上面浅色圆角的代码块。作者同时也是一位极具分享精神的 Web 开发者，为了方便大家使用 CodeRay，她还专门制作了一个可直接安装的 Octopress 插件。</p>
<p>但是她这个插件取消了 CodeRay 自带的行号功能，在当你需要指出某一行代码时，就非常不方便。为了解决这个问题，<a href="http://www.fritz-hut.com/2013/11/24/github-style-code-highlighting-for-octopress/">Jan Stevens</a> 在 Kat 的插件基础上，开发了可以添加行号的 CodeRay 插件，但为了适应他自己博客的风格，同时也写了新的样式表。</p>
<p>由于 Kat 用的是 Octopress 默认主题，从总体风格上而言，Kat 的插件样式更适合我们的博客，于是我尝试着用 Kat 的样式表配合 Jan 的插件使用，在代码块没有标题框 (Caption) 的情况下表现完美。但一旦加上标题框，问题就出现了：代码块主体部分与标题框的连接处出现了不必要的圆角，显得非常难看。为了解决这一问题，我在他们的基础上修改了 Coderay Block 插件，如果你需要，在这里：<a href="http://s.olo.la/iqLp">Octopress CodeRay Block</a>.</p>
<p>具体安装和使用方法如下：</p>
<h3 id="kramdown-coderay">1.1 安装 kramdown, CodeRay</h3>
<p>首先你需要在你的博客程序中安装 kramdown 和 CodeRay（如果你已经安装过，则可以跳过此步）：</p>
<p>在 <code>Gemfile</code> 中添加如下两行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
gem <span class="string"><span class="delimiter">'</span><span class="content">kramdown</span><span class="delimiter">'</span></span>
gem <span class="string"><span class="delimiter">'</span><span class="content">coderay</span><span class="delimiter">'</span></span>
</pre></div>
</div>
</figure></notextile></div>
<p>在终端执行如下命令：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
bundle install
</pre></div>
</div>
</figure></notextile></div>
<p>然后修改 <code>_config.yml</code> 文件中相关内容如下：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>_config.yml </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="key">markdown</span>: <span class="string"><span class="content">kramdown</span></span>
<span class="key">kramdown</span>:
<span class="key">use_coderay</span>: <span class="string"><span class="content">true</span></span>
<span class="key">coderay</span>:
<span class="key">coderay_line_numbers</span>: <span class="string"><span class="content">table</span></span>
<span class="key">coderay_css</span>: <span class="string"><span class="content">class</span></span>
</pre></div>
</div>
</figure></notextile></div>
<p>其中 <code>coderay_line_numbers: table</code> 表示激活 CodeRay 的行号功能。</p>
<h3 id="section">1.2 修改样式表</h3>
<p>把 <code>/sass/custom/_coderay.scss</code> 文件复制到你自己的 <code>/sass/custom/</code> 文件夹下。</p>
<p>把 <code>/sass/custom/_styles.scss</code> <strong>文件中的代码</strong>添加到你自己的 <code>/sass/custom/_styles.scss</code>文件夹中。</p>
<p>安装完成。</p>
<h3 id="section-1">1.3 使用方法</h3>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
{ <span class="string"><span class="delimiter">% </span><span class="content">coderay</span><span class="delimiter"> </span></span>[<span class="key">lang</span>:lang] [<span class="key">linenos</span>:<span class="predefined-constant">true</span>|<span class="predefined-constant">false</span>(default)] [title] [url] [link text] % }
代码片段
{ <span class="string"><span class="delimiter">% </span><span class="content">endcoderay</span><span class="delimiter"> </span></span>% }
</pre></div>
</div>
</figure></notextile></div>
<p>你可以看到这个使用方法与官方的 CodeBlock 插件非常像，其中：<code>lang:</code> 定义了代码的语言，<code>linenos:</code> 定义了是否显示行号（默认不显示），<code>title</code> 是代码框标题，<code>url</code> 是链接，<code>link text</code> 是链接文本。</p>
<h2 id="caption">2. 给图片添加说明 (Caption)</h2>
<p>在我们发布文章的时候，难免会插入图片。你可以把你想插入的图片（比如 dream.jpg）放到 <code>source/images/</code> 文件夹下。重新生成部署站点之后，图片的地址为 <code>{{ root_url }}/source/images/dream.jpg</code>，当然你也可以给 images 文件夹下再添加其他文件夹，只要你加到图片最终的路径上即可。</p>
<p>具体使用图片时，官方自带了图片插件 (Image Tag)，使用非常方便，具体方法可以参考<a href="http://octopress.org/docs/plugins/image-tag/">官方说明</a>。但有时候，我们需要给图片添加说明 (Caption)，比如在我的文章「<a href="http://shengmingzhiqing.com/blog/why-enter-key-is-huiche-in-chinese.html/">为什么「Enter 键」要被翻译为「回车键」？</a>」中的第二张图。这时官方的插件就显得不够用了，参照 <a href="http://blog.zerosharp.com/image-captions-for-octopress/"><em>Image Captions for Octopress</em></a> , 我们可以按如下步骤实现想要的功能：</p>
<h3 id="section-2">2.1 制作并添加插件</h3>
<p>首先新建一个文本文件，复制如下代码，另存为 <code>image_caption_tag.rb</code> 文件，注意要使用 .rb 后缀。然后再把这个文件放到 <code>plugins</code> 目录下。</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>plugins/image_caption_tag.rb </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="comment"># Title: Image tag with caption for Jekyll</span>
<span class="comment"># Description: Easily output images with captions</span>
<span class="keyword">module</span> <span class="class">Jekyll</span>
<span class="keyword">class</span> <span class="class">CaptionImageTag</span> < <span class="constant">Liquid</span>::<span class="constant">Tag</span>
<span class="instance-variable">@img</span> = <span class="predefined-constant">nil</span>
<span class="instance-variable">@title</span> = <span class="predefined-constant">nil</span>
<span class="instance-variable">@class</span> = <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="instance-variable">@width</span> = <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="instance-variable">@height</span> = <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="keyword">def</span> <span class="function">initialize</span>(tag_name, markup, tokens)
<span class="keyword">if</span> markup =~ <span class="regexp"><span class="delimiter">/</span><span class="content">(</span><span class="char">\S</span><span class="content">.*</span><span class="char">\s</span><span class="content">+)?(https?:</span><span class="char">\/</span><span class="char">\/</span><span class="content">|</span><span class="char">\/</span><span class="content">)(</span><span class="char">\S</span><span class="content">+)(</span><span class="char">\s</span><span class="content">+</span><span class="char">\d</span><span class="content">+</span><span class="char">\s</span><span class="content">+</span><span class="char">\d</span><span class="content">+)?(</span><span class="char">\s</span><span class="content">+.+)?</span><span class="delimiter">/</span><span class="modifier">i</span></span>
<span class="instance-variable">@class</span> = <span class="global-variable">$1</span> || <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="instance-variable">@img</span> = <span class="global-variable">$2</span> + <span class="global-variable">$3</span>
<span class="keyword">if</span> <span class="global-variable">$5</span>
<span class="instance-variable">@title</span> = <span class="global-variable">$5</span>.strip
<span class="keyword">end</span>
<span class="keyword">if</span> <span class="global-variable">$4</span> =~ <span class="regexp"><span class="delimiter">/</span><span class="char">\s</span><span class="content">*(</span><span class="char">\d</span><span class="content">+)</span><span class="char">\s</span><span class="content">+(</span><span class="char">\d</span><span class="content">+)</span><span class="delimiter">/</span></span>
<span class="instance-variable">@width</span> = <span class="global-variable">$1</span>
<span class="instance-variable">@height</span> = <span class="global-variable">$2</span>
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="keyword">super</span>
<span class="keyword">end</span>
<span class="keyword">def</span> <span class="function">render</span>(context)
output = <span class="keyword">super</span>
<span class="keyword">if</span> <span class="instance-variable">@img</span>
<span class="string"><span class="delimiter">"</span><span class="content"><span class='</span><span class="inline"><span class="inline-delimiter">#{</span>(<span class="string"><span class="delimiter">'</span><span class="content">caption-wrapper </span><span class="delimiter">'</span></span> + <span class="instance-variable">@class</span>).rstrip<span class="inline-delimiter">}</span></span><span class="content">'></span><span class="delimiter">"</span></span> +
<span class="string"><span class="delimiter">"</span><span class="content"><img class='caption' src='</span><span class="inline"><span class="inline-delimiter">#{</span><span class="instance-variable">@img</span><span class="inline-delimiter">}</span></span><span class="content">' width='</span><span class="inline"><span class="inline-delimiter">#{</span><span class="instance-variable">@width</span><span class="inline-delimiter">}</span></span><span class="content">' height='</span><span class="inline"><span class="inline-delimiter">#{</span><span class="instance-variable">@height</span><span class="inline-delimiter">}</span></span><span class="content">' title='</span><span class="inline"><span class="inline-delimiter">#{</span><span class="instance-variable">@title</span><span class="inline-delimiter">}</span></span><span class="content">'></span><span class="delimiter">"</span></span> +
<span class="string"><span class="delimiter">"</span><span class="content"><span class='caption-text'></span><span class="inline"><span class="inline-delimiter">#{</span><span class="instance-variable">@title</span><span class="inline-delimiter">}</span></span><span class="content"></span></span><span class="delimiter">"</span></span> +
<span class="string"><span class="delimiter">"</span><span class="content"></span></span><span class="delimiter">"</span></span>
<span class="keyword">else</span>
<span class="string"><span class="delimiter">"</span><span class="content">Error processing input, expected syntax: <img class=</span><span class="delimiter">"</span></span>[<span class="keyword">class</span> <span class="class">name</span>(s)]<span class="string"><span class="delimiter">"</span><span class="content"> src=</span><span class="delimiter">"</span></span>/url/to/image<span class="string"><span class="delimiter">"</span><span class="content"> title=</span><span class="delimiter">"</span></span>[width height] [title text]<span class="string"><span class="delimiter">"</span><span class="content"> ></span><span class="delimiter">"</span></span>
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="keyword">end</span>
<span class="constant">Liquid</span>::<span class="constant">Template</span>.register_tag(<span class="string"><span class="delimiter">'</span><span class="content">imgcap</span><span class="delimiter">'</span></span>, <span class="constant">Jekyll</span>::<span class="constant">CaptionImageTag</span></pre></div>
</div>
</figure></notextile></div>
<h3 id="section-3">2.2 修改样式表</h3>
<p>在 <code>sass/base/_utilities.scss</code> 文件中添加如下几行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/base/_utilities.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="directive">@mixin</span> <span class="error">r</span><span class="error">e</span><span class="error">s</span><span class="error">e</span><span class="error">t</span><span class="error">-</span><span class="error">s</span><span class="error">h</span><span class="error">a</span><span class="error">d</span><span class="error">o</span><span class="error">w</span><span class="error">-</span><span class="error">b</span><span class="error">o</span><span class="error">x</span>() {
<span class="directive">@include</span> <span class="error">s</span><span class="error">h</span><span class="error">a</span><span class="error">d</span><span class="error">o</span><span class="error">w</span><span class="error">-</span><span class="error">b</span><span class="error">o</span><span class="error">x</span>(<span class="float">0px</span>, <span class="float">0px</span>, <span class="float">0px</span>);
}</pre></div>
</div>
</figure></notextile></div>
<p>最后，打开 <code>sass/partials/_blog.scss</code> 文件，作如下修改，其中减号表示删掉该行，加号表示新添该行：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/partials/_blog.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="tag">article</span> {
<span class="key">font-size</span>: <span class="float">2.0em</span>; <span class="key">font-style</span>: <span class="value">italic</span>;
<span class="key">line-height</span>: <span class="float">1.3em</span>;
}
<span class="error">-</span> <span class="tag">img</span>, <span class="tag">video</span>, <span class="class">.flash-video</span> {
+ <span class="key">img</span>, <span class="key">video</span>, .<span class="key">flash-video</span>, .<span class="key">caption-wrapper</span> {
<span class="directive">@extend</span> .<span class="key">flex-content</span>;
<span class="directive">@extend</span> .<span class="key">basic-alignment</span>;
<span class="directive">@include</span> <span class="key">shadow-box</span>;
+ <span class="error">&</span>.<span class="key">caption</span> {
+ <span class="directive">@include</span> <span class="key">reset-shadow-box</span>;
+ }
+ }
+ .<span class="key">caption-wrapper</span> {
+ <span class="key">display</span>: <span class="value">inline-block</span>;
+ <span class="key">margin-bottom</span>: <span class="float">10px</span>;
+ .<span class="key">caption-text</span> {
+ <span class="key">background</span>: <span class="color">#fff</span>;
+ <span class="key">text-align</span>: <span class="value">center</span>;
+ <span class="key">font-size</span>: <span class="float">.8em</span>;
+ <span class="key">color</span>: <span class="color">#666</span>;
+ <span class="key">display</span>: <span class="value">block</span>;
+ }
}
<span class="key">video</span>, .<span class="key">flash-video</span> { <span class="key">margin</span>: <span class="float">0</span> <span class="value">auto</span> <span class="float">1.5em</span>; }
<span class="key">video</span> { <span class="key">display</span>: <span class="value">block</span>; <span class="key">width</span>: <span class="float">100%</span>; }</pre></div>
</div>
</figure></notextile></div>
<h3 id="section-4">2.3 使用方法</h3>
<p>按照如下代码将图片插入文中：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
<span <span class="keyword">class</span>=<span class="string"><span class="delimiter">'</span><span class="content">caption-wrapper</span><span class="delimiter">'</span></span>><img <span class="keyword">class</span>=<span class="string"><span class="delimiter">'</span><span class="content">caption</span><span class="delimiter">'</span></span> src=<span class="string"><span class="delimiter">'</span><span class="content">/right]</span><span class="delimiter">'</span></span> width=<span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span> height=<span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span> title=<span class="string"><span class="delimiter">'</span><span class="content">[url] [caption] [width] [height] [title text] [alt text]</span><span class="delimiter">'</span></span>><span <span class="keyword">class</span>=<span class="string"><span class="delimiter">'</span><span class="content">caption-text</span><span class="delimiter">'</span></span>>[url] [caption] [width] [height] [title text] [alt text]<<span class="regexp"><span class="delimiter">/</span><span class="content">span><</span><span class="delimiter">/</span><span class="modifier">s</span></span>pan>
</pre></div>
</div>
</figure></notextile></div>
<p>其中，<code>[left/right]</code> 是表示图片显示在页面上的位置，<code>[url]</code> 是图片完整链接，<code>[caption]</code> 是图片说明，<code>[width]</code> 和 <code>[height]</code> 分别是图片的宽度和高度，<code>[title]</code> 是图片标题，<code>[alt text]</code> 是图片替代文字。</p>
<p>有必要区别一下 <code>[caption]</code>, <code>[title]</code>, 和 <code>[alt text]</code> 三个图片属性。<code>[caption]</code> 指显示在图片下方的说明文字，<code>[title]</code> 指鼠标悬停在图片上时显示出来的文字，<code>[alt text]</code> 指图片无法加载时，该图片的位置所显示的文字。</p>
<h2 id="fontawesome">3. 使用 FontAwesome</h2>
<p>装饰网站和撰写文章，不可避免的要使用到一些 Logo 和图标，对于一个非设计专业人士来说，该如何轻松获取图标呢？这里有一个巨大的图标库 <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a>，事实上，我博客导航栏和侧边栏使用的 Logo 就来自 Font Awesome.</p>
<p>要使用 Font Awesome，你只需要简单地在 <code>source/_includes/custom/head.html</code> 中添加如下一行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>source/_includes/custom/head.html</span><a href="http://fortawesome.github.io/Font-Awesome/get-started/">link</a></figcaption> <div class="CodeRay">
<div class="code"><pre>
<span class="tag"><link</span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">stylesheet</span><span class="delimiter">"</span></span><span class="tag">></span>
</pre></div>
</div>
</figure></notextile></div>
<p>安装工作就完成了。然后你看中哪个 Logo，直接输入官方的 Logo 代码，就可以让 Logo 出现在页面相应位置。比如你想显示照相机的 Logo：</p>
<i class="fa fa-camera-retro fa-5x"></i>
<p>你只需要输入如下代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
<i class="fa fa-camera-retro fa-5x"></i></pre></div>
</div>
</figure></notextile></div>
<p>有时候 Font Awesome 可能会出现与 kramdown 解析器相冲突的情况，导致全局样式发生变化，这是你只需要在 Logo 的代码前后分别添加 <code>{::nomarkdown}</code> 和 <code>{:/nomarkdown}</code>强制 kramdown 不去解析这段语句即可，比如上面的代码可以改为：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
{::nomarkdown}
<i class="fa fa-camera-retro fa-5x"></i>
{:/nomarkdown}</pre></div>
</div>
</figure></notextile></div>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Octopress 精益修改 (3)]]></title>
<link href="http://shengmingzhiqing.com/blog/octopress-lean-modification-3.html/"/>
<updated>2014-05-04T19:38:26+08:00</updated>
<id>http://shengmingzhiqing.com/blog/octopress-lean-modification-3</id>
<content type="html"><![CDATA[<ul id="markdown-toc">
<li><a href="#section">1. 网站布局</a> <ul>
<li><a href="#section-1">1.1 修改框架宽度</a></li>
<li><a href="#section-2">1.2 修改内容宽度</a></li>
</ul>
</li>
<li><a href="#section-3">2. 页面字体</a></li>
<li><a href="#section-4">3. 修改链接样式</a></li>
<li><a href="#section-5">4. 给中英文间添加空格</a></li>
</ul>
<p>在主题的框架部署完成之后，我们的博客已经可以算是一个五脏俱全的个人网站了，下一步网站变成什么样子，主要看我们往里面加什么样的内容。但在你发表几篇文章之后，你可能就会发现，文字的呈现并不美观，这就需要我们去修改网站和文字的样式。当然，我们必须承认，由于各种各样的原因，同一个网站在不同的操作系统或者不同的浏览器下显示是完全不一样的。作为一个小博客这站长，只能尽我们所能去修改样式，但真的没有精力去保证适应所有的操作系统和所有的浏览器（尤其是 IE）。<!--more--></p>
<p>本文主要讲网站和文字样式的修改，主要工作就是要修改整个网站的样式表。 Octopress 的样式表放在 <code>sass</code> 目录下。秉承之前谈到的原则，在可能的情况下，我们尽量只修改 <code>sass/custom</code> 这个目录下的内容。</p>
<h2 id="section">1. 网站布局</h2>
<h3 id="section-1">1.1 修改框架宽度</h3>
<p>如果说两年多的学术生涯带给我什么对于排版格式方面的收获，那么就是我在使用 LaTeX 的过程中意识到，过宽的布局并不易于阅读。而 Octopress 默认的页面主体框架非常宽，也许对活动颈椎有好处，但我们读起来并不舒服。所以首先我们要缩减默认宽度。</p>
<p>打开 <code>sass/custom/_layout.scss</code> 这个文件，找到如下两行：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_layout.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>//<span class="error">$</span><span class="tag">max-width</span>: <span class="float">1350px</span>;
<span class="error">…</span>
//<span class="error">$</span><span class="tag">sidebar-width-wide</span>: <span class="float">300px</span>;
</pre></div>
</div>
</figure></notextile></div>
<p>你可以从字面意思看出这两行代码是什么意思，所以你只需要修改相应的数字就好了。以我的博客为例，整体框架的最宽宽度我设为 1000px，侧边栏最宽宽度我设为 260px。之所以称为最宽宽度，是因为网站会根据不同的显示设备自适应宽度。其他诸如最窄宽度，中等宽度，你也可以在这个文件中找到相应的代码，进行修改。</p>
<p>修改完之后，记得把这两行前面的 <code>//</code> 去掉，因为在样式表中，这个符号后面的内容默认是注释内容，会被自动忽略。比如，按照我的设置改完之后，这两行应该变为：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_layout.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre><span class="error">$</span><span class="tag">max-width</span>: <span class="float">1000px</span>;
<span class="error">…</span>
<span class="error">$</span><span class="tag">sidebar-width-wide</span>: <span class="float">260px</span>;
</pre></div>
</div>
</figure></notextile></div>
<h3 id="section-2">1.2 修改内容宽度</h3>
<p>修改完框架宽度之后，我们可以预览一下效果，会发现，由于宽度变窄，文章内容距离框架的边界就显得过宽了，所以我们也要对文章内容的宽度进行修改。同样还是在刚才的 <code>sass/custom/_layout.scss</code> 文件，找到：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_layout.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>//<span class="error">$</span><span class="tag">pad-wide</span>: <span class="float">55px</span>;
<span class="error">…</span>
//<span class="error">$</span><span class="tag">sidebar-pad-wide</span>: <span class="float">20px</span>;
</pre></div>
</div>
</figure></notextile></div>
<p>这两行定义的是主栏和侧边栏的文字与边框最宽距离，改成你觉得适合的大小即可。当然如果你想修改「中等距离」和「最窄距离」，找到相应代码修改即可。</p>
<p>同样，记得去掉注释符号 <code>//</code> 。</p>
<p>内容宽度设置好之后，我们在插入列表时会发现一个问题：Octopress 的列表符号（或者编号）默认溢出左侧文字内容边界，以保证文字可以对齐。但我们缩小了文字与边框的距离，这样项目符号出现在这里就会显得非常拥挤。建议开启列表缩进功能：在 <code>sass/custom/_layout.scss</code> 中找到 <code>//$indented-lists: true;</code> 去掉注释符号 <code>//</code> 即可。</p>
<h2 id="section-3">2. 页面字体</h2>
<p>布局修改好之后，我们接着来修改文字字体。打开 <code>sass/custom/_font.scss</code> 这个文件，你会发现如下几行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/custom/_font.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>//<span class="error">$</span><span class="tag">sans</span>: <span class="string"><span class="delimiter">"</span><span class="content">Optima</span><span class="delimiter">"</span></span>, <span class="tag">sans-serif</span>;
//<span class="error">$</span><span class="tag">serif</span>: <span class="string"><span class="delimiter">"</span><span class="content">Baskerville</span><span class="delimiter">"</span></span>, <span class="tag">serif</span>;
//<span class="error">$</span><span class="tag">mono</span>: <span class="string"><span class="delimiter">"</span><span class="content">Courier</span><span class="delimiter">"</span></span>, <span class="tag">monospace</span>;
//<span class="error">$</span><span class="tag">heading-font-family</span>: <span class="string"><span class="delimiter">"</span><span class="content">Verdana</span><span class="delimiter">"</span></span>, <span class="tag">sans-serif</span>;
//<span class="error">$</span><span class="tag">header-title-font-family</span>: <span class="string"><span class="delimiter">"</span><span class="content">Futura</span><span class="delimiter">"</span></span>, <span class="tag">sans-serif</span>;
//<span class="error">$</span><span class="tag">header-subtitle-font-family</span>: <span class="string"><span class="delimiter">"</span><span class="content">Futura</span><span class="delimiter">"</span></span>, <span class="tag">sans-serif</span></pre></div>
</div>
</figure></notextile></div>
<p>由上至下定义了「衬线字体」「无衬线字体」「等宽字体」「标题字体」「网站主标题字体」「网站副标题字体」，在其中添加你喜欢的字体即可。字体的优先级是由先到后的。当然别忘了去掉注释符号。</p>
<p>对于英文字体，你还可以去 <a href="http://www.google.com/fonts/">Google Webfonts</a> 查找你喜欢的字体并使用，比如你想用 PT Serif 这个字体，你只需要在 <code>source/_includes/custom/head.html</code> 中添加如下代码即可：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>source/_includes/custom/head.html </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="tag"><link</span> <span class="attribute-name">href</span>=<span class="string"><span class="delimiter">"</span><span class="content">//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic</span><span class="delimiter">"</span></span> <span class="attribute-name">rel</span>=<span class="string"><span class="delimiter">"</span><span class="content">stylesheet</span><span class="delimiter">"</span></span> <span class="attribute-name">type</span>=<span class="string"><span class="delimiter">"</span><span class="content">text/css</span><span class="delimiter">"</span></span><span class="tag">></span> </pre></div>
</div>
</figure></notextile></div>
<p>顺便说一句，对于中文字体，为了照顾 Windows 用户，我们不得不在 font-family 中添加「微软雅黑」，因为一般人电脑里都会有。尽管这个字体并不好看，但其他 Windows 自带字体更难看。</p>
<p>字体选好之后，我们还需要调整不同文字字体的大小。这部分内容是在 <code>sass/base/_typography.scss</code> 这个样式表中定义的。注意它并不在 <code>sass/custom</code> 目录下。打开之后，你会看到对于不同内容字体样式的定义，比如：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/base/_typography.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre><span class="tag">body</span> > <span class="tag">header</span> <span class="tag">h1</span> {
<span class="key">font-size</span>: <span class="float">2.2em</span>;
<span class="directive">@extend</span> .<span class="key">heading</span>;
<span class="key">font-family</span>: <span class="error">$</span><span class="value">header-title-font-family</span>;
<span class="key">font-weight</span>: <span class="value">normal</span>;
<span class="key">line-height</span>: <span class="float">1.2em</span>;
<span class="key">margin-bottom</span>: <span class="float">0.6667em</span>;
}</pre></div>
</div>
</figure></notextile></div>
<p>这部分定义的是一级标题的字体样式，其中 <code>font-size: 2.2em</code> 即为字体大小。其他文字的字体大小定义方式也与此类似。你可以直接修改这里的数字来更改文字大小，但秉承我们之前的原则，我们并不修改这个文件。复制 <code>sass/base/_typography.scss</code> 当中想要修改的部分，粘贴到 <code>sass/custom/_styles.scss</code> 这个文件中，然后在 <code>_sytle.scss</code> 这文件中修改即可生效。</p>
<p>这里顺便讲讲 Octopress 的样式表。其实真正定义最终呈现在页面上的效果的样式表是 <code>sass/screen.scss</code> 这个文件，打开之后你会发现：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/screen.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">compass</span><span class="delimiter">"</span></span>;
<span class="directive">@include</span> <span class="tag">global-reset</span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">custom/colors</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">custom/fonts</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">custom/layout</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">base</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">partials</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">plugins/**/*</span><span class="delimiter">"</span></span>;
<span class="directive">@import</span> <span class="string"><span class="delimiter">"</span><span class="content">custom/styles</span><span class="delimiter">"</span></span>;</pre></div>
</div>
</figure></notextile></div>
<p>几乎全文件都是 @import 语句，我们可以从字面意思猜出这个语句的意思。也就是说，我们修改的那些样式表，最终会导入这个样式表，然后实现对样式的改动。</p>
<p>如果你想新定义一些样式，事实上也可以新建一个样式表，然后在这里添加@import 语句导入 <code>sass/screen.scss</code> 即可。当然本身 @import 语句也可以嵌套，你甚至可以把你自己新建的样式表导入 <code>sass/custom/_styles.scss</code>，最终你的样式设置也会导入到 <code>sass/screen.scss</code>，因为 <code>sass/custom/_styles.scss</code> 本身也被导入了 <code>sass/screen.scss</code> 当中。这样无论我们定义什么样式，都可以只修改 <code>sass/custom</code> 目录中的内容。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<h2 id="section-4">3. 修改链接样式</h2>
<p>Octopress 默认超链接显示样式有下划线，对于中文来说，这条下划线会和文字挤在一起，不甚美观。打开 <code>sass/base/_theme.scss</code> 文件，找到这行代码：</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption class="code-header" style="margin-bottom:-5px;"><span>sass/base/_theme.scss </span></figcaption>
<div class="CodeRay">
<div class="code"><pre>
<span class="tag">a</span> {
<span class="directive">@include</span> <span class="error">l</span><span class="error">i</span><span class="error">n</span><span class="error">k</span><span class="error">-</span><span class="error">c</span><span class="error">o</span><span class="error">l</span><span class="error">o</span><span class="error">r</span><span class="error">s</span>(<span class="error">$</span><span class="key">link-color</span>, <span class="error">$</span><span class="key">hover</span>: <span class="error">$</span><span class="value">link-color-hover</span>, <span class="error">$</span><span class="value">focus</span>: <span class="error">$</span><span class="value">link-color-hover</span>, <span class="error">$</span><span class="value">visited</span>: <span class="error">$</span><span class="value">link-color-visited</span>, <span class="error">$</span><span class="value">active</span>: <span class="error">$</span><span class="value">link-color-active</span>);
}
</pre></div>
</div>
</figure></notextile></div>
<p>在花括号中添加一行 <code>text-decoration: none; </code> 。当然也可以把这段代码复制到 <code>sass/custom/_styles.scss</code> 中再做相应修改。</p>
<p>所有有关链接样式的修改，都只需要在相应的样式表中找到 <code>a { }</code> 这样的代码，修改花括号里面的内容即可。</p>
<h2 id="section-5">4. 给中英文间添加空格</h2>
<p>锤子科技的 UX 产品总监<a href="http://weibo.com/u/1842158375">@朱萧木</a> 老师前一段时间发了一条微博：</p>
<blockquote>
<p>打字时，中英混排时，中文和英文之间应该空一格，这一格，就是逼格。<br />
<a href="http://www.weibo.com/1842158375/AEWZGogNT">4 月 10 日 00:09</a></p>
</blockquote>
<p>很多朋友看完之后，并不明白他到底是什么意思，那么为什么要在中英文间加空格呢？首先，这样确实要好看一些；其次，对于网页显示来说，如果中英文间不加空格，默认会把这个英文单词和它前后的汉字当成一个单词，所以不会再汉字和英文之间换行，如果有采用了两段对齐的格式，很有可能出现某行文字过于稀疏的问题，整体上依然不美观。</p>
<p>但我们在书写中文的时候，其实并没有在汉字之间加空格的习惯，如果文字中偶尔出现英文，像我这样的强迫症都不是每次都记得空格。那么该如何解决这个问题呢？如果你用过 Word，你会发现在中英文之间，会自动保持一点距离，也就是说软件设计者自动实现了中英文间的空格，并不需要我们在打字时额外留意。</p>
<p>考虑到朱萧木老师的身份，我给他做了如下的回复：</p>
<blockquote>
<p>朱老师，作为一个贴心的产品经理，这一格不应该默认加在手机系统中么？参考<a href="http://t.cn/zOWs207">http://t.cn/zOWs207</a><br />
<a href="http://www.weibo.com/1645866217/AEXIFwGEZ">4 月 10 日 02:00</a></p>
</blockquote>
<p>注意我给他的参考链接，正是在 Octopress 下的实现方式，来自<a href="http://xoyo.name">肖之慰的博客</a>。参考他这篇《<a href="http://xoyo.name/2012/04/auto-spacing-for-octopress/">给中英文间加个空格</a>》，你可以实现像本博客一样的中英文自动空格。</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>当然有些时候，一些插件的样式表放到 <code>sass/plugins</code> 目录下似乎更合逻辑。<a href="#fnref:1" rel="reference">↩</a></p>
</li>
</ol>
</div>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Octopress 精益修改 (2)]]></title>
<link href="http://shengmingzhiqing.com/blog/octopress-lean-modification-2.html/"/>
<updated>2014-05-04T11:41:14+08:00</updated>
<id>http://shengmingzhiqing.com/blog/octopress-lean-modification-2</id>
<content type="html"><![CDATA[<ul id="markdown-toc">
<li><a href="#section">1. 页面相关设置</a> <ul>
<li><a href="#section-1">1.1 新建页面</a></li>
<li><a href="#section-2">1.2 添加公益 404 页面</a></li>
<li><a href="#section-3">1.3 添加页面和其他链接至导航栏</a></li>
</ul>
</li>
<li><a href="#section-4">2. 主题汉化</a> <ul>
<li><a href="#section-5">2.1 汉化导航栏</a></li>
<li><a href="#section-6">2.2 汉化移动设备导航栏</a></li>
<li><a href="#section-7">2.3 汉化归档页面</a></li>
<li><a href="#section-8">2.4 汉化侧边栏</a></li>
<li><a href="#section-9">2.5 汉化其他部分</a></li>
</ul>
</li>
<li><a href="#section-10">3. 网站底部</a></li>
<li><a href="#section-11">4. 添加侧边栏</a></li>
<li><a href="#section-12">5. 添加评论系统</a></li>
</ul>
<p>通过前面的教程，我们成功搭建起了自己的 Octopress 博客，并对博客框架做了基本配置。这已经可以算是一个真正意义上的个人博客了：1. 确实可以在互联网上看到；2. 文章有自己的署名；3. 甚至可以撰写有公式的科技文章。</p>
<p>但我们对于网站的个性化修改并没有结束：首先，网站整体显得很粗糙，很多必要的信息，比如作者简介，并没有呈现；其次，虽然我们对基本配置中涉及到的部分做了有限的汉化，但也正因为我们做了部分汉化，其余的英文部分显得更加不伦不类。针对这些问题，本文将继续我们「精益修改」之路。<!--more--></p>
<p>在正式进入主题之前，先给大家一个小技巧：我们可以先在终端执行命令 <code>sudo rake preview</code>，然后使用 <code>http://localhost:4000/</code> 这个网址对我们的网站进行预览。然后我们再修改相关属性，在修改过程中，只要刷新页面就可以看到实时效果，等效果没有问题了，我们再执行 <code>sudo rake generate</code> 和 <code>sudo rake deploy</code> 发布到网络上。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>当然，最后还要记得使用 git 命令把修改后的源文件传到 Github 上。</p>
<h2 id="section">1. 页面相关设置</h2>
<h3 id="section-1">1.1 新建页面</h3>
<p>对于一个博客来说，仅仅有按时间发布的文章或日志是不够的，我们还需要在上面放一些其他页面。对于 Octopress 来说，系统默认只有两个页面，一个是 Blog 页面，上面按照时间顺序显示着我们发布的日志，另一个是 Archives (归档) 页面，也是我们的文章列表，只是用一种更为简洁的方式呈现，只有标题，时间，和分类描述。</p>
<p>但仅有这两个页面对很多人来说并不够，我们需要更多，比如在我的博客中，还有一个「<a href="http://shengmingzhiqing.com/article-series/">系列文章</a>」页面，里面放的是我成系列的文章，更加方便读者阅读，也方便自己查阅。那么像这样一个页面该如何生成呢？很简单，执行以下命令：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
sudo rake new_page[your-title]
</pre></div>
</div>
</figure></notextile></div>
<p>然后你会发现，在你 <code>source</code> 文件夹下会出现一个名为 <code>your-title</code> 的文件夹，里面会有一个名为 index.md 的文件。还记得我们在「<a href="http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/#markdown-">精益修改 (1)</a>」中修改过 rakefile 里的 Markdown 文件的 后缀，其中有一行是 <code>new_page_ext</code>，这里改动的正式新页面的后缀。</p>
<p>在你重新部署后，这个文件将会生成一个名为<code>index.html</code> 的文件。可以用以下链接来访问这个页面：</p>
<div class="bogus-wrapper"><notextile><figure class="code"> <div class="CodeRay">
<div class="code"><pre>
http://[your_domain]/your-title/