[toc]
前言
之前用Python寫過(guò)類似的工具吉挣，更能上來(lái)說(shuō)一般般著洼。而且實(shí)用性不是很強(qiáng)。http://blog.csdn.net/marksinoberg/article/details/51863506
然后好巧不巧又看到了一個(gè)Node上的相關(guān)模塊，看起來(lái)渲染效果比我那個(gè)好多了。聯(lián)想到hexo這款靜態(tài)博客生成工具寞忿，就思量著也大致的做一下。
環(huán)境及編碼
接下來(lái)簡(jiǎn)單的模擬一下相關(guān)的實(shí)現(xiàn)顶岸。代碼比較凌亂腔彰，思維比較混亂，還望海涵（雖然主要是作為我自己的筆記辖佣，但如果對(duì)你有些許幫助霹抛，那就不枉我碼了這么多字咯）。
搭建環(huán)境
所依賴的第三方模塊有如下幾個(gè)：
-
express: 開啟本地服務(wù)卷谈， 預(yù)覽生成效果杯拐。 -
Markdown-it: 渲染md文件為HTML內(nèi)容。 -
rd: 一個(gè)讀取文件夾內(nèi)容的好幫手世蔗。 -
commander: 制作命令行工具的一大利器端逼。
下面簡(jiǎn)要對(duì)這幾個(gè)模塊進(jìn)行闡述，以及相關(guān)的使用技巧凸郑。
express
express不僅作為對(duì)connect的高層封裝裳食，更包含了一些額外的處理。所以我們可以方便的進(jìn)行路由控制芙沥，這對(duì)于本次的工具而言，是個(gè)不錯(cuò)的選擇。
// 初始化服務(wù)器
var app = express();
var router = express.Router();
app.use('/assets', server_static(path.resolve(dir, 'assets')));
app.use(router);
// 渲染文章
router.get('/posts/*', function(req, res, next){
var name = stripExtname(req.params[0]);
// 渲染req.params[0]對(duì)應(yīng)的文章而昨，然后展示給前臺(tái)
res.end(html);
});
// res.end(req.params[0]);
});
// 渲染列表
router.get('/', function(req, res, next){
// 讀取源文件目錄救氯， 渲染出列表內(nèi)容。
res.end('list of articles.');
});
app.listen(8080);
markdown-it
相對(duì)于Python中的那些第三方庫(kù)歌憨，我倒是覺(jué)得Node中與其也沒(méi)甚么兩樣着憨。使用起來(lái)同樣很簡(jiǎn)單。
第一步务嫡，引入依賴
let markdowner = require('markdown-it');
第二步甲抖， 配置構(gòu)造器
var md = new markdowner({
html: true,
prefix: 'code-',
});
第三步， 調(diào)用渲染方法心铃，獲取渲染后內(nèi)容
var html = md.render(sourcedata||'');
如此准谚，便是markdown-it的基礎(chǔ)內(nèi)容了，待會(huì)將在代碼中更加詳細(xì)的運(yùn)用去扣。
commander
用過(guò)Python的argparser的估計(jì)都知道柱衔，很方便的一個(gè)處理命令行參數(shù)的第三方庫(kù)。不過(guò)Node中的commander用起來(lái)更方便愉棱。
下面簡(jiǎn)單的介紹一下使用流程唆铐。詳細(xì)內(nèi)容還是看人家的官網(wǎng)吧，如下：
https://www.npmjs.com/package/commander
第一步奔滑， 安裝模塊
npm install commander --save
第二步艾岂，編碼
/**
* 一個(gè)命令行工具庫(kù)。
*/
let commander = require('commander');
// help 命令
commander.command('help')
.description('顯示工具如何使用的幫助信息')
.action(function(){
commander.outputHelp();
});
// create 命令
commander.command('create [dirname]')
.description('創(chuàng)建一個(gè)空的博客')
.action(function(dirname){
console.log(dirname+' 創(chuàng)建完成朋其。')
});
// preview 命令
commander.command('preview [dirname]')
.description('預(yù)覽獲取到的Markdown文件夾內(nèi)容')
.action(function(dirname){
console.log(' preview of %s', dirname);
});
// .action(require('./cmd_preview'));
// build 命令
commander.command('build [dirname]')
.description('根據(jù)給定的文件夾路徑生成HTML內(nèi)容.')
.option('-o OR --output <dirname>', '導(dǎo)出生成的HTML存放的路徑')
.action(function(dirname){
console.log('build based on %s', dirname);
});
// .action(require('./cmd_build'));
// 解析相關(guān)命令
commander.parse(process.argv);
第三步王浴， 查看效果
如果想更加方便一點(diǎn)，直接使用命令來(lái)操作令宿。使用
npm link
當(dāng)然了叼耙，還需要設(shè)置一下對(duì)應(yīng)的package.json文件內(nèi)容。這里不過(guò)多敘述了粒没。
rd
我這里的需求是讀取_posts文件夾下的Markdown源文件筛婉，所以只需要readFile方法即可。
具體代碼如下：
rd.readFile(sourcedir, function(err, files){
if(err){
console.log('讀取文件夾內(nèi)容失旕伞爽撒！');
return;
}
// 遍歷文件夾列表，對(duì)每一個(gè)文件執(zhí)行渲染操作响蓉。
files.forEach(function(file){
// 做自己的邏輯處理即可硕勿。
});
});
這個(gè)模塊比較簡(jiǎn)單，有興趣的可以參考下面的作者鏈接枫甲。
https://github.com/leizongmin/node-rd
核心編碼
下面正式開始今天的主題源武，做一個(gè)帶預(yù)覽功能的Markdown文件轉(zhuǎn)HTML頁(yè)面的工具扼褪。
cmd_preview模塊
/**
* 關(guān)于預(yù)覽實(shí)現(xiàn)相關(guān)的代碼。
*/
let express = require('express');
let path = require('path');
let markdowner = require('markdown-it');
let fs = require('fs');
let rd = require('rd');
var md = new markdowner({
html: true,
langPrefix: 'code-',
});
module.exports = function(dir) {
dir = dir || '.';
// 初始化服務(wù)器
var app = express();
var router = express.Router();
app.use(router);
// 渲染文章
router.get('/posts/*', function(req, res, next){
var name = stripExtname(req.params[0]);
var file = path.resolve(dir, '_posts', name+'.md');
console.log('---dir--', dir);
console.log('---name--', name);
console.log('---file--', file);
fs.readFile(file, function(err, content){
if(err){
console.log('讀取文件失斄黄堋话浇！');
res.end(JSON.stringify(err)+"\n");
return next(err);
}
res.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});
var html = markdownTOHTML(content.toString());
console.log('讀取文件成功， 解析后的內(nèi)容為：\n', html);
res.end(html);
});
// res.end(req.params[0]);
});
// 渲染列表
router.get('/', function(req, res, next){
var sourcefolder = path.resolve(dir, '_posts');
rd.readFile(sourcefolder, function(err, files){
if(err){
console.log('讀取文件夾內(nèi)文件失斈志俊幔崖！');
return next(err);
}
res.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});
var html = "<html><h1>Markdown 轉(zhuǎn) HTML 實(shí)時(shí)預(yù)覽</h1><hr><br />";
files.forEach(function(filepath){
html += "<a href='/posts/"+ get_file_name(filepath) +".md' target='_blank'>"+get_file_name(filepath)+"</a><br /><br />";
});
html += "</html>";
res.end(html);
});
// res.end('list of articles.');
});
app.listen(8080);
};
function stripExtname(name) {
var i = 0-path.extname(name).length;
if(i==0) i=name.length;
return name.slice(0, i);
}
function get_file_name(fullname){
var ls = fullname.toString().split('\\');
var filename = ls[ls.length-1].split('.');
// console.log('ls--', ls);
// console.log('filename--', filename);
return filename[0];
}
function markdownTOHTML(content) {
return md.render(content||'');
}
cmd_build模塊
/**
* 實(shí)現(xiàn)Markdown文件到HTML文件的轉(zhuǎn)換。
*/
let markdowner = require('markdown-it');
let rd = require('rd');
let path = require('path');
let fs = require('fs');
var md = new markdowner({
html: true,
langPrefix: 'code-',
})
module.exports = function(dir) {
dir = dir || '.';
console.log('當(dāng)前文件路徑為：', dir);
// 讀取出給定目錄下的所有的文件
// 將所有Markdown文件依次轉(zhuǎn)成HTML頁(yè)面渣淤，并進(jìn)行保存操作赏寇。
get_files_by_dir(dir);
}
function get_files_by_dir(dir) {
// 計(jì)算出源文件的路徑
var sourcedir = path.resolve(dir, '_posts');
var publicdir = path.resolve(dir, 'public');
rd.readFile(sourcedir, function(err, files){
if(err){
console.log('讀取文件夾內(nèi)容失敗价认！');
return;
}
// 遍歷文件夾列表嗅定，對(duì)每一個(gè)文件執(zhí)行渲染操作。
files.forEach(function(file){
var html = md2html(file);
var filename = get_filename_by_path(file);
var output = path.resolve(publicdir, filename+'.html');
console.log('保存路徑為：', output);
save_html_content(html, output);
console.log('%s.html 生成成功刻伊！', filename);
});
});
}
function md2html(filepath){
var content = fs.readFileSync(filepath);
var html = md.render(content.toString()||'');
return "<html><head><meta charset='UTF-8'><title>"+get_filename_by_path(filepath)+"</title></head>"+html+"</html>";
}
function save_html_content(content, outpath){
fs.writeFile(outpath, content, function(err){
if(err){
console.log('save_html_content: 保存文件內(nèi)容失斅督洹！');
return;
}
console.log('save_html_content: %s 保存成功捶箱！', outpath);
});
}
function get_filename_by_path(filepath){
var paths = filepath.toString().split('\\');
return paths[paths.length-1].split('.')[0];
}
打造命令行工具
還是用剛才的hello.js智什，現(xiàn)在稍微修改一下action里面的內(nèi)容，對(duì)應(yīng)我們剛才做的那兩個(gè)小模塊丁屎，做下修改即可荠锭。完整代碼如下：
/**
* 一個(gè)命令行工具庫(kù)。
*/
let commander = require('commander');
// help 命令
commander.command('help')
.description('顯示工具如何使用的幫助信息')
.action(function(){
commander.outputHelp();
});
// create 命令
commander.command('create [dirname]')
.description('創(chuàng)建一個(gè)空的博客')
.action(function(dirname){
console.log(dirname+' 創(chuàng)建完成晨川。')
});
// preview 命令
commander.command('preview [dirname]')
.description('預(yù)覽獲取到的Markdown文件夾內(nèi)容')
// .action(function(dirname){
// console.log(' preview of %s', dirname);
// });
.action(require('./cmd_preview'));
// build 命令
commander.command('build [dirname]')
.description('根據(jù)給定的文件夾路徑生成HTML內(nèi)容.')
.option('-o OR --output <dirname>', '導(dǎo)出生成的HTML存放的路徑')
// .action(function(dirname){
// console.log('build based on %s', dirname);
// });
.action(require('./cmd_build'));
// 解析相關(guān)命令
commander.parse(process.argv);
寫點(diǎn)xx.md
巧婦難為無(wú)米之炊证九， 現(xiàn)在先在hello.js的同級(jí)目錄下建個(gè)文件夾_posts，里面寫點(diǎn)xx.md文件共虑，然后建一個(gè)public文件夾保存生成的HTML文件愧怜。比如我的目錄結(jié)構(gòu)是這樣的。
E:\Code\Nodejs\learn\libs-learn\commander-related>tree /f .
卷 文檔 的文件夾 PATH 列表
卷序列號(hào)為 0000-4823
E:\CODE\NODEJS\LEARN\LIBS-LEARN\COMMANDER-RELATED
│ cmd_build.js
│ cmd_preview.js
│ hello.js
│
├─public
│
└─_posts
helloworld.md
second.md
演示
首先是預(yù)覽實(shí)現(xiàn)妈拌，在命令行里輸入以下命令：
node hello.js preview . # .代表當(dāng)前目錄
結(jié)果如下：
然后是針對(duì)每一篇文章生成效果的演示拥坛。
最后就是看下build功能的實(shí)現(xiàn)。
現(xiàn)在在命令行里面輸入以下命令：
node hello.js build . # .代表當(dāng)前目錄
然后看下效果尘分。
總結(jié)
大致來(lái)說(shuō)功能就算是完成了猜惋，但是目前這樣子是沒(méi)法直接應(yīng)用的。很多東西都需要潤(rùn)色培愁，比如：
- 模板化HTML頁(yè)面處理著摔。
- 命令行選項(xiàng)的link實(shí)現(xiàn)。
- 通過(guò)監(jiān)測(cè)文件內(nèi)容變化實(shí)現(xiàn)實(shí)時(shí)預(yù)覽定续。
就先到這里吧谍咆，今天又發(fā)現(xiàn)了兩個(gè)不錯(cuò)的網(wǎng)址禾锤，然后還是先去學(xué)一波，補(bǔ)充補(bǔ)充知識(shí)吧卧波。很多時(shí)候时肿，不是能力不夠庇茫，而是見(jiàn)識(shí)不足港粱。
