专栏首页智慧协同我的NodeJS学习之路8(优化体验)

我的NodeJS学习之路8(优化体验)

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

格式化日期

  1. 格式化日期
moment().format('YYYY-MM-DD HH:mm:ss'); //2016-01-25 09:36:09
moment().format('YYYY [escaped] YYYY');  // 2016 escaped 2016
  1. 今天是星期几
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:参数,sizes指定头像大小;defaultd指定缺省头像;ratingr指定头像评级;

使用示例:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS实现文本向两端对齐的方法

    飞奔去旅行
  • 解决macOS上使用node10开发vue导致cpu利用率一直100%的方法

    网上查了很多资料, 基本都是在讲是webpack调用 fsevents 出错,然后频繁查找node_modules目录所致。本地install了还是不停的100...

    飞奔去旅行
  • 使用forever在ssh中管理node应用

    通常我们会使用ssh工具连接远程的云主机部署运行web应用,但是当我们断开ssh回话后,应用也随之断开,那么有什么方法能使得应用不受ssh断开的影响呢?当然有方...

    飞奔去旅行
  • How to use filter in Analytics Path Framework

    In APF Configuration Modeler, there is a filter with type Smart Filter Bar autom...

    Jerry Wang
  • 如何使用SAP APF里的过滤器

    In APF Configuration Modeler, there is a filter with type Smart Filter Bar autom...

    Jerry Wang
  • 让你的 git 拥有不同身份

    由于你没有进行过特别的设定,所以 git不管它是往 github上传还是往你公司的服务器上传,都会以一个完全相同的身份上传,这有时候会造成困扰,比如说这样: ?...

    程序员宝库
  • Huginn 定制功能开发说明

    如果你想针对当前你的 Huginn 版本增加个人定制功能的话,请参照下面的说明。因为在 GitHub 上将 fork 后的仓库私有化开发并不是一件简单的事情,所...

    huginn 中文网
  • 图解经典电路之万能充电器

    (图一 最简单锂电池充电电路)

    用户5759494
  • 入门 IOS 逆向从我的经历说起

    在这里以讲故事的形式分享一下我踏入信息安全这条路的一些经历吧,希望能帮到一些人,正文开始:

    信安之路
  • 使用git-flow来帮助管理git代码 转

    对git不熟悉的我,经常把git提交搞得很乱,导致在master上有许多无用的commit,最终决定好好地看一下git的使用教程,却不小心发现了还有一个git-...

    henrylee2cn

扫码关注云+社区

领取腾讯云代金券