最近在逛各种大佬博客的时候发现了有一款typecho的主题handsome中在时间久远的文章首部会有个相关的提示，第一眼就爱上了。就想着在我的hexo中实现一下，效果还不错拿出来分享一下。

初衷

每次搜个什么解决方案，对着做了好久突然报错，才发现是古董级别的文章。说实话是有点想爆粗口的。正好我的博客文章逐渐过多，对于时间久远的文章增添一个提示还是很有必要的。（会少很多人在我这爆粗口吧🙃

原理

hexo文章会有date的属性，可以得到每篇文章的发布时间以及最近一次更新时间。再使用js计算时间差即可。

实现

js部分

这部分你可以新建一个js文件再引用，但是由于一些特殊原因，写进js文件引用需要操作，所以推荐直接像我一样放在common-article.ejs（文章模板）中。想自己引入的话可以自己钻研一下。

function intervalTime(startTime,endTime){
        var date1 = new Date(startTime);
        var date2 = new Date(endTime);  
        var date3 = date2.getTime() - date1.getTime(); 
        var days = Math.floor(date3 / (24 * 3600 * 1000));
        return days;
}
function format(Date){
  var Y = Date.getFullYear();
  var M = Date.getMonth() + 1;
    M = M < 10 ? '0' + M : M;
  var D = Date.getDate();
    D = D < 10 ? '0' + D : D;
  var H = Date.getHours();
    H = H < 10 ? '0' + H : H;
  var Mi = Date.getMinutes();
    Mi = Mi < 10 ? '0' + Mi : Mi;
  var S = Date.getSeconds();
    S = S < 10 ? '0' + S : S;
    return Y + '-' + M + '-' + D + ' ' + H + ':' + Mi + ':' + S;
}
var pdate = new Date("<%- post.date %>");
var update = new Date("<%- post.updated %>");
var now = new Date();
now=format(now);
pdate=format(pdate);
update=format(update);
var days=intervalTime(pdate,now),udays=intervalTime(update,now);
var mid=parseInt(days,10);
var mi=parseInt("30",10);
if(mid > mi){
  document.getElementById("point").innerHTML="<div class=\"tip share\">请注意，本文编写于"+days+"天前，最后修改于"+udays+"天前，其中某些信息可能已经过时。<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/kawayi.webp\"><\img> </div>";
}

这里我们要找到放置提示的合理位置，并在模板文件中对应的位置添加

<div id="point"></div>

注意，无论你是写了一个js引用，还是直接把js写入了模板文件中，一定要在<div id="point></div>的后面引用js。

为了加强效果，放出来我的模板文件的这部分，仅供参考

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <div id="point"></div>

        <script>
          function intervalTime(startTime,endTime){
              var date1 = new Date(startTime);
              var date2 = new Date(endTime);  
              var date3 = date2.getTime() - date1.getTime(); 
              var days = Math.floor(date3 / (24 * 3600 * 1000));
              return days;
          }
          function format(Date){
            var Y = Date.getFullYear();
            var M = Date.getMonth() + 1;
              M = M < 10 ? '0' + M : M;
            var D = Date.getDate();
              D = D < 10 ? '0' + D : D;
            var H = Date.getHours();
              H = H < 10 ? '0' + H : H;
            var Mi = Date.getMinutes();
              Mi = Mi < 10 ? '0' + Mi : Mi;
            var S = Date.getSeconds();
              S = S < 10 ? '0' + S : S;
              return Y + '-' + M + '-' + D + ' ' + H + ':' + Mi + ':' + S;
          }
          var pdate = new Date("<%- post.date %>");
          var update = new Date("<%- post.updated %>");
          var now = new Date();
          now=format(now);
          pdate=format(pdate);
          update=format(update);
          var days=intervalTime(pdate,now),udays=intervalTime(update,now);
          var mid=parseInt(days,10);
          var mi=parseInt("30",10);
          if(mid > mi){
            document.getElementById("point").innerHTML="<div class=\"tip share\">请注意，本文编写于"+days+"天前，最后修改于"+udays+"天前，其中某些信息可能已经过时。<img src=\"https://cdn.jsdelivr.net/gh/drew233/cdn/kawayi.webp\"><\img> </div>";
          }
        </script>

      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        <% if (!post.photos[0]){ %>
          <header class="entry-header">
            <h1 class="entry-title"><%- post.title %></h1>
            <p class="entry-census"><%- post.author %>&nbsp;·&nbsp;<%= date(post.date, 'YYYY-M-D') %>&nbsp;·&nbsp;<span id="busuanzi_value_page_pv"></span>次阅读</p></p>
            <hr>
          </header>
        <% } %>

css部分

这部分主要还是参考原版主题中的css，但是我自己也大概改了一下。你可以通过F12调整到适合自己博客的样式。
我的css

.tip.share {
    border-left-color: rgb(238, 5, 5);
    background: #fff;
}
.tip {
    display:block;
    background: #fff;
    padding: 8px 20px;
    position: relative;
    margin: 0 0 20px;

    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    color: #666;
    text-align: justify;
    border-left: 5px solid      #3CB371;

    /*盒子阴影 - (选项)*/
    -moz-box-shadow: 2px 2px 15px #ccc;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc;
}
.tip.share:before {
    background: #ddd;
    content: "🐷";
}
.tip:before {
    background: #38a3fd;
    border-radius: 50%;
    color: #fff;
    content: "i";
    font-family: Dosis,"Source Sans Pro","Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    height: 21px;
    line-height: 21px;
    margin-left: -32px;
    margin-top: 8px;
    position: absolute;
    text-align: center;
    width: 21px;
}

一个已知的小bug

因为直接修改了模板文件，所以每一篇文章的最近一次更新时间都会变成你修改模板的那个时间。这个莫得办法解决了。不是很影响（个人认为。

效果图
赏