搭建静态博客系统

这是whf的学习笔记，参考了一些内容。

静态博客搭建

功能： 创建新的博客，使用Markdown格式编写，实时预览，生成整站的静态HTML文件。

1定义命令格式：

格式	描述
myblog create [dir]	建一个博客，dir为博客所在的目录，默认为当前目录
myblog preview [dir]	实时预览，dir是博客所在的木目录
myblog build [dir] [--output target]	生成整站的静态HTML文件，dir是博客所在目录，target是静态HTML文件存放的目录

2编写命令行工具：

progress.argv的值：Node.js的命令名，当前js程序的文件，启动这个程序必须传递的参数（多个参数之间使用blank key间隔开）。

progress.arg是一个由多个字符串组成的值，我i们得使用一个专门的程序解析这些字符串。

思路：使用commander模块。

步骤：

1创建一个新的空项目文件夹，使用npm init 初始化package.json文件

在执行npm时候，按照提示填写信息，也可以直接按回车跳过。

2安装commander模块。

命令：npm install commander --save.

3安装之后，新建文件bin/myblog，键入代码：

#!/usr/bin/env node

var program=require('commander');

//命令版本号

program.version('0.0.1');

//help命令

program

    .command('help')

    .description('显示使用帮助')

    .action(function(){

         program.outputHelp();

    });

//create命令

program

    .command('create [dir]')

    .description('创建一个新的空的博客')

    .action(function(dir){

        console.log('create %s',dir);

    });

//preview命令

program

    .command('preview [dir]')

    .description('实时预览')

    .action(function(dir){

         console.log('preview %s',dir);

    });

//buile命令

program

    .command('build [dir]')

    .description('生成整站静态HTML')

    .option('-o,--output<dir>','生成静态HTML存放目录')

    .action(function(dir,options){

         console.log('create %s,output %s',dir,options.output);

    });

//开始解析命令

program.parse(process.argv);

statement:

·#！指定当前文件使用那个及诶时期来执行

·command-表示当前是什么命令。

·description-表示当前命令是什么。

·action-解析到当前命令式，执行其中的callback函数。

4修改package.json文件，增加bin属性

bin属性用来指定的那个钱模块需要链接命令，我们制订了myblog命令的执行文件是.bin/myblog

5链接命令和文件

命令：sudo npm link

解析：npm link 可以将任意位置npm包链接到全局执行环境。

6键入myblog help 如果出现这样的内容，说明框架搭建结束。

B

preview功能的实现：在使用build生成文章时需要渲染文章内容和列表页面。create时，提供的模板会成为创建的初始文件。预览包含了上述两者的功能。

1新建lib/cm_preview

代码：

//使用Express启动一个Web服务器

//‘/assets’开头的URL时博客中用到的静态资源文件

//‘/post’开头的URL时文章内容页面，比如网页/posts/A.html文件对应的是-posts/A.md

//‘/’代表文章列表页面

var express=require('express');

var serveStatic=require('serve-static');

var path=require('path');

module.exports=function (dir){

     dir=dir||',';

     //初始化 Express

     var app=express();

     var router=express.Router();

     app.use('/assets',serverStatic(path.resolve(dir,'assets')));

     app.use(router);

     //渲染文章

     router.get('/posts/*',function(req,res,next){

         res.end(req.params[0]);

     });

     //渲染列表

     router.get('/',funtion(req,res,next){

         res.end('文章列表');

     });

     app.listen(3000);

}

2安装express和serve-static模块。

statement:

为一个模块安装一个依赖时，一般需要先安装他们。即：在 模块根目录下 npm install module-name。然后，连同版本号将他们手动添加到模块配置文件package.json中的‘dependencies’。

--save和save -dev可以代替修改package.json中依赖的步骤。

-save 和 save -dev的区分主要是，前者放在dependencies适用于产品模式，后者放在Devdependencies适用于开发测试框架。

3修改bin/myblog文件中的preview命令的callback()。

program

     .command('preview [dir]');

     .description('实施预览');

     .action(require('../lib/cmd_preview'));

4statement：端口相关知识