菩提树下有只蝉

N*M点阵中正方形的个数

Tue, 07 Mar 2017 18:10:20 +0800

简单问题

首先看一个简单的问题。如图所示，这是一个大小为 $4*4$ 的点阵，问该点阵中共有多少个正方形？

很容易可以发现，只需统计边长为1的正方形个数 $(4-1)^2$ ，边长为2的正方形个数 $(4-2)^2$ ，和边长为3的正方形个数 $(4-3)^2$ ，共计14个正方形。（注意， $4*4$ 的点阵边长为3）。 $N*N$ 点阵的正方形总数即

$\begin{align} \sum_{s=1}^{N-1} s^2 &= \dfrac{N(N-1)(2N-1)}{6} \end{align}$

扩展到 $N*M$ 的点阵，如上图 $4*6$ 的点阵，正方形边长只需统计到N和M中较小的那一边的边长即可。对于每个边长s，正方形个数为 $(N-s)*(M-s)$ 。 $N*M$ 点阵的正方形总数即（假设 $N<M$ ）

$\begin{align} \sum_{s=1}^{N-1} (M-s)*(N-s) &= \sum_{s=1}^{N-1} MN-(M+N)s+s^2 \\ &= MN(N-1) - (M+N)\dfrac{(N-1)N}{2} + \dfrac{N(N-1)(2N-1)}{6} \\ &= \dfrac{N(N-1)(3M-N-1)}{6} \end{align}$

扩展问题

我们扩展一下正方形的定义。如图所示，这是一个大小为 $4*4$ 的点阵，绿色和红色正方形都算作合法的正方形，问该点阵中共有多少个正方形？

首先我们定义上图中绿色边的正方形为基准正方形。根据观察可以发现，一个边长为s的基准正方形点阵中共包含s个合法的正方形。因此对于每个边长s，基准正方形个数为 $(N-s)^2$ （由简单问题得知），再乘以s，即为该边长s的所有正方形个数。 $N*N$ 点阵的正方形总数即

$\begin{align} \sum_{s=1}^{N-1} s*(N-s)^2 &= \sum_{s=1}^{N-1} N^2s-2Ns^2+s^3 \\ &= N^2\dfrac{N(N-1)}{2}-2N\dfrac{N(N-1)(2N-1)}{6}+\dfrac{(N-1)^2N^2}{4} \\ &= \dfrac{N^4-N^2}{12} \end{align}$

同样，扩展到 $N*M$ 的点阵，对于每个边长s，正方形个数为 $(N-s)*(M-s)*s$ 。 $N*M$ 点阵的正方形总数即（假设 $N<M$ ）

$\begin{align} \sum_{s=1}^{N-1} s*(M-s)*(N-s) &= \sum_{s=1}^{N-1} MNs-(M+N)s^2+s^3 \\ &= MN\dfrac{N(N-1)}{2} - (M+N)\dfrac{N(N-1)(2N-1)}{6} + \dfrac{(N-1)^2N^2}{4} \\ &= \dfrac{(2M-N)(N-1)N(N+1)}{12} \end{align}$

参考资料

[1] Google Kickstart Round A 2017 Problem A.Square Counting

[2] Quora

自定义cocos2d-x引擎中的模态框类和消息通知类

Fri, 01 Apr 2016 09:45:22 +0800

模态框类（Modal）

模态框就是一个包含内容和按钮的对话框，用户必须先响应对话框才能继续操作应用程序。

本项目中的模态框需求是可以自定义标题、内容，可选关闭按钮以及设置功能按钮组。我们将这个模态框类写成一个Layer，便于项目全局使用，Layer是cocos2d-x中的概念，可以参考这里。

模态框类的参考代码如下：

