SeanLou的博客

Web开发中初学者容易混淆的9个命名约定

2012-03-15T00:00:00-07:00

http://dayanjia.com/2010/10/9-confusing-naming-conventions-for-beginners-in-web-programming.html

当人们一开始接触各种Web开发语言时，总会发现彻底搞懂不同语言的命名约定是一件很要命的事情。而且当开发者在争论什么才是最佳实践时，事情会变得更加让人困惑。为了让初学者更容易地在不同语言中过渡，这篇文章列出了一些常见的约定。

1. 类属性名前加下划线

如果你看到一个变量或者方法是以_开头的，其实这并不代表其幕后有什么猫腻。这仅仅是为了提醒开发者这个变量/属性/方法是私有的（private）或是受保护的（protected），它们不能从类的外部访问到。

PHP方式

class MyClass {
   // 这个实例变量在类外部无法访问
   private $_someVariable;

   // 这个方法仅在类内部或者其它继承它的类中可用
   protected function __behindTheScenesMethod() {}
}

JavaScript方式

var Female = (function() {
   var _trueAge = 50,
        _trueWeight = 140;

   return {
      age : _trueAge - 15,
      weight : _trueWeight - 30
   };
})();

Female.age; // 35
Female.weight; // 110
Female._trueAge; // 未定义（因为它是私有的，嘿嘿）

这里的Female并不是一个方法，但它返回一个对象（译注：这个例子很幽默）。这样，下划线前缀就可以提醒我们哪些是私有的。

2. 大写常量名

常量（Constant）代表了一个不会改变的静态值。例如，假设一个项目中需要一个税率值.0825，它便是一个常量。然而，并非所有语言都支持这种类型。因此，最好的做法是全部使用大写字母来提醒自己这是个常量。在JavaScript中，语言内建的对象都是采用这种约定，例如MATH.PI。

JavaScript方式

var TAXRATE = .0825;

PHP方式

define('TAXRATE', .0825);

3. 单字母前缀

你一定在某些场合见过变量名是以一个单独字母开头的，例如“s”或者“i”。

$sName = 'Captain Jack Sparrow'; //译注：Jack Sparrow《加勒比海盗》中的船长角色

这被称作“匈牙利命名法”，事实上在近几年并不流行。不过在许多公司内这仍是一条约定。

匈牙利命名法能够提醒开发者它正在使用的变量是什么类型的：string，integer等。

尤其在JavaScript中，这种方法是不可取的，因为JavaScript是弱类型的语言。弱类型语言不需要在使用变量前声明它的类型。如果我们给一个字符串以“s”开头命名，但是后来我们把一个整数赋值给它，这种命名法还有什么意义呢？事实上，这种形式的命名法会妨碍我们的工作，而不是对工作有益。

var sName = "Lieutenant Commander Geordi La Forge"; // 译注：Geordi La Forge 少校是《星际迷航：下一代》中的角色，天生眼盲，佩戴高科技护目镜
typeof(sName); // string
....
sName = undefined;
typeof(sName) // undefined

美元符号

致jQuery使用者：当你使用工厂函数生成对象并且心里暗喜没有受到匈牙利命名法的束缚时，你是否会在变量名前加一个美元符号？如果是这样，那么这也是匈牙利命名法的一种形式。这个符号的唯一目的是提醒你这个变量的类型。

// 这个美元符号提醒我可它可以使用jQuery的各种方法
var $container = $('#container');

应当这么使用吗？

这完全取决于你自己。事实上许多jQuery团队的成员也使用这种美元符号前缀。使用它的最终目的是能够适应你的工作。以我而言，几年前我就不使用这种美元符号了??这仅仅是因为我个人觉得这没有必要。你可以自己决定如何对待它。

4. 首字母大写

下面这个首字母大写的变量名看上去如何？

$response = $SomeClass->doSomething();

在上面的代码中，$SomeClass写成了单词首字母大写的形式是因为它是一个类的对象而不是普通的变量名。通常这是绝大多数开发者使用的方法。当我们一年后再回过头来看这些代码时，这个简单的形式就能准确地告诉我们这是一个对象，可以调用其方法。

// 注意类名中大写的M
class MyClass {
   function __construct() {}
}

JavaScript方式

在JavaScript中，没有真正的类，但是有构造（constructor）函数。

var Jeff = new Person();

