hexo-theme-fluid
hexo-theme-fluid copied to clipboard
fluid-dev
建议添加“文章时效性”提示
随着时间的变化，很久之前写的文章的内容可能已经不适用于现在，对于更新时间超过31天的文章增加一个Tip，告诉读者要注意文章的时效性。
参考效果如下：
https://butterfly.js.org/posts/4aa8abbe/#%E6%96%87%E7%AB%A0%E9%81%8E%E6%9C%9F%E6%8F%90%E9%86%92
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
为什么不想加这个功能，是因为加了后还要考虑 update time 的情况（不考虑的话不出多长时间大概率会有个 issue 来提这个问题），而 update time 在静态生成里并不一定可靠（类似于#1025），所以一直没加这个功能，而是放在文章里让大家自定义。
当然还是感谢你的 PR，我会再考虑下这个问题。
@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;
}
};