解决静态Blog中timeago显示问题的方法

因为使用的是Ghost博客的静态化页面，因此一篇文章发布到github上的时候显示的“发表于x分钟之前”，那么过了N多天再去看，还是这个“x分钟之前”。极不爽。所以，最近修改了一个timeAgo模块，用来搞定在静态博客中实时地显示timeAgo信息。

在页面中使用的时候也很简单，基本的做法是：

// 在页面中添加timeAgo模块
<script src="https://aimingoo.github.io/assets/js/timeAgo.js"></script>

// 在需要显示的位置使用下面的代码
<script>document.writeln(timeAgo("DATETIME_OF_YOUR_POST"))</script>

在具体到Ghost的模板中使用的时候，会略有不同。

1. 修改default.hbs

将下面的代码插入页面合适的位置以加载timeAgo模块：

<!-- 将timeAgo.js置入模板的assets目录 -->
<script type="text/javascript" src="{{asset "js/timeAgo.js"}}"></script>

<!-- 或使用在线的版本 -->
<script type="text/javascript" src="https://aimingoo.github.io/assets/js/timeAgo.js"></script>

如果你的模板有自己的初始化代码（一般放在assets/js/index.js文件中），应该将这行代码插入在初始化代码之前。

2. 修改post.hbs

在post.hbs中找到显示一个Post的日期的位置。它可能使用如下代码（缺省使用Ghost内置的timeago方法显示）：

{{date published_at timeago="true"}}

根据你打算在post.hbs使用该值的不同方法，可以直接输出，也可以在页面加载之后重置这个值。

如果是直接在该页面中输出，则将上面的改为：

<script>document.writeln(timeAgo("{{date published_at format='YYYY-MM-DDTHH:mm:ss.sssZ'}}"))</script>

注意上面的代码中，我们是用format参数来取得更加精确的时间值（而不是直接使用timeago格式的值）。

3. 如果采用延迟加载的方法

如果这个值是采用延迟加载的方法来显示的，那么它可能放在post.hbs的一对标签中。类似：

<time class="post-date" datetime="{{date format='YYYY-MM-DDTHH:mm:ss.sssZ'}}" timeago="true"></time>

注意这里的timeago只是一个html标签属性——这个属性是我添加的，用来标示这个<time>标签将采用timeago方式显示。

在延迟加载的情况下，通常是在全局的ready回调中做一些针对当前页面的规格化操作。它可能通过在default.hbs中加载一个.js文件来进入。以我们上面说到过的例子，假如在assets/js/index.js文件中，那么它可能的代码是：

$(document).ready(function() {
  ...
})

在这个代码块中，加入下面的代码即可：

// 列出所有'class="post-date"的标签
$(".post-date").each(function() {
    // 检查上面添加的'timeago'属性值是否为'true'
    if ($(this).attr("timeago") == "true") {
        // 从'datetime'属性中取时间值，用timeAgo()转换并回写到当前标签中
        $(this).text(timeAgo($(this).attr("datetime")));
    }
});