var PopLayer = cc.Layer.extend({
  //设置成员变量
  layerBg:null,
  titleLabel:null,
  contentLabel:null,
  listener:null,
  menu:null,
  cancelMenu: null,

  ctor:function(title, content) {
    this._super();
    var size = cc.winSize;
    this.layerBg = new cc.Sprite(res.modal);
    this.layerBg.setPosition(size.width/2,size.height/2);
    this.layerBg.setLocalZOrder(1);
    this.addChild(this.layerBg);

    this.titleLabel = new cc.LabelTTF(title, "Arial", 18);
    this.titleLabel.setFontFillColor(cc.color.BLACK);
    this.titleLabel.setAnchorPoint(0,0);
    this.titleLabel.setPosition(230+(500-this.titleLabel.width)/2, 395);
    this.addChild(this.titleLabel,1);

    this.contentLabel = new cc.LabelTTF(content, "Arial", 18);
    this.contentLabel.setFontFillColor(cc.color.BLACK);
    this.contentLabel.setAnchorPoint(0,1);
    this.contentLabel.setPosition(230+(500-this.contentLabel.width)/2, 340);
    this.contentLabel.setDimensions(cc.size(460,140));
    this.contentLabel.textAlign = cc.TEXT_ALIGNMENT_CENTER;
    this.addChild(this.contentLabel,1);

    cc.MenuItemFont.setFontName("Arial");
    cc.MenuItemFont.setFontSize(18);
    var cancelBtn = new cc.MenuItemFont("Close", function(sender) {
        this.hide();
    }, this);
    cancelBtn.color = cc.color.RED;
    cancelBtn.setAnchorPoint(0,0);
    cancelBtn.setPosition(0, 0);

    this.cancelMenu = new cc.Menu(cancelBtn);
    this.cancelMenu.setAnchorPoint(0,0);
    this.cancelMenu.setPosition(730 - cancelBtn.width - 5, 395);
    this.addChild(this.cancelMenu, 2);

    this.listener = cc.EventListener.create({
      event: cc.EventListener.TOUCH_ONE_BY_ONE,
      swallowTouches: true,
      onTouchBegan:function(touch,event){
        return true;
      }
    });
  },
  //设置按钮组
  addMenu: function(menu) {
    this.menu = menu;
    this.addChild(this.menu, 2);
  },
  //设置标题
  setTitle: function(title) {
    this.titleLabel.setString(title);
    this.titleLabel.setPosition(230+(500-this.titleLabel.width)/2, 395);
  },
  //设置显示内容
  setContent: function(content) {
    this.contentLabel.setString(content);
    this.contentLabel.setPosition(230+(500-this.contentLabel.width)/2, 340);
  },
  //设置关闭按钮
  setCloseBtn: function(flag) {
    this.cancelMenu.setVisible(flag);
  },
  //显示模态框
  show: function() {
    cc.eventManager.addListener(this.listener,this);
    this.setVisible(true);
  },
  //隐藏模态框（一般写在回调里）
  hide: function() {
    this.removeChild(this.menu);
    this.menu = null;
    this.setVisible(false);
    cc.eventManager.removeListener(this.listener);
  }
});

调用代码如下：

//新建Layer，添加到场景（Scene）中
modalLayer = new PopLayer("this is title","this is content");
modalLayer.setVisible(false);//一开始不想让这个层显示
this.addChild(modalLayer);

//调用Modal类
//添加自定义的菜单menu
modalLayer.addMenu(menu);
//设置标题
modalLayer.setTitle("Title Example");
//设置内容
modalLayer.setContent("Content Example");
//不显示关闭按钮
modalLayer.setCloseBtn(false);
//显示模态框
modalLayer.show();
//关闭模态框
modalLayer.hide();//注意：一般关闭模态框层的代码写在按钮的回调中

消息通知类（Toast）

Toast是一个简易的消息提示框。当显示Toast时，它永远不会获得焦点，无法被点击。用户可以对应用程序的其他部分进行操作。Toast类的思想就是尽可能不引人注意，同时还向用户显示信息，希望他们看到。而且Toast显示的时间有限，Toast会根据用户设置的显示时间后自动消失。

Toast类的参考代码如下：

