我的NodeJS学习之路8（优化体验）

飞奔去旅行

发布于 2019-06-13 14:15:37

1.5K0

发布于 2019-06-13 14:15:37

文章被收录于专栏：智慧协同

小弟初涉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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016.01.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript