Movabletypeで昔ながらのNewマークを出す・・

らら
らら

はじめに

PHPで動的な場合は、PHP側で処理したりしますが・・

Movabletypeで、静的な場合の対応です。

JQueryで動的にだす・・・

記事をTOPなどに下記にように出しますが・・・

data-timeという要素を追加しておきます。。。

MTタグはこんな感じ


<mt:entries lastn="5">
<dl>
	<dt data-time="<$MTEntryDate format="%Y-%m-%d">"><$MTEntryDate format="%Y年%b月%e日"><span class="newsmark"></span></dt>
	<dd><a href="<mt:entrypermalink>"><mt:entrytitle></a></dd>
</dl>
</mt:entries>
<p><a href="<$mt:WebsiteURL encode_xml="1"$>news/">一覧はこちら</a></p>

JavaScript、JQueryはこんな感じ

使用されるhtmlから呼び出しします。

afterdayとかをお好みで・・

newsmarkのタグ出力もお好みで・・・


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function(){
	var afterday = 5;	//何日後
	$('[data-time]').each(function(index, element) {
		var dateval = $(this).attr('data-time')
		var dateParts = dateval.split('-');
		var year	= parseInt(dateParts[0]);
		var month	= parseInt(dateParts[1]) - 1;
		var day		= parseInt(dateParts[2]);
		var targetTime	= new Date(year,month,day,23,59);
		var currentTime	= new Date();
		targetTime.setDate(targetTime.getDate() + afterday);
		if (currentTime <= targetTime) {
			$(this).children(".newsmark").html(" new!");
		}
	});
});
</script>

さいごに

どうすればいいの？って聞かれたから・・作ってみました。。

メモです。

関連記事