Moment.js 小实践 —— 为 Hexo 博客 Material 主题添加运行时间

Moment.js 是一个优秀的 JavaScript 日期处理类库,Moment.js 可以说是 JavaScript 的一种扩充,强大了其在时间处理方面的能力,使得 JavaScript 也能够非常轻巧的处理麻烦的时间问题。

Moment.js Github : https://github.com/moment/moment/

闰年问题一直是计算时间的一大困难点,借助 Moment.js 可以有效避免自己处理闰年问题出现错误,进而计算出准确的时间。

Hexo 博客中的 Material 主题是一套使用 Google 的 Material Design 设计风格的主题,整套主题优雅清爽,目前 我的博客 正在使用这套主题。

而 Hexo 博客框架正是在使用 Moment.js 来处理时间的。

开始实(zhe)践(teng)

  1. 进入 Hexo 博客主题目录,搜索 footer.ejs
  2. 用文本编辑器打开 footer.ejs
  3. 修改 copyright 模块 或者 mdl-mini-footer–right-section 模块
    代码内容:
1
2
3
4
5
6
7
8
9
10
<div id="days"></div>
<script src="https://cdn.bootcss.com/moment.js/2.17.0/moment.min.js">
//这里调用了公共库中现成的 js 文件,也可以直接调用站点中的 js 文件
</script>
<script>
var begin = moment([2016,05,15]); //定义博客开始时间
var now = moment(); //使用 moment() 获取当前时间
document.getElementById('days').innerHTML ="博客已运行 "+now.diff(begin,'days')+" 天"
// 使用 now.diff(begin,'days') 函数获取天数,这里天数考虑了闰年
</script>

Moment.js 中月份表达不同于自然语言,是从第 0 月开始计算的,所以上述例子中,起始时间为自然语言中的 6 月。

添加完成后的效果:

Footer


总结

Hexo 的折腾对于前端知识的学习与巩固都有一定的效果,Hexo 不仅是一个优秀的博客平台,也是优秀的学习平台。