【Movable Type & jQuery】公開日が閲覧時より2週間前までの記事に「NEW」表示

キャプチャ
HTMLのtime要素を機軸にjQueryで2週間前までの記事に「NEW」を表示させます。

Movable Type(ウィジェットセット)

<time datetime="<$mt:EntryDate format="%Y-%m-%d"$>"><$mt:EntryDate format="%m/%d"$></time><br>

HTML

<section class="post" id="news">
	<h2>NEWS</h2>
	<ol>
		<li><time datetime="2015-10-02">10/02</time><br>
		<a href="http://www.navi-pet.com/blog/2015/10/post-50.html"><span class="title">穀物でも身体に優しい、ヤラーのドッグフード</span></a></li>
		<li><time datetime="2015-10-02">10/02</time><br>
		<a href="http://www.navi-pet.com/blog/2015/10/post-49.html"><span class="title">グレインフリーでカロリー控えめ!ピナクル ダック&ポテトのドッグフード</span></a></li>
		<li><time datetime="2015-10-02">10/02</time><br>
		<a href="/ranking/#blog000072"><span class="title">おすすめ商品「ラムやターキーと、肉の種類も豊富。ネイチャーズバラエティ!」追加</span></a></li>
		<li><time datetime="2015-09-18">09/18</time><br>
		<a href="http://www.navi-pet.com/blog/2015/09/post-47.html"><span class="title">何を基準に選べばいい?ドッグフードのタイプ別特徴</span></a></li>
		<li><time datetime="2015-09-09">09/09</time><br>
		<a href="/ranking/#blog000070"><span class="title">おすすめ商品「オリジン・パピー」追加</span></a></li>
	</ol>
</section>

jQuery

<script>
$(function() {
	var after = 14;
	after = after*24*60*60*1000;
	now = new Date();
	$('time').each(function() {
		var lists = $(this).attr('datetime');
		var times = lists.replace(/^(\d+)-(\d+)-(\d+)$/,"$1,$2,$3");
		times = times.split(",");
		var settime = new Date(times[0],times[1]-1,times[2]);
		end = new Date(settime.getTime()+after);
		if(now < end) {
			$(this).append('<span class="new">NEW</span>');
		}
	});
});
</script>

【参考】jQueryで新着情報に一定期間内だけNewを表示する
jQueryの詳細解説は上記サイトでご覧下さい。

参考サイトとの違いですが、
datetime属性を使用しているところです。

datetime属性とは

time要素に datetime=”” を追加すると、日付や時刻を属性値で指定することができます。

2 thoughts on “【Movable Type & jQuery】公開日が閲覧時より2週間前までの記事に「NEW」表示

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です