Hello World! 世界是你的，世界也是我的。
Markdown语法笔记
01 Jan 2014 Markdown
Markdown简介
Markdown是一门为了实现易读易写的标记语言，而且可以转化为其他的标记语言（如HTML）。这种语言吸收了很多电子邮件中的纯文本标记的特性。除了标准语法，Markdown还有很多衍生的版本，例如PHP Markdown Extra，以及GitHub上的“GitHub Flavored Markdown”（GFM）。
而本文将介绍原始的标准Markdown语法，也就是Standard Markdown(SM)。dillinger是一个在线Markdown编辑器，你可以一边阅读本文，一边练练手。
标题
一级标题可以用任意数量=表示，二级标题用-表示，也可以用1到6个#表示一到六级标题。
语法示例：
一级标题
===
二级标题
---
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
显示效果：
一级标题
二级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
列表
无序列表可以用*，+，-表示，而有序列表则用数字紧跟.来表示。有序列表中的数字不影响实际显示，因为HTML的有序列表<ol>不支持定义单项序号。列表的一项可以有多个段落，但需要缩进4个空格或1个制表符。
语法示例：
* perl
* ruby
* python
<!-- 注意两个列表不能相邻 -->
1. github
2. jekyll
3. bootstrap
显示效果：
- perl
- ruby
- python
- github
- jekyll
- bootstrap
注意：若两项之间用空行隔开，每项的内容会转换成被<p>包围起来。
* Angry Birds
* Bad Piggies
会转换成：
<ul>
<li><p>Angry Birds</p></li>
<li><p>Bad Piggies</p></li>
</ul>
链接和图片
链接和图片的语法很像，链接用[]()表示，而图片是![]()，并且可以选择加上title属性。还有另外一种形式，与论文中的参考文献很相似，具体使用请看示例。
语法示例：
第一种：链接[google](http://www.google.com "search")和图片
第二种：链接[google][1]和图片![favicon][2]
[1]: http://www.google.com "search"
[2]: /favicon.ico "icon"
显示效果：
第一种：链接google和图片
第二种：链接google和图片
强调
强调可以用*或者_表示，效果是相同的，不同数量可以分别表示斜体、粗体和粗斜体。
语法示例：
表示*斜体*、**粗体**和***粗斜体***
表示_斜体_、__粗体__和___粗斜体___
显示效果：
表示斜体、粗体和粗斜体
表示斜体、粗体和粗斜体
代码段
内联代码段用反引号`（键盘esc下面的键，不要与单引号混淆了）包围。
而块级代码段出于简洁的考虑，只需在行的开头缩进4个空格或1个制表符即可，Markdown会转换成用<pre>和<code>包围代码内容。
语法示例：
这里是内联代码段`git`，
# 这里是块级代码段
git add .
显示效果：
这里是内联代码段git，
# 这里是块级代码段
git add .
注意：如果你需要在代码中显示反引号`，请参考下面的写法，要显示n个反引号的话，就在外围写1 + n个反引号。
`` ` ``
Markdown不会对代码段的代码内容进行语法转换，而像&和<这类字符会自动转换成HTML实体。例如，
<div class="footer">
© 2014 Xaolex
</div>
会转换成：
<pre><code><div class="footer">
&copy; 2014 Xaolex
</div>
</code></pre>
水平分隔线
只需要三个或以上的*或者-就可以表示水平分隔线。
语法示例：
***
---
* * *
------------
显示效果：
******************************************奇葩的分割线***************************************
转义
有时候我们想要用#，*这类字符，但是他们在Markdown中有特殊的含义，所以需要转义。在Markdown中可以用反斜杠来帮助你使用这类字符。需要转义的字符如下：
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括号
# 井号
+ 加号
- 减号
. 句点
! 惊叹号
语法示例：
\#0571
\*\*\*\*711\*\*\*\*
显示效果：
#0571
****711****
引用
引用的用法比较简单，只需在引用内容开头加上>。
语法示例：
> 问：“WP8应用和iOS应用的差距在哪里？”答：“iOS应用要多少有多少，WP应用要多少有多少。”
>
> 中国梦.txt 美国梦.exe 日本梦.avi 朝鲜梦.bat
显示效果：
问：“WP 8 应用和 iOS 应用的差距在哪里？”答：“iOS 应用要多少有多少；WP 应用要多少有多少。
中国梦.txt 美国梦.exe 日本梦.avi 朝鲜梦.bat
块级元素和内联元素
块级元素（区块元素）和内联元素（区段元素）其实是CSS的概念，为了帮助我们更好地在HTML中展示，有必要介绍一下。《CSS权威指南》解释：任何不是块级元素的可见元素都是内联元素。内联元素通常不会以新行开始，如同单词，相互之间可以在同一行内显示；块级元素如同段落，不可能共存于同一行。
在Markdown中，段落、标题、列表、引用、块级代码段和分割线都是块级元素，而链接、图片、强调和内联代码段都是内联元素。
语法示例：
* apple
### google
`ms`
*nokia*
显示效果：
- apple
google
msnokia
自动链接
Markdown支持自动链接形式来处理网址和Email地址，这样省了我们一些写HTML的力气，也可以让写作内容一目了然，用法是使用方括号<>包围地址内容。
语法示例：
<http://xaolex.github.io>
<xaolex@gmail.com>
显示效果：
自动转换
在HTML中，<和>用于起始和结束标签，一些预留字符有特定的含义，因此这些字符需要使用字符实体才能正确地显示。
因此在传统的HTML文件中，如果你要表示AT&T，则要写成AT&T来转义，链接的href属性中包含&也同理，需要写成&。现在使用Markdown能帮你自动处理这些元素。例如，如果你写成AT&T会被自动转换成AT&T。4<5会自动转换成4<5。
语法示例：
AT&T
© Xaolex 2013
1 + 1 <> 1
显示效果：
AT&T
© Xaolex 2013
1 + 1 <> 1
内嵌HTML
Markdown目标成为一种适合网络内容的写作语言。因此，在Markdown中可以很方便地使用HTML。有一点需要注意，Markdown不会处理块级元素的Markdown语法，像<table>，<div>，<p>里面用强调语法*ABC*是无效的。
语法示例：
<div>*content*</div>
<p>**paragraph**</p>
<span>***word***</span>
### <a href="#">*Title*</a>
显示效果：
**paragraph**
word
Title
嵌套使用
引用、列表还可以嵌套使用，引用可以嵌套标题、列表等，甚至嵌套另一个引用，列表也可以嵌套另一个列表。如果想要在列表或引用中嵌入块级代码段，则需要在原有基础上缩进8个空格或2个制表符。
语法示例：
> *这是引用内容*
> > 再加个引用看看
>
> * 这是引用中的列表
> * 这是引用中的列表
>
* meat
* vegetable
* fruit
- apple
- pear
- orange
显示效果：
这是引用内容
再加个引用看看
- 这是引用中的列表
- 这是引用中的列表
- meat
- vegetable
- fruit
- apple
- pear
- orange
其他语法说明
- 一行中只含有空格和制表符也算空行。
- 空一行分段。
- 行尾输入两个空格加回车表示断行，即
<br>。 - 如果两行之间不空一行表示空格。
- 可以使用
<!-- -->进行注释。
小结
最近在Github上折腾博客，很多地方都用到了Markdown，在网上搜索了一些资料学习Markdown，顺便写了这篇介绍常用Markdown语法的文章。我觉得这篇文章介绍得还是有点细了，其实很多细节的地方我们一般用不到的，用到的时候再查也不迟。
不过，如果你觉得这些语法还不够用的话，可以阅读官方的文章：
- 中文版：Markdown语法说明（详解版）
- 英文版：Markdown: Syntax
中文版还有wowubuntu上的另一个版本，不过我觉得上面这个版本翻译得更好一些。
PS：BTW，虽然废话有点多，如果你跟我一样使用GitHub的话，我相信这篇翻译文章——GitHub 风格的 Markdown 语法会对你有帮助。
设置Disqus模块显示中文的界面
29 Dec 2013 JekyllBootstrap
目前我的博客用的是国外的Disqus评论服务，但是我发现Disqus默认使用英文的界面，于是打算到官网修改成中文的界面。遗憾的是，目前Disqus还不支持中文，中文本地化工作还在紧张地进行中。-_-!
谷歌了一下，发现Disqus原本支持中文的，因为后来升级了而翻译工作没跟上，导致现在不支持中文了。另外，我还找到了一篇文章介绍使用繁体中文的办法，虽然有点投机取巧，但是利用这个原理还是能解决使用简体中文的问题。现在我把这个方法介绍给大家，详细的步骤如下（有HTML基础的同学可以跳过这部分，直接看原理的部分）：
1. 登录你的Disqus账号，进入Settings界面。
2. 鼠标移到Language右侧的下拉列表处，点击鼠标右键，选择审查元素。
3. 此时会弹出一个窗口，找到<select name="forum_language">一栏，点击鼠标右键，选择Edit as HTML，出现一个可编辑的小框。
4. 在小框第一行<select name="forum_language">下面粘贴下面的代码，如图所示：
<option value="zh">
Chinese
</option>
5.把正在编辑的窗口最小化或者直接回到原来的网页，重新查看可选择的Language，可以看到多了Chinese！好了，现在可以选中并提交，大功告成。
原理
- Disqus的评论系统升级后并没有禁掉原来使用其他语言的API，只是从下拉列表移除了部分选项，因此，通过向系统提交原本支持的语言的选项，仍然能使用原来的本地化界面。
- 如果想要Disqus支持中文界面，需要在网站的Settings页面，找到表单settings-form的关于Languages代码，也就是
<select name="forum_language">。 在select之中增加一项值为
zh的option，之后在下拉列表选中并提交到服务器，代码如下：<option value="zh"> Chinese </option>
PS：现在这个方法只是权宜之计，可能会出现不稳定或者仍翻译为英文的地方，不过从官网看到目前中文翻译的工作已经进行到64%了，相信Disqus很快就支持中文的界面。另外本文参考了另一篇文章——Disqus 繁體中文設定方法教學，有兴趣的可以看看。
关于Jekyll解析中文的问题
29 Dec 2013 JekyllBootstrap
1. 解析中文的页面：
刚开始没有修改配置文件，直接运行服务器jekyll serve，提示出错：
Generating... Error reading file I:/Program Files (x86)/...: invalid byte sequence in GBK
error: invalid byte sequence in GBK. Use --trace to view backtrace
原来Jekyll对中文支持不够友好，需要在_config.yml增加一行配置：encoding: utf-8
利用Jekyll Bootstrap搭建博客可参考的网上资源
26 Dec 2013 JekyllBootstrap
前言
这些资源都是我在搭建本博客参考过的文章，对我帮助很大，所以记录下来并且分享给大家，希望对你有帮助。
博客资源
搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门
官方资源
其他
关于如何组织静态资源，可以参考下stackoverflow的回答： Local post assets with Jekyll
关于Markdown的语法说明，可以看这里：Markdown 语法说明 (简体中文版)
供快速入门：怎样使用Markdown
Markdown文档转换应用：Dingus
Liquid入门：Liquid for Designers
如何修改JekyllBoostrap导航栏
26 Dec 2013 JekyllBootstrap
前言
今天开始动手改造Jekyll Bootstrap的twitter主题，Let's Go!
动手之前最好先了解下Markdown和YAML，另外我相信当你读这篇文章的时候已经了解过Jekyll和Jekyll BootStrap了。
定位
刚开始没有认真看配置文件（_config.yml），就在_layouts和_includes目录里瞎找，后来又百度谷歌了一翻，浪费了很多时间。
后来才发现在_config.yml文件中的属性“JB”下面可以配置，像“archive_path”，“categories_path”，“tags_path”，要注意的是，这个是配置单个导航按钮页面的信息，如“archive_path”配置的是归档的页面。配置文件里面可以在YAML头信息里面设置对应页面的信息和样式，例如标题、layout文件等，记得添上“group: navigation”不然导航栏不会显示这个导航按钮。还要注意一点，就是YAML文件头格式是“property: value”，属性后面紧跟冒号，冒号后面要有空格，不然也会出问题。
按需修改
根据文件的格式，你可以把原本的Archive、Categories等英文导航按钮改成中文的，也可以根据自己的需要增加或修改导航按钮。
好了，现在你也可以去试试给你的博客改下导航栏。
如何利用GitHub Pages和Jekyll Bootstrap搭建博客
26 Dec 2013 JekyllBootstrap
前言
GitHub相信大家都不会陌生，号称程序员的Facebook，许多知名的开源项目，例如Bootstrap、Jekyll，都托管在这个网站上面。
今天，我会给大家介绍自己如何利用GitHub Pages和Jekyll Bootstrap搭建博客。基于以上主题，我认为你已经有使用GitHub经验，所以不会详细介绍Git的安装和GitHub的托管过程。
GitHub Pages和Jekyll Bootstrap简介
GitHub是一个非常流行的代码托管网站，而GitHub Pages则是GitHub为方便托管在上面的项目的一个项目简介站点，个人、组织也可以通过GitHub Pages建立博客。
GitHub Pages支持Jekyll（一个静态站点生成器，根据网页源码生成静态HTML等文件）来建立博客，只要在本地搭建一个符合Jekyll规范的静态网站，上传到GitHub后会帮你托管整个网站。
通过GitHub Pages搭建网站的优点是：
- 免费，有300MB空间。
- 不需要搭建服务器，同时拥有很高的定制能力。
- 通过Git进行版本管理。
- 需要的话可以绑定域名。
当然也有缺点：
- 使用Jekyll，只能发布静态页面，不适合大一点的网站。
- 有一点技术门槛，需要对网页开发、Git、Jekyll有一定了解。
- 由于是静态页面发布，没有像评论等动态的功能，不过可以通过外部服务来解决。
搭建Jekyll环境
学习一门语言，最烦人的无疑是搭建环境了，而利用Jekyll Bootstrap搭建博客也同理，因为之前没接触过Ruby，而Jekyll恰恰是用Ruby写的一个内容生成器，因此也要搭建本地jekyll环境。我搭建Jekyll环境的过程也十分蛋疼，不过好在前人已经帮忙填了很多坑。具体的过程不在这里多说，有机会的话可能另开一篇博文讲讲具体的过程，这里可以参考这篇文章————windows下本地jekyll博客搭建手记。
概要过程(Windows平台，其他平台类似)就是：
- 到Rubyinstaller下载相应的Rubyinstaller和Development Kit（如64位的Windows需要Ruby 2.0.0-p353 (x64)和DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe），然后解压DevKit到C:\DevKit目录。
- 打开CMD，逐一输入以下命令：
gem update --system
cd C:\DevKit
ruby dk.rb init
ruby dk.rb install
gem install jekyll
gem install rdiscount
成功之后可以通过jekyll -v来查看是否安装成功，通过jekyll serve来启动服务器。不过有几点需要注意：
- 由于Jekyll项目默认是ANSI编码，所以需要在_config.yml里面配置encoding: utf-8，另外，如果有中文的文件注意编码必须是UTF-8格式。
- 由于网络的原因可能会提示出错，只要把ruby下载的cache目录所有的文件都删除，类似c:/ruby/lib/ruby/gems/1.8/cache这样的目录（根据你自己的版本推算），再重新安装就好了。
- 如果是老的版本还需要添加环境变量，请自行谷歌之。
- 还有一点，本地请求地址并不是提示的http://0.0.0.0:4000，而是http://127.0.0.1:4000。
建立GitHub Pages
GitHub Pages页面上有介绍如何建立一个GitHub Pages项目。
主要的步骤（参考官方介绍）是：
在GitHub上建立一个新项目，并且以username.github.io命名，其中username为你的GitHub用户名（或者组织的名字）。
把项目clone到本地目录。
git clone https://github.com/username/username.github.io
git checkout master
- 在项目目录下面新建index.html。
cd username.github.io
echo "Hello World" > index.html
- Push到GitHub远程仓库。
git add --all
git commit -m "Initial commit"
git push
好了，现在你可以访问你的GitHub Pages了，域名就是username.github.io，username你懂的。
使用Jekyll Boostrap
现在可以访问你的页面了，可是只有一个页面，而且空空如也，咋办？
不用担心，GitHub已经替你想好了。Jekyll是GitHub支持和推荐的一个静态模板解析引擎，而且你可以选取Jekyll Bootstrap上面的不同主题的模板，大大简化了我们的工作。
使用默认的Jekyll Bootstrap主题（twitter bootstrap）之前，注意由于刚开始建立GitHub Pages时候我们手动新建了index.html，记得删掉，这样访问的时候会转到Jekyll Bootstrap的默认页面，之后的步骤是：
- 将GitHub上的Jekyll Bootstrap的主题clone到项目目录下。
git clone https://github.com/plusjade/jekyll-bootstrap.git username.github.io
cd username.github.io
git remote set-url origin git@github.com:username/username.github.io.git
git push origin master
- 启动本地服务：
cd username.github.io
jekyll serve
本地查看博客效果：访问http://localhost:4000/。
也可以查看GitHub Pages上的站点：username.github.io。
改造主题
好了，下一步是改造你的主题了。由于目前我的博客还在改造之中，所以我会把我改造的经验在下一篇博文中分享给大家。