var ToastLayer = cc.Layer.extend({
  contentLabel:null,
  ctor:function (content) {
    this._super();
    var size = cc.winSize;

    var bg = new cc.Sprite(res.toast);
    bg.setPosition(size.width/2, size.height/2);
    this.addChild(bg, 0);

    this.contentLabel = new cc.LabelTTF(content, "Arial", 18);
    this.contentLabel.setFontFillColor(cc.color.BLACK);
    this.contentLabel.setAnchorPoint(0,0);
    this.contentLabel.setPosition(50, 560);
    this.contentLabel.setDimensions(cc.size(860,70));
    this.contentLabel.textAlign = cc.TEXT_ALIGNMENT_CENTER;
    this.contentLabel.verticalAlign = cc.VERTICAL_TEXT_ALIGNMENT_CENTER;
    this.addChild(this.contentLabel, 1);
    this.setCascadeOpacityEnabled(true);
  },
  //设置Toast显示内容
  setContent:function(content) {
    this.contentLabel.setString(content);
  },
  //设置Toast显示时间，包括显示持续时间和淡出持续时间
  show:function(delay, sec) {
    var delayOut = delay || 2;
    var timeOut = sec || 1;
    this.setOpacity(255);
    this.runAction(cc.sequence(cc.delayTime(delayOut), cc.fadeOut(timeOut)));
  }
});

调用代码如下：

//新建Layer，添加到场景（Scene）中
toastLayer = new ToastLayer("Welcome to Toast");
toastLayer.setOpacity(0); //初始设置Toast层不显示
this.addChild(toastLayer);

//调用Toast类
//设置Toast显示内容
toastLayer.setContent(msg);
//显示Toast
toastLayer.show();

总结

我的代码还有很多瑕疵，有些地方处理得不严谨，仅供大家作个参考，希望懂cocos2dx的大神能够提出一些批评。欢迎大家在评论里交流学习。

一元线性回归模型的参数估计

Wed, 23 Mar 2016 23:29:30 +0800

PRF(Population Regression Function): 总体回归函数

$Y_i = \beta_1 + \beta_2X_i + u_i$

SRF(Sample Regression Function): 样本回归函数

$\begin{align} Y_i &= \hat{\beta_1} + \hat{\beta_2}X_i + \hat{u_i} \\ &= \hat{Y_i} + \hat{u_i} \end{align}$

PRF无法直接观测得到，因此我们需要通过SRF来估计PRF，即 $\hat{Y_i}$ 是 $Y_i$ 的估计值。

将SRF作如下变换：

$\begin{align} \hat{u_i} &= Y_i - \hat{Y_i} \\ &= Y_i - \hat{\beta_1} - \hat{\beta_2}X_i \end{align}$

$\hat{u_i}$ 即样本中，实际 $X_i$ 对应的 $Y_i$ 值与SRF估计出来的 $\hat{Y_i}$ 值之差。

要想 $\hat{Y_i}$ 与 $Y_i$ 与尽量接近，即，求参数 $\hat{\beta_1},\hat{\beta_2}$ 的估计值，使得 $\sum \hat{u_i^2}$ 最小。

根据

$\begin{align} \sum \hat{u_i^2} &= \sum (Y_i - \hat{Y_i})^2 \\ &= \sum (Y_i - \hat{\beta_1} - \hat{\beta_2}X_i)^2 \end{align}$

若要 $\sum \hat{u_i^2}$ 最小，即求 $\sum (Y_i - \hat{\beta_1} - \hat{\beta_2}X_i)^2$ 关于 $(\hat{\beta_1},\hat{\beta_2})$ 的二元函数的最小值。分别对 $(\hat{\beta_1},\hat{\beta_2})$ 求偏微分，并令其等于0，可得（推导过程省略）

$\begin{align} \sum Y_i &= n\hat{\beta_1} + \hat{\beta_2}\sum X_i \\ \sum Y_iX_i &= \hat{\beta_1}\sum X_i + \hat{\beta_2}\sum X_i^2 \end{align}$

联立上述两个等式，可得

$\begin{align} \hat{\beta_2} &= \dfrac{n\sum X_iY_i - \sum X_i \sum Y_i}{n\sum X_i^2 - (\sum X_i)^2} \\ \\ &= \dfrac{\sum X_iY_i - n\bar{X}\bar{Y}}{\sum X_i^2 - n\bar{X}\bar{X}} \\ \\ &= \dfrac{\sum X_iY_i - n\bar{X}\bar{Y} - n\bar{X}\bar{Y} + n\bar{X}\bar{Y}}{\sum X_i^2 - n\bar{X}\bar{X} - n\bar{X}\bar{X} + n\bar{X}\bar{X}} \\ \\ &= \dfrac{\sum X_iY_i - \bar{X}\sum Y_i - \bar{Y}\sum X_i + \sum \bar{X}\bar{Y}}{\sum X_i^2 - 2\bar{X}\sum X_i + \sum \bar{X}^2} \\ \\ &= \dfrac{\sum (X_iY_i - \bar{X}Y_i - \bar{Y}X_i + \bar{X}\bar{Y})}{\sum (X_i^2 - 2\bar{X}X_i + \bar{X}^2)} \\ \\ &= \dfrac{\sum [X_i(Y_i - \bar{Y}) - \bar{X}(Y_i - \bar{Y})]}{\sum (X_i - \bar{X})^2} \\ \\ &= \dfrac{\sum [(X_i - \bar{X})(Y_i - \bar{Y})]}{\sum (X_i - \bar{X})^2} \\ \\ &= \dfrac{\sum x_iy_i}{\sum x_i^2} \\ \\ \\ \hat{\beta_1} &= \dfrac{\sum X_i^2\sum Y_i - \sum X_i \sum X_iY_i}{n\sum X_i^2 - (\sum X_i)^2} \\ \\ &= \bar{Y} - \hat{\beta_2}\bar{X} \end{align}$

其中，

$\begin{align} \bar{X} &= \dfrac{1}{n}\sum X_i \\ \bar{Y} &= \dfrac{1}{n}\sum Y_i \\ x_i &= (X_i - \bar{X}) \\ y_i &= (Y_i - \bar{Y}) \end{align}$

经过代数变换， $\hat{\beta_2}$ 还可以变换成如下形式

$\begin{align} \hat{\beta_2} &= \dfrac{\sum x_iy_i}{\sum x_i^2} \\ \\ &= \dfrac{\sum x_iY_i}{\sum X_i^2 - n\bar{X}^2} \\ \\ &= \dfrac{\sum X_iy_i}{\sum X_i^2 - n\bar{X}^2} \end{align}$

这学期在上计量经济学基础，在学到一元线性回归模型的参数估计时，别的推导过程都很简单，但是看到 $\hat{\beta_2}$ 的推导时卡了一下，因为书上直接由 $\dfrac{n\sum X_iY_i - \sum X_i \sum Y_i}{n\sum X_i^2 - (\sum X_i)^2}$ 推出了 $\dfrac{\sum [(X_i - \bar{X})(Y_i - \bar{Y})]}{\sum (X_i - \bar{X})^2}$ ，我想了好久（比较愚笨），最后根据结果才反推出过程的，这也是促使我记录这篇博文的主要因素。

文中若有疏漏之处，敬请在评论中指正。如果大神有更好的思路，也请在评论区交流，谢谢。

敢忍抢先成王师

Sun, 06 Mar 2016 17:05:24 +0800

张良，字子房，与萧何、韩信并称“汉初三杰”。《史记·留侯世家》主要叙述了张良的生平轶事，其描绘的张良谋略过人，是汉高祖刘邦建立汉朝并巩固统治的著名谋臣，因此被后人尊称为“谋圣”。

《留侯世家》具体记载了张良辅助刘邦攻秦、退楚过程中，在一系列关键历史事件中献出的过人谋计，以及建立汉朝后，为稳定天下提出的种种解决方法。连刘邦都佩服说：“夫运筹于帷帐之中，决胜千里之外，吾不如子房。”本文限于篇幅，不分析张良的种种谋计，而是对大家耳熟能详的，《留侯世家》一开始就提出的“圯上纳履”这个故事，有一个新的解读。