我们将构造器（Person）的首字母大写的原因是我们有时候很容易忘记new关键词。在这种情况下，JavaScript往往不会抛出任何警告，但是这个小错误却非常难调试到。首字母大写能够给开发者在debug时一个有效的提示。Douglas Crockford是这个约定最大的提倡者。（译注：Douglas Crockford是Javascript社区的大神级人物，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript：The Good Parts》的作者。）

另一种可选方案是，如果你生怕自己的健忘，你可以在执行前首先确保构造器存在并且正确。

function Person(name) {
  // 如果遗漏了new关键词，将会执行下面的构造函数并返回一个新的实例
  if ( this.constructor !== Person ) {
    return new Person(name);
  }
 this.name = name;
}

// 故意不用“new”关键词
var Joey = Person('Joey');
Joey.name; // Joey

5. 驼峰式和下划线式

为什么有些变量使用驼峰式大小写模式，而有些是使用下划线分割单词呢？哪一种是正确的方法？答案是：没有绝对正确的用法。这完全去取决于你的语言，或者你公司的代码约定。这两种都是非常好的方式。

// camelCase
var preacherOfSockChanging = 'Lieutenant Dan'; // 译注：Dan中尉，电影《阿甘正传》中的人物

// under_score
var preacher_of_sock_changing = 'Lieutenant Dan';

正如大家所说，跟随你使用的语言的通常约定是一项最佳实践。例如，大量JavaScript开发者使用驼峰式的语法，而像PHP则更倾向于使用下划线分割。需要重申的是，这不是板上钉钉的规矩。Zend框架就是驼峰式大小写的推动者。

比你使用什么更重要的是确保你一直去使用它！

6. 目录结构

通常在团队中工作时，你必须和你的协同开发者一起接受一个合适的目录结构。最基本的显然是不要把所有的样式表、脚本都放到项目的根目录下，这显得非常无组织无纪律。许多开发者愿意将它们的图像、脚本和样式表放到一个Assets目录下。

/ Project Root
  /Assets
    / js
      / min
        script_min.js
      script.js
    / css
      / min
        style_min.css
      style.css
    / img
      img1.jpg
  index.html
  otherFile.html

此外，记住一项创建min目录的约定规则。这里面动态地存放着压缩后的脚本和样式表文件。

7. 语义

当使用标记语言时，需要明白你选择的id和class需要能够描述你的内容，而不是仅仅代表形式。例如：

最悲剧的

<div id="middle-left-and-then-a-little-lower"> Justin Bieber is my homeboy section. </div>

稍好一些

<div class="section"> Justin Bieber is my homeboy section. </div>

最佳做法

<section> Justin Bieber is my homeboy section. </section>

怎么样？如果在六个月以后，你决定把Justin Bieber粉丝的内容放到中间偏右并稍低一些（middle-RIGHT-and-then-a-little-lower）的位置呢？这样，你的iid就完全失去了意义。

我们正在向HTML5的世界过渡，你应当在元素中使用尽量少的标识。id显得很不灵活，而且很多情况下并不需要。

8. 写两遍`Header`和`Footer`

当做一个居中的网站时，需要将多重背景扩展到整个窗口的宽度（通常是header和footer），是非常令人讨厌的。你通常需要包裹你的内容，这样外层元素扩展后，内层元素还能继续保持居中。

这是一个一般性的问题，在创建必需的标记语言内容时接受这样的约定规则是很重要的。

<div id="footer-wrap">
	<footer>
	  My footer content goes here.
	</footer>
</div>

难以决定的是，假设你在使用HTML5中的新元素，你需要决定将footer标签放在里面还是外面。这个还有待讨论。然而我个人觉得将footer放在内层更加语义化。

div只限下面的情况时才使用：

没有更好的元素来使用了
你需要一个单纯的表示布局结构的元素

9. 简写

现在就决定是否允许在你的代码中使用简写。书写精确且整洁的代码总是一场可读性和代码长度的斗争。这也正是开发团队内使用相同代码风格是首要考虑规则的原因。来看两个简单的例子：

三目运算符合适吗？

var name = 'Joe';

// regular
if ( name === 'Jeff' ) {
  alert("That's me");
} else {
  alert("Nope");
}

// ternary
alert(name === "Jeff" ? "That's me" : "Nope"); // Nope

使用逻辑`&&`来写简短的条件判断句？

var getTweets = true;

