搭建静态博客系统

这是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','生成静态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:端口相关知识

你可能感兴趣的:(前端学习每天笔记)