我们都听过“圯上纳履”这个故事，说的是张良散步到一座桥时，一位老先生把鞋扔到桥下并让张良去捡，张良捡回后又被要求帮助老先生穿上鞋。老先生很满意张良的态度，并与张良相约5日后平明再见。张良在前两次的迟到后，最后一次终于守时，老先生送了张良一本兵书后就走了。

故事很简单，但是，如果我们从故事中得出的道理是：1、张良有礼貌，懂得尊重老人；2、老先生在教张良和人约会不要迟到。那么，这样读历史是没有收获的。《史记》是一本史学巨著，他所记载的每一个字，每一句话，每一起事件，都是经过司马迁的重重锤炼，能够体现出超越时代的历史道理的。我们应当跟着原文，再细细品读一遍“圯上纳履”，体会更深的道理。

「良尝间从容步游下邳圯上，有一老父，衣褐，至良所，直堕其履圯下，顾谓良曰：“孺子，下取履！”」

一个衣着普通的老先生，故意走到张良面前，把鞋子扔到圯下，还态度很差的使唤张良，真是一件怪事！我们看一下张良是什么反应。

「良鄂然，欲殴之。为其老，强忍，下取履。」

张良的第一反应很正常，符合年轻人的血气方刚，他想打这个老先生。但张良毕竟是张良，成大事的人，他忍住了，帮老先生拿鞋。

「父曰：“履我！”良业为取履，因长跪履之。」

这就怪了！老先生要求张良帮他穿鞋时，张良什么都没说，就“履之”，“履之”不够，还要“跪履之”，“跪履之”还不够，还要“长跪履之”。张良做的这么极致是为什么？难道司马迁这么写是想告诉我们张良很能忍吗？其实，这里的意思是，张良既然一开始就忍了，那就一忍到底！苏轼在《留侯论》中对此写道：“人情有所不能忍者，匹夫见辱，拔剑而起，挺身而斗，此不足为勇也。天下有大勇者，卒然临之而不惊，无故加之而不怒。此其所挟持者甚大，而其志甚远也。”

「父以足受，笑而去。良殊大惊，随目之。父去里所，复还」

这一段很普通，但又不普通。老先生“笑而去”，说明老先生对张良“一忍到底”很满意，认为是可塑之才，第一关考验通过。最后两句很有意思，“父去里所，复还”，老先生都离开了一里了，再回来，张良还在这吗？张良知道老先生要回来，老先生知道张良还在这，神乎其神的。

再看后面的三次约会。

「五日平明，良往。父已先在」「五日鸡鸣，良往。父又先在」「五日，良夜未半往。有顷，父亦来，喜」

张良和老父约的就是“五日平明”，前两次张良知道了吗？没有，前两次都是在第五日，比预定时间“先”，但是比老先生“后”。张良第三次赴约，是在第四天的夜半，这样即使老先生还是先到，那也不能指责张良不守约，这叫“不后”。兵法有一招叫“先下手为强”，你知道先，敌人也知道先，只有掌握了绝对的先，出乎敌人意料的先，才能制胜。

所以，“圯上纳履”这个故事，告诉我们的不仅仅是大家传诵的那么简单。通过上述的分析，我们知道老先生是想教给张良“忍”和“先”两个道理：忍，就一忍到底；先，就绝对的先。张良的这两个特质，是他十年后能“成王师”的基础条件。

张良一生进退自如，谱写了富有传奇色彩的人生篇章。

更换博客托管商小记

Sun, 13 Dec 2015 14:32:33 +0800

2014年9月，Github针对学生用户推出了一个价值丰厚的大礼包，只要用自己学校的EDU邮箱通过认证就能获得这个礼包，里面包括Namecheap域名服务一年、DigitalOcean的100美元抵价券等超值礼品。借这个机会我购买了属于自己的域名timmyxu.me，以及DigitOcean上每个月5美元的VPS。利用这些工具，我曾经搭建过Wordpress这类的博客系统，也配置过Shadowsocks、VPN这类的科学上网工具，还用Github送的一年SSL证书给我的域名加上了HTTPS认证。

