MTのウェブページを更新した際に、NEWアイコンを表示したい。

Question

よく更新があった記事にNEWアイコンを表示させるというものは、
見かけますが、MTのウェブページを更新(再度更新含む)した際に、
そのウェブページのリンク先にNEWアイコンを表示させたいのですが、こういう仕様は可能でしょうか？

例えば、MTのウェブページの会社概要を編集して、再度、編集し更新した際に、
下記の会社概要ページへのリンクボタンに更新したということが分かるように、NEWアイコンを実装したいです。

更新ボタンを押した際の日時さえ取れば、上手くいくだろうと思っていたのですが、
<$mt:PageModifiedDate$>のタグでは最新の更新日時は、取れませんした。

どなたかご教授頂けないでしょうか。

イメージ的には、下記のような記事と同じようなコードを記述すれば実装できるのではないかと思っておりました。
http://www.koikikukan.com/archives/2015/06/23-005555.php

ムーバブルタイプのバージョンは6.2.4です。

<li>

<mt:pages lastn="1"><$mt:PageModifiedDate$><span class="new"></span></mt:pages>

<a href="about.html">会社概要へ
</a>

</li>

<style>
		
.new {
    display: none;
    color: red;
    font-weight: bold;
}
	
</style>	

<script type="text/javascript">
// passage time
var pass = 24;
 
// display content
var content = 'NEW!';
 
var currentDate = new Date(); 
$(function(){
    $('.new').each(function(){
        time = $(this).text().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).html(content).css('display', 'inline');
        }
    });
});
</script>

Comments

[miyabi_pudding]

MovableTypeのバージョンの記載をお願いします。
また、<mt:Pages lastn="1">と、Pを大文字にして一度試していただけませんか？

[BamBam]

ご返信ありがとうございます。
バージョン追記しました。
大文字にしましたが、できませんでした。

Answer 1

原因がわかりましたので、回答いたします。
lastnモディファイを使用していることが原因です。

MTPages - テンプレートタグリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト

lastnモディファイは、あくまで公開日順にしかならず、
検証の結果、その他のフィルタリング、順番指定は無視されることがわかりました。

limit="N"
lastn モディファイアがウェブページの公開日順に指定件数表示するのに対し、limit モディファイアは、指定された条件でフィルタリングした結果を指定数だけ表示します。

よって、代わりにlimitモディファイを使用した上で、更新日時順でソートするようsort_byモディファイを使い、下記のようにします。

<mt:pages limit="1" sort_by="modified_on"><$mt:PageModifiedDate$><span class="new"></span></mt:pages>

ようは、lastnによって、違うやつの更新日が出てしまってたわけですね。

さて、JS取得に関してですが、日付比較の処理などの勉強をしっかりされたほうがいいかと思います。
大事なのは、フォーマットです。
上記の状態で、フォーマット指定をせず、日付を出力すると、日本においては、
2020年1月21日 15時と、そんな感じで出力されるかと思います。
しかしそれでは、
time = $(this).text().split(":");で正しく取得なんてできはしません。
（splitは第一引数の文字列区切りの配列を返すメソッド。今回のままでは、:なんてどこにも入っていないのでうまくいかない）
よって、下記のようにする必要があります。

<!-- 他の部分は省略 -->
<!-- 本来は、:区切りは、時:分:秒のみにすべきで、日付は、年/月/日 or 年-月-日が望ましい。（世界標準に準拠するため） -->
<!-- また、取得用のタグに日付が入っておらず取得できない状態だったので、取得できるように若干修正 -->
<mt:pages limit="1" sort_by="modified_on">
<!-- span.newの中に入ってなかったので、そりゃ取得できない。修正 -->
<span class="new"><$mt:PageModifiedDate format="%Y:%m:%d:%H:%M:%S"$></span></mt:pages>

<script type="text/javascript">
// passage time
var pass = 24;

// display content
var content = 'NEW!';

var currentDate = new Date(); 
$(function(){
  $('.new').each(function(){
    // 文字列配列取得なので、数値が入った配列に、メソッドチェーンにて修正
    // 日付の出力を、全て:区切りにしているため、split(':')で取得できるようになっている。
    const time = $(this).text().split(":").map(v => Number(v));
    // 数値配列になっているため、time[1] - 1の計算が正しく行われる
    const entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
    let now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
    now = Math.ceil(now);
    // -先頭にいれていたのはなぜ？日付の差が24時間以内との比較なら下記で十分
    if(now <= pass){
      $(this).html(content).css('display', 'inline');
    }
  });
});
</script>

日付処理というか、JavaScriptの基礎がなっていなかったようにお見受けしますので、
ご自身のコードとじっくり見比べ、何が違うのかしっかりと勉強してください。

Comments

[BamBam]

ありがとうございます!!!!
最新の更新の日時とれました。

あとは、jsの部分なのですが、こちらが上手くいきません。
こちらもご教授頂けないでしょうか。

newはあらかじめcssで非表示状態にしておいて、
jsのdisplay　inlineで表示状態にさせるというものです。

[miyabi_pudding]

time = $(this).text().split(":");
での取得が正しくされていないのでしょう。
日付出力のフォーマットは指定していますか？？
そのjs処理だと、全て:区切りでないと、正しく取得できません。
https://www.movabletype.jp/documentation/appendices/date-formats.html
を見てみて、それでも方法わからなければ、またコメントください。