公開日からN日間はnewアイコンを表示する方法（jQuery）

NEWアイコンを表示する

Movable Type ユーザーコミュニティに質問がありましたので、ご回答いたします。

MT7 コンテンツタイプで、公開日からN日までnewアイコンを表示したい場合どうすればよいですか？

自動でNEWアイコンを非表示にするには、一日ごとに自動で再構築を行う設定をするか、Javascriptで非表示にするかを行う必要があります。

一日ごとに自動で再構築を行うには、Movable Typeの「tools」というディレクトリにある、「rebuild-pages」と、cronを組み合わせることで、再構築を定期的に行うことができます。

今回は、Javascript（jQuery）で非表示にする方法をご紹介します。

公開日から7日までNewアイコンを表示するサンプルテンプレートを作成しました。

MTテンプレート

MTContentsタグで、コンテンツ一覧を表示し、MTContentDateタグで公開日を「postdate」に設定します。

<mt:Contents content_type="コンテンツタイプ名">
    <mt:ContentsHeader><ul></mt:ContentsHeader>
        <li>
            <time postdate="<mt:ContentDate format="%Y-%m-%d">" class="post_date"><mt:ContentDate format="%Y年%m月%d日"></time>    
            <p><mt:ContentLabel></p>
        </li>
    <mt:ContentsFooter></ul></mt:ContentsFooter>
</mt:Contents>

MTテンプレートによる出力結果

<ul>
    <li>
        <time postdate="2018-12-03" class="post_date">2018/12/03</time>
        <p>12/3（今日）のコンテンツタイトル</p>
    </li>
    <li>
        <time postdate="2018-11-26" class="post_date">2018/11/26</time>
        <p>11/26（7日前）のコンテンツタイトル</p>
    </li>
    <li>
        <time postdate="2018-11-19" class="post_date">2018/11/19</time>  
        <p>11/19（14日前）のコンテンツタイトル</p>
    </li>
</ul>

jQuery

表示期間を「period」に指定します。

<script type="text/javascript">
    $(function () {
      $('.post_date').each(function(){
        // 現在日時
        var current = new Date();

        // 表示期間
        var period = 7;    
        var period_cn = current.getTime() - (period * 24 * 60 * 60 * 1000);

        // 投稿日
        var post = new Date($(this).attr('postdate'));
        var post_cn = post.getTime();

        if (period_cn < post_cn){
          $(this).after('<span>NEW</span>');
        }
      });
    });
</script>

表示結果

<ul>
    <li>
        <time postdate="2018-12-03" class="post_date">2018/12/03</time><span>NEW</span>
        <p>12/3（今日）のコンテンツタイトル</p>
    </li>
    <li>
        <time postdate="2018-11-26" class="post_date">2018/11/26</time><span>NEW</span>
        <p>11/26（7日前）のコンテンツタイトル</p>
    </li>
    <li>
        <time postdate="2018-11-19" class="post_date">2018/11/19</time>  
        <p>11/19（14日前）のコンテンツタイトル</p>
    </li>
</ul>