最初的折腾劲过去后，到目前为止这个VPS主要是为我现在的这个静态博客和个人使用的VPN提供服务。前段时间正好看到了宋子明把自己的博客迁移到了Github Pages上，我才突然想到除了用VPN之外，VPS仅仅在托管我的这个静态博客，并没有发挥到最大的价值。而我目前也没有更多的需求，尽管100美元的抵价券还没有用完，但为了防止以后想做一些新的事情，现在能节省就节省。因此我决定暂停DigitOcean上的VPS服务。

暂停VPS服务意味着两个问题：第一是我的VPN服务也因此暂停，因为不少朋友同学都在用这个VPN，可能暂时不能为他们提供这些便利；第二是为我现在这个静态博客找到一个新家。上面说到Github提供了Github Pages的服务（Github真是良心！），每个用户可以免费为自己或者自己的项目建立静态网页。由于Github Pages完美支持Jekyll工具和自定义域名，配置极其简单，于是我就顺理成章地把博客迁过来啦。

最后，我建立这个博客的初衷记录自己的学习收获和生活点滴，但是自今年4月建博以来一直没有发表过新的博文，实在是感到惭愧。这次博客迁移，希望自己能够坚持当初想法，不流于形式，不做表面之事，把想法实实在在落到笔头上。

拭目以待！

Progress Report on my Academic Career at BUAA

Sun, 26 Apr 2015 17:02:48 +0800

本文是我的口语课作业。记述大学生涯到目前为止的学业生涯进展报告。英文水平不佳，文中若有语法错误，敬请指正。

TO: Todd J. Sempel

FROM: 徐少峰 Shaofeng Xu

DATE: April 26, 2015

SUBJECT: Progress Report on my Academic Career at BUAA

Work Completed

Things are coming along very well in regards to my time here at BUAA. First of all, I think I did a good job at my study. At each semester, although I was not top among students but always was the first 30% of them. That’s a far better grade than the goal I set to myself before entering the university.

In the aspect of my social work, I was the monitor of my class from freshman to sophomore year. During my time as a monitor, I experienced and learned a lot from this share of responsibility. Whether solving the problems among classmates or informing our student counselor of concrete student’s life, I kept thinking, studying and practicing, and tried my best to do these things well.

As an engineering student, I participated in several competitions in the past three years. Feng Ru Cup is the official annual scientific and technological competition in BUAA and I took part in it at sophomore year. Unfortunately, I did not win any reward for my project. However, I gained much competition experience from it. In addition to Feng Ru Cup, early in my sophomore, I joined in an algorithm competition which is ACM/ICPC regional in Nanjing and Hangzhou, and won two silver medals.

I love playing table tennis, so I still represented our software college to participate in table tennis matches in freshman and sophomore years. Both of the two matches our team fell down in front of the top four.

University life without being a member of a student club is incomplete. I enrolled in a club called AIESEC when I was a freshman. AIESEC is an international non-profit organization totally managed by students whose vision is “Peace and fulfillment of Humankind’s potential”. It’s really cool to touch various kinds of people around the world and strive for a same purpose.

Last but not least experience in my university life, is that I did a voluntary work at Sunshine Village orphanage in the winter of my sophomore year. It is quite a unforgettable experience. I rethought about the significant of family, love, fate and equality after I finished the voluntary work.

Overall, I’m satisfied with my experience since I entered the BUAA.

Work Scheduled/Planned

I still have several things that must be done before I am able to graduate. The most important thing to do is my graduation project. After a four-year study at my major in BUAA, the best thing to check my learning outcomes is a perfect graduation project. I think it’s my next year’s focus.

Meanwhile, I plan to apply for an internship later this year. As we all know, lore from books needs to be practiced in real production environment.

Keep going!

基于Jekyll的静态博客生成指南

Tue, 14 Apr 2015 21:41:03 +0800

前言

本文主要介绍著名的静态博客生成器 Jekyll 的基本使用方法。不同于 WordPress 等博客系统，Jekyll 生成的站点无需依赖数据库，所有页面都由 Jekyll 静态生成，用户只需使用 Markdown 等标记语言撰写文章并重新生成即可。本站即基于 Jekyll 搭建。

