応用

期間を指定して記事にNEWアイコンを表示する

カスタムブロックの出力テスト

カスタムブロックBlockEditorBlocksのテスト

jQueryとJavaScriptを使用し、期間を指定して自動的に記事にNEWアイコンを表示します。
そのため、始める前にfooter等にjQueryを読み込んでおく必要があります。
（MovableType.netの標準テーマの多くがjQueryを使用しています。）

使用するMTタグ

• mt:EntryDate
• 日付に関するテンプレートタグのモディファイアリファレンス

まずはmt:EntryDateで日付を表示します。
後ほどjQueryで制御するため、class="new-icon"を削除しないようにします。

続いて、jQueryファイルを読み込んだ後に以下のscriptを記述します。
「current.getTime() - (14 * 24 * 60 * 60 * 1000);」の14の箇所が表示される日数を指しています。
表示される期間を変える場合は書き換えることで変更できます。

記述・出力サンプル

記述

<script>〜</script>内

$(function () {
  $('time.new-icon').each(function(){
    var current = new Date();
    var range_ms = current.getTime() - (14 * 24 * 60 * 60 * 1000);
    var modified = new Date($(this).attr('datetime'));
    var modified_ms = modified.getTime();
    if (range_ms < modified_ms){
      $(this).after('<span class="text-icon">NEW</span>');
    }
  });
});

出力

※2018年8月31日の表示です。スタイルシートは別途用意してください。