Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
firstmetcs opened this issue Jan 14, 2024 · 5 comments
Open

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

firstmetcs opened this issue Jan 14, 2024 · 5 comments
Labels
✨ enhancement New feature request

Comments

@firstmetcs
Copy link

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

@zkqiang zkqiang closed this as completed Jan 16, 2024
@zkqiang zkqiang reopened this Jan 16, 2024
@zkqiang
Copy link
Member

zkqiang commented Jan 16, 2024

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

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

@firstmetcs
Copy link
Author

firstmetcs commented Jan 16, 2024

@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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement New feature request
Projects
None yet
Development

No branches or pull requests

3 participants