// regular
if ( getTweets ) {
 alert('getting them now');
}

// 逻辑 AND
// 除非左边是“true”否则右边不会运行
getTweets && alert('Getting them now');

许多开发者都对如此使用AND感到不爽，坚持认为这影响了可读性。尽管这的确是是一个有力的观点，但是连流行的框架类库例如jQuery也大量使用了这种方法。

结论

再次重申，你在开发时坚持使用某种方式比选择什么样的的约定来的更加重要。事实上，许多开发团队都有自己专门的代码风格指导给新开发者参考。感谢阅读！

译注：关于变量命名更详细的约定规则介绍，大家可以阅读《代码大全》（第2版）的第11章。

原文：9 Confusing Naming Conventions for Beginners
作者：Jeffrey Way

Node.js使用 Mustache.js做模板

2012-03-12T00:00:00-07:00

From:http://www.oschina.net/question/12_21806

为了让 Node.js 输出更多的 HTML 元素，我们可以借助一些 html 模板引擎，例如 Mustache。

首先在 Node.js 中安装 Mustache：

npm install mustache

这会创建一个目录：node_modules\mustache

然后我们可以编写代码：

    var mustache = require('./node_modules/mustache/mustache');
     
    function helloworld(response)
    {
      console.log('request recieved at ' + (new Date()).getTime());
      response.writeHead(200, {'Content-Type': 'text/html'});
      var template = '<h1>Test</h1><p></p>';
      var model = {helloworld:'Hello World'};
      response.end(mustache.to_html(template,model));
    }
     
    exports.helloworld = helloworld;

这段代码使用 to_html 函数生成网页，来看看执行效果：

但这看起来很不爽，我们希望模板独立于控制器之外，例如下面的模板：

    <html>
      <head>
        <title>My first template</title>
      </head>
      <body>
        <h1>Test</h1>
        <p></p>
      </body>
    </html>

文件名是 helloworld.html.

为了使用这个模板文件，我们可以这样编写代码：

    var mustache = require('./node_modules/mustache/mustache');
    var fs = require('fs');
     
    function helloworld(response)
    {
      console.log('request recieved at ' + (new Date()).getTime());
      fs.readFile("./helloworld.html",function(err,template) {
                response.writeHead(200, {'Content-Type': 'text/html'})
                response.write(mustache.to_html(template.toString(), {helloworld:"Hello World"}))
                response.end()
         });
    }
     
    exports.helloworld = helloworld;

运行结果如下：

怎样，简单很多吧？:)

Jekyll Pagination

2012-03-09T00:00:00-08:00

From:https://github.com/mojombo/jekyll/wiki/Usage

Note: Pagination does not work with markdown files, it only works with html file extensions.

Just follow these steps to add pagination to your blog:

_config.yml

add the pagination setting: yaml markdown: rdiscount pygments: true lsi: true exclude: ['README.markdown', 'README_FOR_COLLABORATORS.markdown', 'Gemfile.lock', 'Gemfile'] production: false //add this line to add pagination paginate: 3 //the number of post per page

index.html

just add the posts and the pagination links:

---
layout: default
title: Blog
---



<!-- Pagination links -->
<div class="pagination">

    <span class="previous">Previous</span>

  <span class="page_number ">Page:  of </span>

    <span class="next ">Next</span>

</div>

A note about page1

Jekyll does not produce a page1 folder so using the above code will not work when a link is produced of the form "/page1". The following textile will handle page1 and render a list of each page with links to all but the current page.

``` textile

```

Jekyll Usage

2012-03-08T00:00:00-08:00

From:https://github.com/mojombo/jekyll/wiki/Usage

Creating a Jekyll site usually involves the following, [[once jekyll is installed.|Install]]

Set up the basic structure of the site
Create some posts, or [[import them from your previous platform|Blog migrations]]
Run your site locally to see how it looks
Deploy your site

Basic Structure

Jekyll at its core is a text transformation engine. The concept behind the system is this: you give it text written in your favorite markup language, be that Markdown, Textile, or just plain HTML, and it churns that through a layout or series of layout files. Throughout that process you can tweak how you want the site URLs to look, what data gets displayed on the layout and more. This is all done through strictly editing files, and the web interface is the final product.

A basic Jekyll site usually looks something like this:

.
|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

An overview of what each of these does:

_config.yml

