`
witcheryne
  • 浏览: 1099513 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • node
 
阅读更多

上面文章《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.json   npm依赖配置文件, 类似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, 需要自行配置插件, 下面个人推荐一些

TextMate:

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

 

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



到这里,已经基本实现在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页面。
不过今天我的代码速度比博文快,有兴趣的可以访问如下地址查看这个博客:


What next??

让这个博客智能点:
  1. *.md文件进行统一管理
  2. 将其影射成*.html地址

更新说明:

2012-09-08

1. 更新Express3.x中注册markdown解析的方式. 该方法由 flovex 提供. 
2. 新增mdnode_for_express3.0.zip附件, 演示Express3.x中注册markdown解析器


  • 大小: 35.8 KB
  • 大小: 32.7 KB
  • 大小: 35.8 KB
分享到:
评论
3 楼 witcheryne 2012-09-07  
flovex 写道
博主的代码主要针对express 2.X, 对于安装了express 3.X的朋友,需要修改app.register不分代码才能运行正常:

//原有代码
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.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);
  });
});

//注意fs在开始的部分要require一下:
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , fs = require('fs')
  , path = require('path');
var markdown = require('markdown-js');


多谢补充!!  周末我更新到博客中.

P.S:
Express 3.x 终于出来了!!!  改天试试
2 楼 flovex 2012-09-07  
博主的代码主要针对express 2.X, 对于安装了express 3.X的朋友,需要修改app.register不分代码才能运行正常:

//原有代码
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.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);
  });
});

//注意fs在开始的部分要require一下:
var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , fs = require('fs')
  , path = require('path');
var markdown = require('markdown-js');
1 楼 baryon 2012-02-15  
markdown的转换建议使用marked这个库, 这里有一个性能对比

$ node test --bench
marked completed in 6485ms.
marked (with gfm) completed in 7466ms.
discount completed in 7169ms.
showdown (reuse converter) completed in 15937ms.
showdown (new converter) completed in 18279ms.
markdown-js completed in 23572ms.


https://github.com/chjj/marked

相关推荐

    Node.js-StaticSiteBoilerplat-构建现代静态网站的更好工作流程

    标题 "Node.js-StaticSiteBoilerplat-构建现代静态网站的更好工作流程" 提到的是一种基于Node.js的静态网站生成器,它旨在提供一种高效、现代化的工作流程来创建静态网站。Node.js是一个开放源代码、跨平台的...

    Node.js学习笔记.md

    - Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它使得JavaScript能够脱离浏览器环境在服务器端运行。 - 它使用了一个事件驱动、非阻塞I/O模型,使其轻量又高效。 - Node.js的包管理器npm(Node Package...

    Node.js-mdblog针对开发的人员的Markdown博客实现

    在“mdblog”项目中,开发人员利用Node.js的强大功能构建了一个针对开发者的Markdown博客系统。这个系统以Markdown作为主要的写作格式,因为它简洁、易读且易于编写,特别适合程序员使用。 ### Markdown博客系统...

    Node.js-PencilBlue一个全功能的Node.jsCMS和博客平台

    PencilBlue是一款用Node.js构建的全功能内容管理系统(CMS)和博客平台,它为开发者提供了丰富的功能和高度的可扩展性。 ### 1. 插件系统 PencilBlue的插件系统是其核心特点之一。通过这个系统,用户和开发者可以...

    Node.js-将命令行界面描述为易于阅读的人性化的markdown文档

    在IT行业中,Node.js是一个非常流行的JavaScript运行环境,它允许开发者使用JavaScript进行服务器端编程。在标题和描述中提到的“Node.js-将命令行界面描述为易于阅读的人性化的markdown文档”是一个关于如何利用...

    Node.js-Yohe一个静态博客生成器采用Node.js开发

    Node.js作为一个JavaScript运行环境,允许开发者使用JavaScript进行服务器端编程,这使得 Yohe 在编写和维护代码时保持了一致性,降低了学习曲线。 Yohe的工作原理是将Markdown格式的内容转换为HTML,Markdown是一...

    Node.js-Hexo博客搭建全攻略

    本文将详细介绍如何使用Node.js和Hexo构建一个功能齐全、个性化十足的博客。 ### 一、安装Node.js 首先,我们需要在本地安装Node.js环境。访问[Node.js官网](https://nodejs.org/)下载对应操作系统的安装包,按照...

    Node.js-MinimalMistakes一个灵活的两列Jekyll主题

    Node.js是一个开放源代码、跨平台的JavaScript运行环境,它允许开发者在服务器端执行JavaScript代码。这个技术以其高效、轻量级和强大的非阻塞I/O模型而受到广大开发者的青睐。在Node.js中,我们可以使用各种库和...

    Wiki.js|基于NodeJSGit和Markdown构建的现代轻量级和强大的维基应用程序

    Node.js的使用表明这是一个服务器端应用,它利用JavaScript进行后端开发,这使得开发者可以使用同一门语言处理前端和后端逻辑,提高了开发效率。 **文件名称列表:** "Requarks-wiki-427e535"看起来像是Wiki.js的...

    基于Node.js多人博客系统的设计与实现.docx

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,其特点是使用事件驱动、非阻塞 I/O 模型,这使得 Node.js 在处理数据密集型实时应用时表现得非常轻量和高效。Node.js 的这些特性非常适合用于开发响应...

    Nfile是一个基于Node.js的简易文件系统支持文档的上传编辑和预览

    Nfile 是一个强大的工具,专为那些寻求在Node.js环境中构建简单文件系统并处理文档上传、编辑和预览需求的开发者设计。这个开源项目利用了Node.js的非阻塞I/O特性和事件驱动架构,使其在处理大量并发请求时表现出色...

    Node.js应用开发 客观练习题2.doc

    Node.js是基于Chrome的V8引擎构建的JavaScript运行时环境,可以使用npm(Node Package Manager)来管理第三方包,例如安装Markdown包的命令是`npm install markdown`。 在Node.js的文件系统操作中,`fs.writeFile`...

    markdown编辑器markdown-it.zip

    如果是一个源码文件,开发者可能需要先通过npm(Node.js包管理器)进行安装和构建,以便在小程序环境中使用。 在微信小程序中引入Markdown-it,通常需要以下步骤: 1. 在小程序项目中,创建一个`utils`目录,用于...

    Node.js-各种第三方技术文档轻松转换成epub格式装入你的电子阅读器里

    在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它以其高效、异步非阻塞I/O以及丰富的生态系统赢得了开发者们的喜爱。在这个场景中,我们关注的是如何利用Node.js来处理技术文档,特别是将它们...

    Node.js-KPush定制个人专属的Kindle电子书推送服务

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它以其高效的异步I/O和丰富的模块生态,成为了构建服务器端应用的理想选择。在KPush项目中,我们将利用Node.js的特性,结合第三方库和API,来构建这个推送服务...

    UWCB-09-NODE.js-Professional-README-Generator:第9周作业

    1. **Node.js基础**:Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行编程。通过学习本项目,学生将了解Node.js的基本结构、模块系统、事件驱动模型以及非阻塞I/O。...

    three.js-r144

    three.js 是一个广泛使用的 JavaScript 库,专为在 Web 浏览器中创建交互式 3D 图形而设计。"r144" 表示这是该库的第 144 个发布版本,通常每个版本会包含错误修复、新特性和性能改进。 **描述分析:** 描述中提到...

    StoryPublish:Node.js-Express-MongoDB-Google身份验证

    本文将深入探讨如何使用Node.js、Express和MongoDB构建一个故事发布平台,并集成Google身份验证。这个平台将允许用户通过Google账户安全地登录并分享他们的故事。 ### 一、Node.js基础 Node.js是一个基于Chrome V8...

    基于Vue.js+Node.js技术的旅游App《蚂蚁旅行》的设计与开发171209(附源码+数据库)

    综上所述,《蚂蚁旅行》项目结合了前端的Vue.js和后端的Node.js技术,辅以Mybatis、MySQL、Redis等工具,构建了一个功能完善的旅游平台。它涵盖了用户交互、数据存储、地图服务、实时通信等多个方面的技术,是学习和...

Global site tag (gtag.js) - Google Analytics