您的位置：首页 > Web前端 > Node.js

用node.js建博客(二) - 构建第一个markdown页面

2016-07-29 00:00 423 查看
上面文章《NodeBlog(一) - node.js安装及Express框架简介》 中我已经做好了准备工作，接下来需要快速构建起第一篇博文，当然这个博文是基于markdown于语法。

Markdown语法的CheatsSheet附件有下载:

http://dl.iteye.com/topics/download/2cca1dea-14a2-35d5-bb05-78e03a87b437

1. 为项目添加markdown-js依赖，加入markdown解析能力:

express 并不直接支持markdown语法，需要为项目添加markdown-js模块的依赖.

我们先回顾一下express项目结构:

Express 目录结构 t-1

目录/文件说明
./根目录，我们的node.js代码都会方这个目录
package.jsonnpm依赖配置文件， 类似ruby中的Gemfile, java Maven中的pom.xml文件. 一会需要在这里添加 markdown-js 项目依赖
app.js 项目的入口文件
public/
javascript/
stylesheets/
images/
存放静态资源文件, jquery/prettify.js等静态库会方这里，当然自己编写的前端代码也可以放这里
views/ 模板文件, express默认采用jade, 当然，你也可以使用自己喜欢的haml,JES, coffeeKup, jQueryTemplate等模板引擎
node_modules/存放npm安装到本地依赖包，依赖包在package.json文件中声明，使用npm install指令安装








这里我们要修改package.json文件，添加相关依赖:

原package.json文件

{
"name": "application-name"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.4.6"
, "jade": ">= 0.0.1"
}
}


我们修改成:

{
"name": "nodeblog"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.4.6"
, "jade": ">= 0.0.1"
, "markdown-js": ">= 0.0.1"
}
}


name： 指定我们app的名称,

dependesies： 中定义依赖库，这里添加了对markdown-js的依赖，

private： 制定是否将程序发布到npm全局仓库中

使用npm安装依赖:

$ npm installl

控制台 写道

markdown-js@0.0.3 ./node_modules/markdown-js

└── test@0.4.1

此时在 ./node_modules 目录下会多出一个 mardown-js 目录



到这里，我们可以开始编码了, 当然需要选择一个合适的编辑器,

xVim:

gVim/MacVim, 需要自行配置插件, 下面个人推荐一些

NERDTree: http://www.vim.org/scripts/script.php?script_id=1658, 提供文件夹导航, eclipse中的project view

Snippets: http://www.vim.org/scripts/script.php?script_id=2540, 让Vim支持TextMate中Tab补全功能

jade: https://github.com/digitaltoad/vim-jade, Vim我还没有装这个插件

TextMate:

默认提供markdown语法支持， jade 和 node.js 需要安装bundles

jade: https://github.com/miksago/jade-tmbundle

Node.js: https://github.com/drnic/javascript-node.tmbundle

2. 让Express支持Markdown:

打开app.js开始编写node.js代码， 在没写任何代码前的 app.js 大致如下:

var express = require('express');
var app = module.exports = express.createServer();

app.configure(function(){
// set some config
});

app.get('/', function(req, res){
res.render('index', {
title: 'Express'
});
});

app.listen(3000);


第一行导入 express 模块， 可以理解成java中的 import [packagename]。一会需要用这个语法来导入markdown-js模块模块

(node.js的模块管理基于CommonJS规范，详细内容可以参考CommonJS Wiki。)

导入markdown模块:

var express = require('express');
var markdown = require('markdown-js');

var app = module.exports = express.createServer();

// ... some code

app.listen(3000);


到这里已经可以在express中渲染markdown格式的字符(就这么简单? 是的，这个是最简单的情况). 我们来写个例子看看:

首先我们设计一个url

URL地址描述
/markdown当用户从浏览器访问这个页面的时候，输出一个指向JavaEye的超链接:
markdown 字符串:

[Java Eye](http://www.iteye.com/ "Click")

生成的html代码:
<a href="http://www.iteye.com" title="Click">JavaEye</a>
http://localhost:3000/

为app.js添加如下代码:

app.get('/markdown', function(req, res) {
var html = markdown.makeHtml("[Java Eye](http://www.iteye.com/ \"Click\") ");
res.send(html)
res.end();
})


markdown.markHtml(); 是将markdown格式的字符转换成Html,

(什么是markdown语法？ 看这里:
http://qingbo.net/picky/502-markdown-syntax.html)

运行 app:

$ node app.js

在浏览器访问
http://localhost:3000/markdown/



到这里，已经基本实现在express中渲染markdown字符。 当然这显然不能满足我们的要求, 下面继续

3. 让Express渲染markdown文件

app.js中，给express注册md渲染器: (Express 2.x, 方法, 最新版3.x不适用 - 2012-09-08) 

var express = require('express');
var markdown = require('markdown-js');

var app = module.exports = express.createServer();

// ... ... some configuration code

app.register('.md', {
compile: function(str, options){
var html = markdown.makeHtml(str);
return function(locals){
return html.replace(/\{([^}]+)\}/g, function(_, name){
return locals[name];
});
};
}
});

app.get('/markdown', function(req, res) {
var html = markdown.makeHtml("[Java Eye](http://www.iteye.com/ \"Click\") ");
res.send(html);
});

app.listen(3000);


Express 3.x 中添加方法:(2012-09-08), 相关代码可以在附件中获取 

var fs = require('fs');
// ...
// Express 3.x 中不再提供register方法, 这个方式由 flovex 提供

app.engine('md', function(path, options, fn){
fs.readFile(path, 'utf8', function(err, str){
if (err) return fn(err);
str = markdown.parse(str).toString();
fn(null, str);
});
});

修改 "/markdown" url的处理程序

app.get('/markdown', function(req, res) {
res.render('index.md', {layout: false});
})


在views/目录下创建一个 index.md 文件

内容如下

This is a demo page
===================

[Java Eye](http://www.iteye.com/ \"Click\")


运行程序

$ node app.js

访问 http://localhost:3000/markdown



ok~ 到这里已经构建了第一个markdown页面。

不过今天我的代码速度比博文快，有兴趣的可以访问如下地址查看这个博客:

http://nodeblog.cloudfoundry.com/

What next??

让这个博客智能点:

*.md文件进行统一管理

将其影射成*.html地址

更新说明:

2012-09-08

1. 更新Express3.x中注册markdown解析的方式. 该方法由
flovex 提供.

2. 新增
mdnode_for_express3.0.zip附件, 演示Express3.x中注册markdown解析器
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航