Stores [[configuration|Configuration]] data. A majority of these options can be specified from the command line executable but it's easier to throw them in here so you don't have to remember them.

_includes

These are the partials that can be mixed and matched by your layouts and posts to facilitate reuse. The liquid tag Included file 'file.ext' not found in includes directory can be used to include the partial in includes/file.ext.

_layouts

These are the templates which posts are inserted into. Layouts are defined on a post-by-post basis in the [[YAML front matter]], which is described in the next section. The liquid tag is used to inject data onto the page.

_posts

Your dynamic content, so to speak. The format of these files is important, as named as YEAR-MONTH-DAY-title.MARKUP. The [[Permalinks|permalinks]] can be adjusted very flexibly for each post, but the date and markup language are determined solely by the file name.

_site

This is where the generated site will be placed once Jekyll is done transforming it. It's probably a good idea to add this to your .gitignore file.

index.html and Other HTML/Markdown/Textile Files

Provided that the file has a [[YAML Front Matter]] section, it will be transformed by Jekyll. The same will happen for any .html, .markdown, or .textile file in your site's root directory or directories not listed above.

Other Files/Folders

Every other directory and file except for those listed above will be transferred over as expected. For example, you could have a css folder, a favicon.ico, etc, etc. There's [[plenty of sites|Sites]] already using Jekyll if you're curious as to how they're laid out.

Any files in these directories will be parsed and transformed, according to the same rules mentioned previously for files in the root directory.

Running Jekyll

Usually this is done through the jekyll executable, which is installed with the gem. In order to get a server up and running with your Jekyll site, run:

jekyll --server

and then browse to http://0.0.0.0:4000. There's plenty of [[configuration options|Configuration]] available to you as well.

On Debian or Ubuntu, you may need to add /var/lib/gems/1.8/bin/ to your path.

base-url option

If you are using base-url option like

jekyll --server --base-url '/blog'

then make sure that you access the site at

http://localhost:4000/blog/index.html .

Just accessing

http://localhost:4000/blog

will not work.

Deployment

Since Jekyll simply generates a folder filled with HTML files, it can be served using practically any available web server out there. Please check the [[Deployment]] page for more information regarding specific scenarios.

Jekyll Template data

2012-03-08T00:00:00-08:00

From:https://github.com/mojombo/jekyll/wiki/Template-Data

Jekyll traverses your site looking for files to process. Any files with [[YAML Front Matter]] are subject to processing. For each of these files, Jekyll makes a variety of data available to the pages via the Liquid templating system. The following is a reference of the available data.

Global

Variable	Description
`site`	Sitewide information + Configuration settings from `_config.yml`
`page`	This is just the [[YAML Front Matter]] with 2 additions: `url` and `content`.
`content`	In layout files, this contains the content of the subview(s). This is the variable used to insert the rendered content into the layout. This is not used in post files or page files.
`paginator`	When the `paginate` configuration option is set, this variable becomes available for use.

Site

Variable	Description
`site.time`	The current Time (when you run the jekyll command).
`site.posts`	A reverse chronological list of all Posts.
`site.related_posts`	If the page being processed is a Post, this contains a list of up to ten related Posts. By default, these are low quality but fast to compute. For high quality but slow to compute results, run the jekyll command with the `--lsi` (latent semantic indexing) option.
`site.categories.CATEGORY`	The list of all Posts in category `CATEGORY`.
`site.tags.TAG`	The list of all Posts with tag `TAG`.
`site.[CONFIGURATION_DATA]`	As of 0.5.2, all data inside of your `_config.yml` is now available through the `site` variable. So for example, if you have `url: http://mysite.com` in your configuration file, then in your posts and pages it can be used like so: `http://www.lxj.com`. Jekyll does not parse a changed `_config.yml` in `auto` mode, you have to restart jekyll.

Page

Variable	Description
`page.url`	The URL of the Page without the domain. e.g. `/es/index.html`
`page.content`	The un-rendered content of the Page.

Note: Any custom front matter that you specify will be available under page. For example, if you specify custom_css: true in a page’s front matter, that value will be available in templates as page.custom_css

Post

