请关注专题：我的NodeJS学习之路（实践之路）
小弟初涉node领域，不足之处，还请多多指教！
欢迎Star、Fork：https://github.com/gefangshuai/ANodeBlog
本文主要介绍几个“好玩”的Middleware（中间件）来提升网站的用户体验。
Moment.js
Parse, validate, manipulate, and display dates in JavaScript.
正如官网的介绍，我觉得这货是一个全能的处理日期的中间件。
安装及使用：
npm install moment --save
var moment = require('moment');
格式化日期
- 格式化日期
moment().format('YYYY-MM-DD HH:mm:ss'); //2016-01-25 09:36:09
moment().format('YYYY [escaped] YYYY'); // 2016 escaped 2016
- 今天是星期几
moment().format('d'); //3
换算相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 4 年前
moment("20120620", "YYYYMMDD").fromNow(); // 4 年前
moment().startOf('day').fromNow(); // 10 小时前
moment().endOf('day').fromNow(); // 在 14 小时内
moment().startOf('hour').fromNow(); // 21 分钟前
在本例中的应用
本例中，首页的相对时间戳
Paste_Image.png
文章内的相对时间戳
Paste_Image.png
都是使用
Momentjs实现的。
细心的朋友可以发现，Momentjs也提供了bower的安装包，所以直接可以在前台使用，但是我们并不推荐这样做，把处理放到前台会影响用户的体验。所以我们使用npm包放到后台去处理。
我们的模版是Handlebars，所以需要在系统中注册一个helper，命名为timeFromNow：
timeFromNow: function (date) {
return moment(date).fromNow();
}
然后就可以这样使用了：
<span class="pull-right time-from-now">{{timeFromNow created_time}}</span>
更多Momentjs用法请参考官方文档
使用Gravatar中间件显示全球公认的头像
Gravatar（英语：Globally Recognized Avatar）是一项用于提供在全球范围内使用的头像服务。只要你在Gravatar的服务器上上传了你自己的头像，你便可以在其他任何支持Gravatar的博客、论坛等地方使用它。——转自wikipedia
玩过网站的童靴对这货应该不陌生，我第一次接触是从Wordpress开始的。只需要一个邮件账号，就可以建立你自己的全球公认头像。
在网站中集成它，我们用到了node-gravatar
安装及集成
npm install --save gravatar
使用：
var gravatar = require('gravatar');
gravatar.url(email, options, protocol);
参数说明：
- email：注册gravatar服务的邮箱
- options：参数，
size或s指定头像大小；default或d指定缺省头像；rating或r指定头像评级；
使用示例：
var gravatar = require('gravatar');
var url = gravatar.url('emerleite@gmail.com', {s: '200', r: 'pg', d: '404'});
//returns //www.gravatar.com/avatar/93e9084aa289b7f1f5e4ab6716a56c3b?s=200&r=pg&d=404
var unsecureUrl = gravatar.url('emerleite@gmail.com', {s: '100', r: 'x', d: 'retro'}, false);
//returns http://www.gravatar.com/avatar/93e9084aa289b7f1f5e4ab6716a56c3b?s=100&r=x&d=retro
var secureUrl = gravatar.url('emerleite@gmail.com', {s: '100', r: 'x', d: 'retro'}, true);
//returns https://s.gravatar.com/avatar/93e9084aa289b7f1f5e4ab6716a56c3b?s=100&r=x&d=retro
如何在国内正常使用
由于不可抗力，gravatar的服务器已经被墙了……
我们可以使用多说的服务来加速gravatar的请求。方法很简单，只需要将转换后的url信息中的www.gravatar.com替换为gravatar.duoshuo.com就可以了。
在本例中使用
为了能正确展示注册用户的头像信息，我们需要强制注册用户都填写email信息。
然后定义一个Handlebars helper
/**
* 渲染全球通用头像
* @param email
* @returns {*}
*/
gravatar: function (email) {
var url = gravatar.url(email, {s: '100', r: 'G', d: 'retro'});
url = lodash.replace(url, 'www.gravatar.com', 'gravatar.duoshuo.com');
return url;
}
这里用到了lodash，一个强大的Javascript工具包，后面会有介绍。
最后可以直接在模版页面中使用了：
<img src="{{gravatar session.user.email}}" class="img-circle" alt="User Image">
更多node-gravatar的知识请参考官方主页
集成Markdown编辑器并渲染显示
Markdown相比较传统的富文本编辑器，拥有便捷、快速、专注内容等特点，特别是作为一个程序员，使用markdown可以快速地将我们的代码片段记录下来，方便以后查看。（我们不是专业的写作者，所以对排版并不是非常严格）
在项目中集成Markdown，最简单的方法就是直接放一个textarea，然后后台通过remarkable进行渲染。
这里有一个Remarkable在线演示示例：https://jonschlinkert.github.io/remarkable/demo/
使用Remarkable
下面说一下详细的使用方法
为了能够支持代码高亮，我们还用到了另外一个中间件highlight
首先安装集成
npm install --save remarkable
npm install --save highlight
使用
var Remarkable = require('remarkable');
var hljs = require('highlight.js');
var md = function () {
return new Remarkable('full', {
linkify: true, // 自动转换链接
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (err) {
}
}
try {
return hljs.highlightAuto(str).value;
} catch (err) {
}
return ''; // use external default escaping
}
});
}
md.render(content);
// return html
示例：
md.render('# Remarkable rulezz!')
// => <h1>Remarkable rulezz!</h1>
前台正常渲染代码高亮
后台我们已经能正常输出html代码了，但是这个时候，将html展示在前台我们还需要在前台引入highlight.js的相关css。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
关于Remarkable的更多内容，请参考remarkable
关于highlight.js的更多内容，请参考highlight.js
请关注专题：我的NodeJS学习之路（实践之路）
网友评论