上面文章《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,
运行 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
ok~ 到这里已经构建了第一个markdown页面。
不过今天我的代码速度比博文快,有兴趣的可以访问如下地址查看这个博客:
What next??
让这个博客智能点:
- *.md文件进行统一管理
- 将其影射成*.html地址
更新说明:
2012-09-08
1. 更新Express3.x中注册markdown解析的方式. 该方法由
flovex 提供.
- 大小: 35.8 KB
- 大小: 32.7 KB
- 大小: 35.8 KB
分享到:
相关推荐
打造Node.js全栈开发工程师,视频教程内容包括以下内容:一、Node基础知识:学习Node中的核心模块、核心变量,如何操作文件以及安装管理第三方的模块,为大家后面进入服务器端的学习打下扎实的基础;二、Node服务器...
第1课- Lesson2- 第3课-Node 第4课-构建 第5课- 第6课- 第7课- 第8课- 第9课-Koa 第10课 第11- 第12课- 节点相关入门资料 1. JavaScript 2.节点 3. web服务器框架 表达 考阿 thinkjs 网络套接字 模板引擎 模板...
通过利用Vue.js和Node.js最佳实践来构建高性能应用程序 基于Node.js平台,快速,开放,极简的Web开发框架 宇宙第一Vue第三方组件库,有不服? 一种可在Node环境下模拟浏览器的API的库 使用JavaScript将HTML转换为...
在撰写本文时,构建过程涉及使用称为的由node.js支持的静态站点生成器,但是将markdown文件拖入此repo是远离依赖hexo的第一步。 1-使用hexo进行设置和构建 在通过调用hexo init设置了hexo的新实例之后,克隆此仓库...
博客文章和项目简介使用Hexo编写,Hexo是一个将markdown转换为静态页面的node.js框架。 目前这是一个不完整的项目,因为我还有很多事情要做。 去做: 撰写真实的博客文章 在链接之间添加过渡 修复dotdotdot.js...
另外,如果你需要搭建一个企业内网论坛,请使用 SymX。 动机 Sym 的诞生是有如下几点原因: (正版) 很多系统界面上仍然保持着老式风格,远远没有跟上时代发展的脚步,它们没有创新、好玩的特性,缺少现代化...
ziqiangxu.github.io 基于 vuepress 的文档管理系统 使用场景 管理技术文档 管理个人博客 # Now using node v14.5.0 (npm v6.14.5) npm run docs:build # 构建文档 ...如果文章第一行是一级标题则使用,否则使用文件名
用法在终端中键入node index.js ,然后在提示后依次ENTER每个响应后按ENTER 。屏幕截图贡献欢迎贡献,欢迎克隆或添加并添加! 它是开源的。测验不适用有什么问题吗我的个人资料: 该项目是MIT许可的。 :copyright:...
第一个日志概述了项目的要求和总体计划,可在找到。最近的日志当前状态手动构建Svelte模板,已详细介绍该过程在Svelte中实现了基本的Markdown渲染(正在进行中...) 项目仍处于开发初期安装注意,您必须安装Node> ...