Variable	Description
`post.title`	The title of the Post.
`post.url`	The URL of the Post without the domain. e.g. `/2008/12/14/my-post.html`
`post.date`	The Date assigned to the Post. This can be overridden in a post’s front matter by specifying a new date/time in the format `YYYY-MM-DD HH:MM:SS`
`post.id`	An identifier unique to the Post (useful in RSS feeds). e.g. `/2008/12/14/my-post`
`post.categories`	The list of categories to which this post belongs. Categories are derived from the directory structure above the _posts directory. For example, a post at `/work/code/_posts/2008-12-24-closures.textile` would have this field set to `['work', 'code']`. These can also be specified in the [[YAML Front Matter]]
`post.tags`	The list of tags to which this post belongs. These can be specified in the [[YAML Front Matter]]
`post.content`	The rendered content of the Post.

Paginator

note: only available in index files, can be in subdirectory /blog/index.html

Variable	Description
`paginator.per_page`	Number of posts per page.
`paginator.posts`	Posts available for that page.
`paginator.total_posts`	Total number of posts.
`paginator.total_pages`	Total number of pages.
`paginator.page`	The number of the current page.
`paginator.previous_page`	The number of the previous page.
`paginator.next_page`	The number of the next page.

Jekyll YAML Front Matter

2012-03-08T00:00:00-08:00

From:https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter

Any files that contain a YAML front matter block will be processed by Jekyll as special files. The front matter must be the first thing in the file and takes the form of:

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

Between the triple-dashed lines, you can set predefined variables (see below for a reference) or custom data of your own.

IMPORTANT! (Especially for Windows users)

When you use UTF-8 encoding for your file, make it clear that no BOM header chars in your file. Or everything will blow up!

Predefined Global Variables

Variable	Description
`layout`	If set, this specifies the layout file to use. Use the layout file name without file extension. Layout files must be placed in the `_layouts` directory.
`permalink`	If you need your processed URLs to be something other than the default /year/month/day/title.html then you can set this variable and it will be used as the final URL.
`published`	Set to false if you don’t want a post to show up when the site is generated.
`category`/`categories`	Instead of placing posts inside of folders, you can specify one or more categories that the post belongs to. When the site is generated the post will act as though it had been set with these categories normally. Categories can be specified as a YAML list.
`tags`	Similar to categories, 1 or multiple tags can be added to a post.

Custom Variables

Any variables in the front matter that are not predefined are mixed into the data that is sent to the Liquid templating engine during the conversion. For instance, if you set a title, you can use that in your layout to set the page title:

<title>Jekyll YAML Front Matter</title>

Predefined Variables for Post Front-Matter

These are available out-of-the-box to be used in the front-matter for a post.

Variable	Description
`date`	A date here overrides the date from the name of the post. This can be used to ensure correct sorting of posts.

.html模板测试

2012-03-05T00:00:00-08:00

Jekyll是一个使用Ruby编写的静态站点生成工具，使用Liquid模板渲染引擎，支持Markdown和Textile标记语言，并且可以为所有以 .html、.markdown、.textile扩展名结尾的文件使用YAML配置，内置语法高亮功能。而Github的Pages服务可以为每个Github主机上的仓库提供静态页面服务，并且Pages服务支持Jekyll。因为Github Pages有两种Pages，分别是用户页面和项目页面，所以我们可以使用用户页面来创建自己的Blog。

在开始前，请确保你已经有了Github账号一枚和Git的正确配置。没有的朋友可以先移步Github注册并安装配置Git。

首先，创建你的 Blog 仓库 username(请确保跟你的账号名相同).github.com:

        $ mkdir username.github.com
        $ cd username.github.com

新建一个 index.html 文件，像下面这样:

 1 <!doctype html>
       2 <html>
       3 <head>
       4 <title>Hello</title>
       5 </head>
       6
       7 <body>
       8 <h1>Hello!</h1>
       9 </body>
      10 </html>

初始化仓库、提交并push到Github:

        $ git init
        $ git add .
        $ git commit -a -m 'init commit.'
        $ git remote add origin
        $ git push origin master

现在你打开 username.github.com 就可以看到刚才新建的页面了，就是这么简单。当然也可以为你的Blog仓库绑定独立域名，具体做法就是：

在你的仓库中新建内容为 www.youdomain.com 的 CNAME 文件；
在你的域名管理页或者是DNS解析的地方，增加一个记录，记录类别为CNAME(Alias)类型.

*Note：如果你在CNAME中填写的是顶级域名，就得设置DNS的记录类别为A(Host)型，并设置主机为207.97.227.245。详细介绍请移步Github的Pages页面。

