使用relative-time-element.js在前端层面实现时间的实时显示
这两天给站擦擦灰，补全了一些功能，优化了一些细节。突发奇想，Github issues 区的内容的所有回复/发送内容，时间都是随真实时间实时变动的。在经历了自己造轮子失败之后，偶然发现原来这个功能已经被 Github 开源出来了...合计着我这白忙活。
调用方法也是非常简单的，对现有项目的创伤性几乎为零，而且支持多种模式，还是自动的。不仅不基于其他库，而且还可以 i18n，也不用考虑 ajax 需要回调函数的问题，主打的就是一个用起来省心。
只需要在原先显示时间的地方，套上一个relative-time标签，然后引入 JS，就可以了。
我这边是参照了 Github issues 区的用法（官方咋用我咋用233333），然后进行了一些小改动，具体如下（以评论区为例，其他同理）。
<relative-time datetime="<?php $comments->date('c'); ?>" prefix="">
<?php $comments->date('Y-m-d H:i'); ?>
</relative-time>其中，datetime项传入的内容必须是ISO8601格式的时间。不必担心如何在 PHP 中如何构建这种格式时间的问题，只需要将时间格式设置为c即可。
<relative-time>所包裹的内容，是原先的时间输出，这个要留下。保留下来的目的一是不影响 SEO，二是当浏览器不支持时，可以有个保底的显示时间的方案，不至于什么都显示不出来。
从 ReadMe 中，可以查询到可以自定义日期显示的前缀。如果不手动指定，那么处理一年之前的日期，日期的前面会多个on。把prefix传个空串，显示效果会好很多，当然也可以改成别的。
不对啊 这不是 Module 模块嘛，传统前端该怎么使用啊？
Github 给出了一个展示页面：https://github.github.io/relative-time-element/examples/
查看源代码时，会发现这个页面引用了一个来自 unpkg 的链接：https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js
引用这个 JS 就好。注意：要以module的方式引用。如下：
<script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>此外，有更多玩法可以尝试，可以看官方的 ReadMe 与演示页面来进行尝试。（演示页面的时间语言取决于当前 HTML 页面所设置的语言，将<html lang="en">英文指定为<html lang="zh-CN">简体中文即可）
另外，语言设置这里，要严格按照格式填写。我第一次开始试验的时候，填的是<html lang="zh_cn">，结果报错。填<html lang="zh-CN">才正常显示中文的格式。
这回，可以把后端的人性化时间的内容，给删掉了。现在可以由前端进行更好的实现。