【Movable Type】jqueryで新着投稿にnewマークを付ける

Movable Typeで、24時間以内の投稿は自動でNEWマークを付ける方法。

作戦

• 再構築をしなくても24時間を過ぎると自動で消える
• ↑　の理由でajax
• newマークの見た目や場所が一定ではないので、DOM構築はしない
• ↑　の理由で先にnewマークをマークアップしておいて非表示にしておく

Movable Type

<ul>
<mt:Entries lastn="10">
  <li class="" id="newstopics-<$mt:EntryID$>">    
    <a href="<$mt:EntryPermalink$>">
<mt:If tag="EntryDataThumbnail">
  <mt:EntryDataThumbnailAsset><div class="thumnail"><img src="<$MTAssetURL$>" /></div></mt:EntryDataThumbnailAsset>
</mt:If>

    <div class="status">
      <span class="new" data-tdatetime="<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>">NEW</span><$mt:EntryDate format="%Y.%m.%d"$>
<mt:If tag="EntryPrimaryCategory">
  <mt:EntryPrimaryCategory>
  <span class="cate <$mt:CategoryBasename$>"><$mt:CategoryLabel$></span>
  </mt:EntryPrimaryCategory>
</mt:If>
    </div>
 
    <div class="message"><$mt:EntryTitle$></div>
    </a>
  </li>
</mt:Entries>
</ul>

肝になるのはこの部分

">NEW

Jquery

$(function () {

    // 経過時間(何時間以内の記事に付与するか)
    var pass = 24;

    var currentDate = new Date();
    $('[data-tdatetime]').each(function (i,elem) {
        var time = $(elem).data('tdatetime').split(":");
        var entryDate = new Date(time[0], time[1] - 1, time[2], time[3], time[4], time[5]);
        var now = (entryDate.getTime() - currentDate.getTime()) / (60 * 60 * 1000);
        now = Math.ceil(now);
        if (-now <= pass) {
            $(this).show();
        }
    });

})

参考

Movable Typeの各リストに新着マークを表示する（jQuery編）

Movable Typeの各リストに新着マークを表示するカスタマイズ（jQuery版）を紹介します。

www.koikikukan.com