接下来我们只需要按照自己的喜好设计页面。首先认识下Jekyll的文件及目录配置:

        .
        |-- _includes
        |-- _plugins
        |-- _layout
        |   |-- default.html
        |   `-- post.html
        |-- _post
        |   |-- yyyy-mm-dd-title.markdown
        |   `-- yyyy-mm-dd-title.markdown
        |-- _site
        |-- _config.yml
        `-- index.html

_includes

存放你需要在模板文件中包含的文件，你可以使用Liquid标签 {‰ include file.ext ‰} 来引用相应的文件。

_plugins

可以增加你自己的插件

_layout

存放布局模板，请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_layouts

_post

存放文章列表，文件命名一定要遵循 yyyy-mm-dd-title.html|markdown|textile 规则，请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_posts

_site

Jekyll自动生成的，所以可以忽略，如果你有在本地安装Jekyll并预览了的话，可以使用.gitignore设置Git停止对本目录的跟踪。

_config.yml

设置经常使用的配置选项，这样在本地启动预览时就不用每次都手动输入了。

index.html 和所有的 HTML/Markdown/Textile 文件

所有的HTML/Markdown/Textile文件都可以包含 YAML 配置，这类文件都会被Jekyll解析。

现在你可以在自己的仓库中配置好你自己的目录及文件，也可以clone我的仓库，然后修改。

        $ git clone https://github.com/taberhuang/taberhuang.github.com.git

修改完后就可以push你的代码到Github上，看到结果了。刚才有说到本地预览，如果你想在本地预览后，确保没错误再push的话，就需要在本地安装Jekyll，下面介绍下Jekyll的安装方法。

一、安装Ruby运行环境和RubyGem:Windows用户只要下载 RubyInstaller。下载安装后请手动升级gem.

        $ gem update --system

二、安装DevKit。下载DevKit,DevKit是windows平台编译和使用本地C/C++扩展包工具。用来模拟Linux平台下的 make,gcc,sh 进行编译。下载文件后，解压到 `C:\DevKit'，再通过命令行安装:

        $ cd C:\DevKit
        $ ruby dk.rb init
        $ ruby dk.rb install

三、安装并检查刚才的DevKit安装是否成功。如果成功安装，则DevKit也就安装成功，如果不成功，请重新安装DevKit。

        $ gem install jekyll

四、安装Rdiscount，这个是用来解析Markdown标记的解析包。如果你使用Textile的话，就是安装Kramdown。

        $ gem install rdiscount

所有的环境和依赖包都安装成功后，进入你的仓库目录，用下面的命令便可启动Jekyll，并在本地预览了，预览地址默认为 127.0.0.1:4000，当然你也可以通过 _config.yml 配置:

        jekyll --server

是不是很爽?

参考及相关资料：

使用Jekyll搭建静态博客

2012-03-04T00:00:00-08:00

在开始前，请确保你已经有了Github账号一枚和Git的正确配置。没有的朋友可以先移步Github注册并安装配置Git。

首先，创建你的 Blog 仓库 username(请确保跟你的账号名相同).github.com:

        $ mkdir username.github.com
        $ cd username.github.com

新建一个 index.html 文件，像下面这样:

 1 <!doctype html>
       2 <html>
       3 <head>
       4 <title>Hello</title>
       5 </head>
       6
       7 <body>
       8 <h1>Hello!</h1>
       9 </body>
      10 </html>

初始化仓库、提交并push到Github:

        $ git init
        $ git add .
        $ git commit -a -m 'init commit.'
        $ git remote add origin
        $ git push origin master

现在你打开 username.github.com 就可以看到刚才新建的页面了，就是这么简单。当然也可以为你的Blog仓库绑定独立域名，具体做法就是：

在你的仓库中新建内容为 www.youdomain.com 的 CNAME 文件；
在你的域名管理页或者是DNS解析的地方，增加一个记录，记录类别为CNAME(Alias)类型.

*Note：如果你在CNAME中填写的是顶级域名，就得设置DNS的记录类别为A(Host)型，并设置主机为207.97.227.245。详细介绍请移步Github的Pages页面。

