SPF团队博客风格指南
在这里创造有个性的一致;)
前言
编写一篇美观、易懂的技术文章是我们共同的追求。本文将给出一些博客风格的建议，以便让大家能够更快速地熟悉我们的博客平台。
浏览器兼容情况
为了体现高贵冷艳，我们的博客支持大部分主流的正常浏览器，以及IE9+（含IE9）。
使用markdown
markdown是一套优雅的文档编写格式。它允许你用纯文本创建样式，并且均有对应的相同语义的HTML标签。在我们的博客平台上，所有的博客内容均使用markdown撰写。
如果你从未使用过markdown，你可以参考这篇文章。markdown非常优雅、易懂，相信你会很喜欢它。
在学会markdown以后，你还需要一个称手的编辑器。它需要支持markdown语法高亮，否则你在写东西的时候会非常不愉悦。谁不追求点视觉上的享受呢？如果你没有称手的编辑器，我推荐Sublime Text。
代码高亮
在一篇文章中让代码高亮是很简单的一件事情。Jekyll（我们用的博客引擎）采用Pygments进行代码高亮，支持上百种代码的高亮。我们可以使用highlight标签进行代码高亮。例如下面的例子里面，我们对一段ruby代码进行高亮：
生成的效果是这样的
def foo
puts 'foo'
end
如果你要显示行号，则使用如下方式即可
效果如下
1 def foo
2 puts 'foo'
3 end
怎样，是不是很棒？
嵌入html
在markdown文本中，可以嵌入一部分的html标签。比如我们可以插入一个不知名网站的logo做为图片：
<img src="http://www.baidu.com/img/bdlogo.gif" alt="">
效果为
你可能会问，明明markdown语法中也有插入图片的语法，为什么会有需要使用html插入图片的时候呢？答案就是，你可以通过添加class为图片添加特性。例如，添加.img-responsive就可以让你的图片变成响应式的图片。这些类通称为工具类。
<img src="http://topic.cw.com.tw/slideshow/images/alibaba/alibaba03.jpg" class="img-responsive" alt="">
你可以拉伸一下浏览器窗口看看效果。还有几个有用的工具类：
.img-rounded将给予图片6px的border-radius.img-thumbnail将把图片变成缩略图.img-circle将给予图片50%的border-radius（圆形）
有些html标签是不能使用的。比如form标签就不能被正常解析。如果你加入了form标签，在编译文章的时候，程序会给出错误。
另起一段，而不是换行
新段和新行是两个概念。在markdown的语法中，如果你在句子的末尾加两个空格则意味着你将换行（产生新行），但是当前行和下一行还是属于一个段落；如果你在两个段落之间留出一个空行，则意味着空行上下的两段文本是属于两个段落。
例如，下面的markdown代码，就是产生一个新行
这是一行[空格][空格]
这是下一行则对应的html代码为
<p>这是一行<br>这是下一行</p>
可以看到，两行文本是属于同一段的（在同一个p标签内）。而下面的markdown代码将产生一个新段落
这是一行
这是下一行则对应的html代码为
<p>这是一行</p>
<p>这是下一行</p>
我们在博客中，总是应该采用第二种方法产生新的段落。只有这样，才能让两端之间产生一定的距离，从而易于阅读。原因请见不要段首缩进一节。
不要段首缩进
我们从小学到高中都在写作文，都知道每个自然段前面要空两格。但是在这里，请不要这样做。
段首缩进和两端之间增加段间距是两种增加文章易读性的方法，它们的主要目的就是让读者的眼睛能够迅速分清段落。然而，一般而言，我们在纸面上采用段首缩进的方式。在电子屏幕上，我们应该总是使用两端之间增加段间距的方法。
这也是为什么在本文前面，我提到了应该生成新段，而不是换行。因为在我们的样式表中，有这样一段代码：
p {
margin:0 0 1.5em; /* 每个段落有1.5em的下边距 */
}
其他建议
还有一部分比较细节的地方，我想有必要提一提。
给出前言和总结
对于一篇技术文章，前言和总结是不可或缺的。一篇文章的前言会告诉读者你这篇文章的主要内容，而总结可以带领读者回顾这篇文章所写的一些内容。不仅仅是为了读者，也是为了让你自己写出更具有条理性的好文章。前言和总结不应该过长。
少用h1
markdown语法允许我们通过一连串的井号（#）分别创建对应的html标题标签。其对应关系如下：
# Title1 - h1
## Title2 - h2
### Title3 - h3
#### Title4 - h4
##### Title5 - h5
###### Title6 - h6一山不容二虎。由于每篇文章的页面中，标题总是h1，所以不建议在正文中使用h1，容易造成不必要的视觉错觉，影响页面整齐度。我个人建议，在文章中只使用h2（作为一级段落标题）和h4（作为二级段落标题）。
一般情况下，你不会用到三级段落标题。在一本书中才可能出现三级标题，而一篇出现三级标题的文章应该不会是好文章。
勤加链接
对于文中出现的一些开源社区里面的项目名称、一些技术知识点、一些其他站点的名称等，都应该合理地加上外部链接。比如，可以链接到Wikipedia。这些添加外部链接的内容不是你写的这篇文章中介绍的重点，但是又是阅读这篇文章的前置知识。
例如，当我在介绍开源项目gulp的时候，我就应该为它添加链接，指向它的主页。
从编写易懂的段落做起
一个段落一般不应该超过200字，过长的段落会让人产生疲劳感。每个段落一般都有需要详细阐述的事情，所以段落也不应过短。超短的段落可以偶尔出现，仅用于耍酷的用途。
嗯。
还有就是，在一个较长的段落中，总应该有一个中心句。一般我们将中心句放在段落的开头，让读者对段落内容有个大致的了解。有时候，读者会通过中心句来判断是否要跳读。
代码总是显示行号
为了维持一致性，我建议所有代码都加上行号（通过启用linenos选项）。
图片总是响应式的
为了维持一致性，我建议所有除了缩略图外的图片都设置为响应式的（通过设置添加.img-responsive）。
总结
本文针对博客编写风格做了一些建议。我们简单地回顾一下，你应该：
- 会使用markdown撰写博客
- 会使用代码高亮标签，并显示行号
- 会嵌入html代码，会插入响应式图片
- 会维护团队博客中一定的一致性