本片为《用node.js建博客》系列的最后一篇,如果你第一看到这个系列, 可以在文章结尾看到前几篇。
技术准备
1. 如何添加代码高亮支持
代码美化选用Google-code 的 PrettyPrint。使用非常方便,能够自动匹配语言。
2. 使用CSS框架完成最基本的美化(本片将不涉及)
CSS框架打算用BluePrint, 如果只需要Grid, 选用960Grid也不错。
思路
以前采用的是直接渲染markdown的方式。在Express中注册一个markdown渲染器,在response时将markdown渲染输出。这种方式的缺点就是不好对输出的html进行修改(比如添加js,css等).
因此需要修改markdown的渲染方式,将markdown嵌入到jade模板中。
Let's do it:
1. 修改测试:
test/page-test.js
var vows = require('vows'); var apiEasy = require('api-easy'); var assert = require('assert'); var jsdom = require('jsdom').jsdom; var suite = apiEasy.describe('blogs'); suite.discuss("when visit home page") .discuss('can view blog list and it should response 200 status') .use('localhost', 3000) .setHeader('Content-Type', 'text/html; charset=utf-8') .get() .expect(200) .expect("should respond with x-powered-by", function(err, res, body) { // express assert.include(res.headers, 'x-powered-by'); }) .expect("should respond with 'Nodeblog - Home' title", function (err, res, body) { var doc = jsdom(body); //匹配title assert.equal(doc.title, "NodeBlog - Home"); }) .export(module);
test/blogs-test.js
var vows = require('vows'); var apiEasy = require('api-easy'); var assert = require('assert'); var jsdom = require('jsdom').jsdom; var suit = apiEasy.describe("/blogs/*.html") suit.discuss('when vists the markdown blog,') .use('localhost', 3000) .setHeader('Content-Type', 'text/html; charset=utf-8') .path('/blogs/') .discuss('if the markdown file is exists, show blog') .get('monitor_doc') .expect(200) .expect("should respond 'NodeBlog - Blogs' title", function (err, res, body) { var doc = jsdom(body) assert.equal(doc.title, 'NodeBlog - Blogs'); }) .undiscuss() .discuss('if the markdown file is not exists') .get('unknow') .expect(404) .expect("should respond 'NodeBlog - 404' title", function (err, res, body) { var doc = jsdom(body) assert.equal(doc.title, 'NodeBlog - 404') }) .export(module);
2. 在views/blogs/下添加show.jade
该文件用于显示 markdown blog
views/blogs/show.jade:
div.blog_main
!{blog_content}
此时需要用 !{} 不能使用 #{}, 否则jade会将"<",">"当特殊字符处理,将其转换成转移字符。
3. 修改app.js
app.get('/blogs/:title', function(req, res, next) { var urlPath = [ // 获取相对路径, 我的应该是: // /Users/lvjian/projects/nodejs/nodeblog process.cwd(), '/views/blogs/', req.params.title, '.md' ].join(''); var filePath = path.normalize(urlPath) path.exists(filePath, function (exists) { if(!exists) { console.log('jump 404'); next(); } else { var content = fs.readFileSync(filePath, config.encoding); // 这里将markdown转成html, 然后以参数形式输出 var html_content = markdown.parse(content); res.render('blogs/show', { title: config.app + " - Blogs" , blog_content: html_content }); } }); })
此时启动app, 访问博客可看到效果.
4. 为show.jade添加prettyprint支持:
下载prettyprint, 将其放到 ./public/lib/ 文件夹下:
在show.jade文件中使用:
link(rel='stylesheet', href='/libs/prettify/sunburst.css', type="text/css")
script(type='text/javascript', src='/libs/prettify/prettify.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js')
style(type="text/css")
h1 {
text-align: center;
}
div.blog_main
!{blog_content}
script
// markdown-js会用<code><pre></pre></code>将代码包起来
// 不过无法为其添加prettyprint class属性
// 这里采用jquery手动添加
$('code, pre').addClass('prettyprint');
prettyPrint();
看一下效果:
What' next? Final了还有next...???
为什么Final?
边写博客边coding有点太慢了,打算先将博客建好,之后以技术应用为主题写文章。
接下来要做什么:
- 采用mongodb保存markdown数据,node.js中mongoose模块提供了对mongodb的支持
- 添加用户认证(当然为了保证暂时只能我自己用)
- 设计REST-ful接口,并且创建node commandline工具,让我可以用Textmate/MacVim直接写博客。