【jQuery】更新からn日以内ならグローバルナビにNEWマークをつける

• Web Create
• 2017.01.23

更新日から一定の時間「NEWマーク」を表示することがよくあります。
CMSで管理されたブログの記事等でしたら簡単なのですが、
静的に構築されたサイトのグローバルナビにつけるとなると少し面倒です。

グローバルナビをインクルードするなどして、一括管理していれば良いのですが、
そうでない場合には、全HTMLを開いて「NEWマーク」のためのクラスをふっていかなければならず、あまり現実的ではありません。

沢山のファイルを編集せず、実現するためにJSとJSONファイルを使って実装してみました。

サンプル

HTML

それぞれにクラスをふっておきます。

<nav id="gnav">
  <ul>
    <li class="news"><a href="#">NEWS</a></li>
    <li class="blog"><a href="#">BLOG</a></li>
    <li class="about"><a href="#">ABOUT</a></li>
  </ul>
</nav>

JSON

コンテンツの更新日をJSONで管理します。
HTMLで付けたクラスと更新日を入力しています。

[
  {
    "class" : "news",
    "date" : "2017-01-14"
  },
  {
    "class" : "blog",
    "date" : "2017-01-19"
  },
  {
    "class" : "about",
    "date" : "2017-01-21"
  }
]

JS

$(function(){

  var today = new Date( $.now() ); // 今日の日付を取得

  //JSONファイルを取得
  $.getJSON( 'update.json' )
    .done(function(json, status, request) {
      $(json).each(function(i, data) {

        var elem = '.' + data.class, // class
            date = new Date( data.date ), // date
            ago  = date.setDate(date.getDate() + 7); // 更新日 + 7日

        if ( today < ago ) { // 今日(today)がago(更新日 + 7日)より前なら
          $('#gnav').find(elem).addClass('new'); // クラス「new」を付ける
        }

      });
    });
});

まとめ

このようにすることで、大量のファイルを更新のたびに修正すること無く、
JSONファイルだけ更新すれば「NEWマーク」を付けることが出来るようになりました。

SSIでインクルードしてる場合や、jade(pug)などを使って構築している場合は、グローバルナビを直接修正できるので不要ですが、そうでない場合は大量のファイル修正が発生してしまい、コンテンツ自体の更新作業がよりも大変になってしまいます。

こんな方法もどこかでお役に立てれば幸いです。