node.js + express4 写一个自己的博客网站[2]
来源:互联网 发布:怎么初始化二维数组 编辑:程序博客网 时间:2024/06/09 17:17
Nark 22 2014年10月29日 发布
上篇链接:node.js + express4 写一个自己的博客网站[1]
- 0.前言
- 1.需求
- 2.技术选型
- 3.正文,动手
- 3.1 Hello, Express
- 3.2 Express 中的 Routing
- 3.3 认识一下 Middleware
- 3.4 引入markdown解析
- 3.5 模板引擎 Jade
3.4 引入markdown解析
在上一篇的末尾,我们已经可以给读者们提供所有文章的列表,并且在点击列表项后导航至对应文章的位置。只是在展现页面时我们简单的使用了
fs.readFile(filename, 'utf-8', function (err, data) { if (err) res.send(err); res.send(data);});
这样的方式,直接将源文件的内容打印了出来。那么接下来的事情也不会很复杂,无非是将readFile()
后得到的字符串处理成html格式的内容即可。
关于markdown转换html的组件网上有不少现成的可用。经过了简单快速的试用后,我暂时敲定使用marked + pygmentize-bundled 的组合。码农么,自然优先关注代码着色高亮的功能。Pygmentize 在此间也算是鼎鼎大名了。
来看下简单的示例:
var marked = require('marked');var pygmentize = require('pygmentize-bundled');//设置pygmentize-bundled来做代码高亮转换marked.setOptions({ highlight: function (code, lang, callback) { pygmentize({ lang: lang, format: 'html' }, code, function (err, result) { callback(err, result.toString()); }); }});//自定义方法,接收md文件内容,返回一个包含转换结果的回调函数function markdown2html(data, callback) { marked(data, function (err, content) { return callback(err, content); });}
你问我为啥多此一举要在marked()方法外面再包装一层,因为我也不知道这玩意儿到底好不好用,以后万一发现有坑,多个中间层替换起来也方便。
好咧~那么组合一下~
fs.readFile(filename, 'utf-8', function (err, data) { if (err) res.send(err); markdown2html(data, function (err, content) { if (err) res.send(err); res.send(content); });});
打完收工,看看效果吧。
啥?你说还是难看?这...老子也只是个低端后台码农而已,css文件什么的自己去网上抄一份!
...
...
...
...
啥?抄回来了但是不会用?不知道往哪儿放?把css文件内容读取出来然后拼接到转换完成的html内容头上然后一股脑的res.send()
回去不就好了嘛!...
确实是有点麻烦的感觉...
那么是时候给我们的网站打扮打扮了!
3.5 模板引擎 Jade
所谓模板引擎,可以尝试这样简单的理解:首先回想一下C#中的String.Format()
,或是C语言中的printf()
,Python中的print()
等等类似的字符串格式化函数。我们提供一个模板参数,然后使用变量依照一定的规则填充模板,最终在运行时得到了格式化的字符串输出。依此继续,把我们的HTML页面想象成一个巨大的字符串,在其中的某些位置上使用变量填充替换,最终得到一个“动态”的页面:
<html> <head></head> <body> <h1>{这里填写网页的标题}</h1> <h2>{这里填写副标题}</h2> <p>{这里是文章内容}</p> <p>{这里是文章的创作日期与作者}</p> </body> </html>
这样一来,我们就可以在一定程度上将逻辑与页面分离,后台负责生成、处理与组织数据,前台则只关心数据如何被呈现。同时也避免了一大部分的手工重复劳动(想想看在这之前我们是如何生成页面的?在后台拼接半天的html再send出去,简直累的要死好吗)。上一节中提出的问题也在这里迎刃而解了:CSS这样的静态内容,直接写进模板就好,后端不再关心这些琐事了!
以此思路,我们进一步简化HTML中某些冗长的写法,再自创一些别出心裁的语法,然后再写个解释器翻译成HTML,比如
ul>li*(list.length)<-item.name in list
=>
<ul> <li>list[0].name</li> <li>list[1].name</li></ul>
额...随便开了一下脑洞...请勿当真...
总之,要像这样自己实现一个模板引擎也并非什么难事。
不过当然,要投入实际应用的模板引擎系统不但要考虑语法;效率也是非常重要的一部分,所以还是停止造轮子的企图,来看看express直接提供支持的模板引擎之一:Jade
...
...
...
看完了么?Jade的语法应该还算简单,这里不再浪费笔墨介绍了反正我后头也不打算用=.=。感兴趣的同学可以自己研究一下如何将Jade与Express结合起来~不过我们将在下一章开始,对我们的系统进行一个推倒重来,重新规划的工程,敬请期待!
- node.js + express4 写一个自己的博客网站[2]
- #node.js + express4 写一个自己的博客网站[1]
- 基于Node.js+Express4+MongoDb制作的微博客网站程序
- webstorm8 +node.js +express4.x 环境搭建 写一个hello world
- express4.2中自己的app.js配置
- node.js与express4.X实战--快速构建一个简单的API接口(翻译)
- 自己写的博客网站上线了
- node.js+express+ejs+MongoDB模板修改写《node.js开发指南》中的博客网站实例
- 从头调通一个node.js博客网站
- 在express4上使用socket.io 1.4.6版本的心得(node.js实战读书笔记2)
- 一个基于node express4.0和mongodb的活动报名
- 第一次好好写一个 自己的博客
- 准备写一个自己的博客系统
- 搭建一个自己的博客网站
- 使用express4.x重写node.js开发指南中的博客系统
- 【node.js学习】--(4)--Express4.x框架
- Node.js开发框架Express4.x
- node.js学习二(Express4.x)
- Spring+Mybatis整合学习
- CocoaPods福利时间
- 空间解析几何
- memo
- JS(二)数字对象和字符串对象
- node.js + express4 写一个自己的博客网站[2]
- 2015MCM/ICM总结
- 关于大型网站技术演进的思考(一)--存储的瓶颈(1)
- python 第一天练习
- (四十五)Modal 模态窗口 -遮盖
- 使用Tomcat发布war包
- node.js web开发:EXPRESS 4.x 以上使用session和cookie 的记录
- 移动APP界面设计切图指南
- error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”