fluid-dev / hexo-theme-fluid

:ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
https://hexo.fluid-dev.com/
GNU General Public License v3.0
7.24k stars 1.13k forks source link

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

Open firstmetcs opened 8 months ago

firstmetcs commented 8 months ago

随着时间的变化,很久之前写的文章的内容可能已经不适用于现在,对于更新时间超过31天的文章增加一个Tip,告诉读者要注意文章的时效性。 参考效果如下: image

W1ndys commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

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

firstmetcs commented 8 months ago

@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;
    }
  };
firstmetcs commented 8 months ago

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