首先简单介绍一下 Jekyll。

简介

Jekyll 是一个简单的博客形态的静态站点生成器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown（或者 Textile）以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。 ——Jekyll中文官方网站

特性

如上文所说，Jekyll 具有三大特性：简单，静态，博客形态。具体解释如下：

简单：无需数据库，没有评论功能，没有频繁的版本更新——仅仅关注你的内容。
静态：利用 Markdown（或 Textile）等标记语言，Liquid 模板语言，和 HTML & CSS 构建可发布的静态网站。
博客形态：支持 URL 自定义，支持文章分类，支持单页面，可以自定义博客布局。

目录结构

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile，或者就是简单的 HTML，然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

.
├── _config.yml
├── _drafts
|	├──begin-with-the-crazy-ideas.textile
|	└──on-simplicity-in-technology.markdown
├──_includes
|	├── footer.html
|	└── header.html
├── _layouts
|	├── default.html
|	└── post.html
├── _posts
|	├── 2007-10-29-why-every-programmer-should-play-nethack.markdown
|	└── 2009-04-26-barcamp-boston-4-roundup.markdown
├── _site
└── index.html

_config.yml: 配置文件，例如站点 title，permalink 的格式等在这个文件中配置，在布局文件中可以用liquid语言进行调用。
_drafts: 存放草稿的文件夹。
_includes: 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {\% include header.html %} （去掉转义符号\，下同）来把文件 _includes/header.html 包含进来。
_layouts: 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。下一章中将对此进行介绍。标签 {\{ content }\} 可以将 content 插入页面中。
_posts: 这里存放的是你的文章。文件格式很重要，必须要符合: YEAR-MONTH-DAY-title.MARKUP。permalinks 可以在文章中通过 YAML 自己定制，但是数据和标记语言都是根据文件名来确定的。
_site: Jekyll 生成后的静态网站就存在这个文件夹中。将此文件夹中的内容上传至你的服务器，即可访问。
index.html 等其他文件: 如果这些文件含有 YAML 头信息，那么Jekyll会将其转化成静态页面。以 .html，.markdown，.md 或者 .textile 结尾的也会被转换。

本章对 Jekyll 进行了一些简单的介绍，若想详细了解其他方面，请访问 Jekyll 官方网站（中文，英文）。

使用指南

本指南是博主搭建本站时的步骤总结，供初次使用 Jekyll 的同学提供一点思路。主要从安装、配置和部署三个方面来介绍。

安装

由于最终只需将 _site 文件夹内的内容部署至服务器，所以我们在本地安装 Jekyll 并配置生成博客，然后部署即可。

这里博主使用的环境是Mac OS X 10.10，Linux 下操作类似，官方不推荐使用 Windows 运行 Jekyll。

安装使用 RubyGems，操作过程很简单，打开命令行，输入以下命令：

~ $ gem install jekyll
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ jekyll serve
# => Now browse to http://localhost:4000

打开你的浏览器，在地址栏中输入 http://localhost:4000 即可访问由 Jekyll 生成的静态站点！

配置说明

好了，第一步成功后，我们可以访问由 Jekyll 生成的一个默认的站点，为了让站点更加符合自己的个性与审美，下面我们对站点进行一些配置。

站点设置

_config.yml

_config.yml文件是站点全局配置文件。在此文件中我们可以修改自己的站点 title，description，permalink 格式等全局变量，以及标记语言解释器和一些其他的设置。Jekyll 默认的配置见此处。

在样式模板中可以调用此文件中的变量，使用方法是用 liquid 语言进行调用，如 {\{ site.title }\}，父属性是 site。

YAML

正是 YAML 头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。头信息必须在文件的开始部分，并且需要按照 YAML 的格式写在两行三虚线之间。下面是一个基本的例子：

---
layout: post
title: Blogging Like a Hacker
---

在 YAML 头信息中，你可以使用已经定义好的全局变量，如 layout，permalink 等，也可以自定义变量，如 title，使其可以在样式模板中使用这个变量。调用自定义变量方法是 {\{page.title}\}，父属性是 page。

