建议添加“文章时效性”提示

[firstmetcs]

建议添加“文章时效性”提示

[firstmetcs]

@zkqiang 我知道可以通过类似hexo.extend.injector.register('body_end', '<script src="/js/outdate.js"></script>','post')和script添加，但是看到其他有些主题有这个功能，所以想添加一下。确实存在update time不可靠的情况，所以pr只通过time做简单的判断，也是提供一个思路吧。

PS: 很棒的主题～

对于后续需要此功能的同学提供个简单的实现方式，使用注入器（Injector） | Hexo

在 Hexo 的 scripts 目录（没有则新建一个）下新建一个名为 injector.js 的文件，将下面的代码复制到其中：

//注入文章过期提示
hexo.extend.injector.register('body_end', `<script src="/js/outdate.js"></script>`,'post')

在 Hexo 的 source 目录下新建 js 文件夹，新建一个名为 outdate.js 的文件，添加以下代码：

window.onload = function() {
  //不同的日期显示不同的样式，200 天为黄色提示，400天为红色提示，可以自己定义。
  let warningDay = 200;
  let errorDay = 400;
  // 确保能够获取到文章时间以及在文章详情页
  let times = document.getElementsByTagName('time');
  if (times.length === 0) { return; }
  let posts = document.getElementsByClassName('post-content');
  if (posts.length === 0) { return; }

  // 获取系统当前的时间
  let pubTime = new Date(times[0].dateTime);  /* 文章发布时间戳 */
  let now = Date.now()  /* 当前时间戳 */
  let interval = parseInt(now - pubTime)
  let days = parseInt(interval / 86400000)
  /* 发布时间超过指定时间（毫秒） */
  //note warning 以及 note danger 是 Next 主题的自定义模板语法，如果使用其他主题，请自行更改样式以达到最佳显示效果
  if (interval > warningDay*3600*24*1000 && interval < errorDay*3600*24*1000){
    posts[0].innerHTML = '<div class="note note-warning">' +
      '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
      '</div>' + posts[0].innerHTML;
    }else if(interval >= errorDay*3600*24*1000){
      posts[0].innerHTML = '<div class="note note-danger">' +
        '<h5>文章时效性提示</h5><p>这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。</p>' +
        '</div>' + posts[0].innerHTML;
    }
  };

[W1ndys]

https://butterfly.js.org/posts/4aa8abbe/#%E6%96%87%E7%AB%A0%E9%81%8E%E6%9C%9F%E6%8F%90%E9%86%92

[zkqiang]

https://hexo.fluid-dev.com/posts/hexo-injector/#%E6%96%87%E7%AB%A0%E6%97%B6%E6%95%88%E6%80%A7%E6%8F%90%E7%A4%BA

[zkqiang]

为什么不想加这个功能，是因为加了后还要考虑 update time 的情况（不考虑的话不出多长时间大概率会有个 issue 来提这个问题），而 update time 在静态生成里并不一定可靠（类似于#1025），所以一直没加这个功能，而是放在文章里让大家自定义。

当然还是感谢你的 PR，我会再考虑下这个问题。

[firstmetcs]

如上面的同学提及的butterfly以及搜集资料时看到的keep 主题都已经添加的对应的功能