接下来我们只需要按照自己的喜好设计页面。首先认识下Jekyll的文件及目录配置:

        .
        |-- _includes
        |-- _plugins
        |-- _layout
        |   |-- default.html
        |   `-- post.html
        |-- _post
        |   |-- yyyy-mm-dd-title.markdown
        |   `-- yyyy-mm-dd-title.markdown
        |-- _site
        |-- _config.yml
        `-- index.html

_includes

存放你需要在模板文件中包含的文件，你可以使用Liquid标签 {‰ include file.ext ‰} 来引用相应的文件。

_plugins

可以增加你自己的插件

_layout

存放布局模板，请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_layouts

_post

存放文章列表，文件命名一定要遵循 yyyy-mm-dd-title.html|markdown|textile 规则，请参考https://github.com/taberhuang/taberhuang.github.com/tree/master/_posts

_site

Jekyll自动生成的，所以可以忽略，如果你有在本地安装Jekyll并预览了的话，可以使用.gitignore设置Git停止对本目录的跟踪。

_config.yml

设置经常使用的配置选项，这样在本地启动预览时就不用每次都手动输入了。

index.html 和所有的 HTML/Markdown/Textile 文件

所有的HTML/Markdown/Textile文件都可以包含 YAML 配置，这类文件都会被Jekyll解析。

现在你可以在自己的仓库中配置好你自己的目录及文件，也可以clone我的仓库，然后修改。

        $ git clone https://github.com/taberhuang/taberhuang.github.com.git

一、安装Ruby运行环境和RubyGem:Windows用户只要下载 RubyInstaller。下载安装后请手动升级gem.

        $ gem update --system

        $ cd C:\DevKit
        $ ruby dk.rb init
        $ ruby dk.rb install

三、安装并检查刚才的DevKit安装是否成功。如果成功安装，则DevKit也就安装成功，如果不成功，请重新安装DevKit。

        $ gem install jekyll

四、安装Rdiscount，这个是用来解析Markdown标记的解析包。如果你使用Textile的话，就是安装Kramdown。

        $ gem install rdiscount

        jekyll --server

是不是很爽?

参考及相关资料：

(转载)应用jekyll构建基于github page的博客

2010-09-20T00:00:00-07:00

基于github page的博客好处:

简单至极，且完全免费
可以支持rss订阅，评论功能
依赖于git，文章原生支持版本控制(对比)，更有利于知识库类文章
可以使用vim编写文章，写的时候像在写代码，更符合程序员的习惯

本博客此次除了启用全新个人域名saberma.me，将做以下调整

美化网站风格，更加的清新:)
页面布局调整为html5、css3架构
文章可按分类显示
代码增加高亮显示
增加rss feed输出

挑个新的博客模板

要求是基于html5、css3的免费模板，google之，发现个好地方: http://freehtml5templates.com
一页一页的挑吧，总会找到自己喜欢的，可以根据右下角的Tag Cloud进行筛选，现在看到本站的新样子就是找好久才看中的模板

绑定独立域名

在godaddy中注册 saberma.me 域名，.me专用于博客类型，但比.com贵一些，且没有优惠

注册完域名后，在域名管理中增加A record并指向207.97.227.245
在你的github项目下增加CNAME文件，内容为你的域名，如 http://github.com/saberma/saberma.github.com/blob/master/CNAME

具体参考 http://pages.github.com 中 Custom Domains 部分的内容

pygments代码高亮

安装pygments

# On Ubuntu 安装
sudo apt-get install python-pygments

完整安装说明

生成高亮显示的css文件

选择喜欢的样式，记下名称
http://pygments.org/demo/6622

我选择的是fruity style，作为pygmentize命令style的参数值

# 生成相应的css
pygmentize -S fruity -f html > stylesheets/syntax.css

参考pygments Command line usage

如何使用

语法高亮的代码段

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

highlight后面第一个参数为language，如php，也可以是ruby控制台irb，更多lanuages可以查询 http://pygments.org/docs/lexers/
第一个参数为必填，不填会导致_site目录生成不了相应的html文件，第二个参数显示行号

参考jekyll说明

Markdown标记与Liquid逻辑处理

两个知识点

为避免直接编写html代码，编写文章时，内容需要加入标记信息，即Markdown
博客中都是需要经过处理的，比如逻辑判断处理、循环处理，jekyll应用liquid模板语言进行这些处理

Markdown

标记语言有很多种，如textile
这些标记语言会被标记引擎转换，输出成相应的目标格式（大部分情况是输出成html）
引擎也有很多种，不同的编程语言有不同的实现，ruby常用的引擎有RedCloth

Liquid

简单来说，凡是看到{{}}或者{% %}包含的内容都是会被Liquid引擎处理的

比如*将日期格式化*的liquid语句

{{ post.date | date_to_string }}

除了标记的Liquid语法外，jekyll还扩展出了几个便利的方法，其中有上面介绍的highlight方法
jekyll liquid扩展
 liquid参考资料

整合评论

由于github page最终生成的都是静态html页面，所以是没有评论功能呢
但我们利用disqus实现在线评论功能，先到 http://disqus.com 注册帐号(免费)
注册成功后，为简单起见，只要把 _includes/post.html 中的saberma替换为你的注册帐号就行了(disqus_url输入你实际的域名)

整合rss订阅

因为jekyll可以生成blogs列表，所以我们可以编写atom.xml，由jekyll生成最终xml结果
这是我的atom.xml文件

将生成的xml地址提交至 feedsky.com ，由feedsky进行管理和美化

Setting Up an Atom Feed at GitHub Pages

你也想弄一个github page博客?

最快的做法是 fork我的博客，git clone到你的电脑
然后修改成你的，具体需要调整的地方是:

删除_posts中的文章
按上面介绍的[整合评论]修改 _includes/post.htm 文件
按上面介绍的[整合rss]修改 atom.xml 文件
修改CNAME的内容为你的独立域名
运行jekyll，看看效果
上传!ok，访问你的blog地址看看

参考资源

publishing-a-blog-with-github-pages-and-jekyll
jekyll wiki
http://pages.github.com

Jekyll 的一些函数和技巧

2010-03-06T00:00:00-08:00

在使用 Jekyll 构建博客的过程中，我记录下了这些常见的函数，例如循环输出文章，输出分页等

一些函数

循环输出 3 篇文章

for post in site.posts limit:3
endfor

循环输出最近 3 篇

for post in site.posts offset:3 limit:3
endfor

日期

page.date | date:"%B %b, %Y"

分页输出

for post in paginator.posts
  content
endfor

分页

if paginator.previous_page
  //判断输出前一个分页
  //"page" + paginator.previous_page
endif
if paginator.next_page
  //判断输出后一个分页
  //"page" + paginator.next_page
endif
for page in (1..paginator.total_pages)
  if page == paginator.page
     //如果是当前分页
     //page
  else
     //不是的话输出其他分页链接号码
     //"page" + page
  endif
endfor

文章页面显示前一篇文章和后一篇文章

if page.previous
  //url:    page.previous.url
  //title:  page.previous.title | truncatewords:5
endif
if page.next
  //url:    page.next.url
  //title:  page.next.url | truncatewords:5

SeanLou的博客

Web开发中初学者容易混淆的9个命名约定

1. 类属性名前加下划线

PHP方式

JavaScript方式

2. 大写常量名

JavaScript方式

PHP方式

3. 单字母前缀

美元符号

应当这么使用吗？

4. 首字母大写

JavaScript方式

5. 驼峰式和下划线式

6. 目录结构

7. 语义

最悲剧的

稍好一些

最佳做法

8. 写两遍Header和Footer

9. 简写

三目运算符合适吗？

使用逻辑&&来写简短的条件判断句？

结论

Node.js使用 Mustache.js做模板

Jekyll Pagination

_config.yml

index.html

A note about page1

Jekyll Usage

Basic Structure

_config.yml

_includes

_layouts

_posts

_site

index.html and Other HTML/Markdown/Textile Files

Other Files/Folders

Running Jekyll

base-url option

Deployment

Jekyll Template data

Global

Site

Page

Post

Paginator

Jekyll YAML Front Matter

Predefined Global Variables

Custom Variables

Predefined Variables for Post Front-Matter

.html模板测试

_includes

_plugins

_layout

_post

_site

_config.yml

index.html 和所有的 HTML/Markdown/Textile 文件

使用Jekyll搭建静态博客

_includes

_plugins

_layout

_post

_site

_config.yml

index.html 和所有的 HTML/Markdown/Textile 文件

(转载)应用jekyll构建基于github page的博客

挑个新的博客模板

绑定独立域名

pygments代码高亮

安装pygments

生成高亮显示的css文件

如何使用

Markdown标记与Liquid逻辑处理

两个知识点

Markdown

Liquid

整合评论

整合rss订阅

8. 写两遍`Header`和`Footer`

使用逻辑`&&`来写简短的条件判断句？