自定义样式

Jekyll 默认的模板很简洁，也很漂亮。本站基于默认模板样式作出了一点改动，例如超链接样式，header 配色，边栏布局等。

Jekyll默认模板中样式文件主要是 css 文件夹中的 main.scss，_sass 文件夹中的 base.scss 和 layout.scss。

main.scss 文件主要设定了如 width，margin 等基本值，base.scss 文件对 HTML 基本元素进行了 reset，layout.scss 文件是对自定义 class，id 等进行样式设置。博主主要修改的就是 layout.scss 文件。有关 CSS 样式，以及动态样式语言 SCSS 的相关知识，可自行 Google 学习。

评论功能

作为不依赖数据库的静态博客系统，Jekyll 自然是没有文章评论功能，如果想在自己的博文中引入评论功能，可以引入公共的评论平台。目前常用的有 Disqus 和多说。本站用的是 Disqus。

具体设置方法很简单：

在 Disqus 官网注册账号并登陆，点击右上角Settings - Add Disqus To Site按钮；
填写你站点的相关信息，完成创建；
设置你的评论框，包括登陆限制，语言等，保存设置；
点击 install，生成一段js代码，复制并粘贴到 Jekyll 中你想让评论出现的地方即可（本站为 _layout/post.html 文件中末端）；
在文章的 YAML 信息中添加 comments: true。

注意：Disqus的评论框设置改变后，只对新调用了评论接口的文章有效，对之前的文章无效，即旧文章评论框还是改动前的设置。

分类目录&标签

Jekyll 提供了分类（category）和标签（tag）的全局变量，我们可以在自己文章的 YAML 头信息里加上相关信息，如下：

---
layout: post
title:  "基于Jekyll的静态博客生成初级指南"
categories: 技术杂谈
tags: jekyll
---

如果想在文章正文显示这些分类和标签，那么在文章的模板中（_layout/post.html）相应位置添加调用即可。

不过我们可能会有这样的需求：需要在单独一个页面显示某个分类或者某个标签下所有的文章。这时，我们引入插件功能。

Jekyll 支持插件功能，你可以很容易的加入自己的代码。插件由 ruby 语言写成。

插件的安装很简单：在博客根下目录建立 _plugins 文件夹，插件放在这里即可。 Jekyll 运行之前，会加载此目录下所有以 *.rb 结尾的文件。

为了满足上面提到的需求，本站使用了 Github 用户 recurser 提供的插件 jekyll-plugins。该插件提供了生成单个分类页面的功能，使用方法如下：

下载项目；
将 generate_categories.rb 复制到站点的 _plugins 文件夹中，将 _layout 中的 category_index.html 复制到站点 _layout 文件夹中，这两个文件分别是插件和样式；
在需要显示分类列表的地方添加如下代码

<ul>
	{\% for category in site.categories %}
	<a href="/categories/{\{category|first}\}/">
		<li>
			{\{ category|first }\} 
			|
			{\{ category|last|size}\}
		</li>
	</a>
	{\% endfor %}
</ul>

其中，site.categories存放站点的分类集合，category|first为分类名，category|last|size为该分类下文章数目。该分类所有文章列表的页面 URL 为 /categories/{\{category|first}\}/。

对于标签，只需将插件中的 category 关键字替换为 tag 即可。

更多插件，请查看官方文档。

部署方法

常用的有两种部署方法。

Github Pages 提供免费托管服务，参考这里的指南。
可以部署到自己的 VPS 上，利用 rsync 命令将本地生成后的 _site 文件夹内容上传至网站根目录即可。示例：rsync -avz _site/. <name>@<IP>:/var/www/html/。

结语

Jekyll 还有很多功能诸如分页、数学公式的支持等，会在将来本站更新到这些功能时，另开一篇文章说明。

当然，还有很多其他非常优秀的静态网站生成器，这里列出了其中一部分。宋子明的这篇博文介绍了Nanoc使用方法，大家可以参考。