新着記事にNewマークを付ける

小粋空間様の新着エントリーのあるカテゴリーに New マークをつけるを参考にして、『カテゴリ-新着記事』にNewマークを付けてみました。

考え方は、
　[1] 画面表示作成時に規定フォーマットで(記事などの)時刻を出力する。
　[2] [1]はタグで囲んでおき、CSSで非表示設定をする。
　[3] タグで囲まれた時刻を見つけたら、現在時刻と比較し、指定時間未満には『New』に置き換えて表示『可』に変更する。

では、順を追って説明します。

[1] 変更箇所は、デザイン→コンテンツ→新着記事→コンテンツHTMLです。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>● <a href="<% article.page_url %>" title="<% article.createstamp|date_format("%m/%d") %> <% article.subject %>"><% article.subject|tag_break|shorten(20) %></a><span class="new"><% article.createstamp|date_format("%Y:%m:%d:%H:%M:%S") %></span><br /><% /loop -%>
<% content.footer -%>
</div>

青色の部分で規定フォーマットの時刻をspanタグで囲んで埋め込んでいます。

[2] 変更箇所は、デザイン→スタイルシートです。最後にでも追加してください。

/* New! マーク */
span.new {
    display: none;
    color: red;
    font-weight: bold;
}

[3] 変更箇所は、デザイン→HTMLです。</body>タグの直前に追加しました。

<script type="text/javascript">
<!--
// passage time
var pass = 48;
 
// display content
// var content = 'New!!';
var content = '<img src="http://a/b.gif" width="22" height="9"/>';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.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){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

青文字の部分はGif画像を貼っている箇所です。この行を削除して直前の行の『//』を取れば、文字で『New』と出ます。

赤文字の部分は比較時間です(単位：時間)。48で、48時間以内はNewが出ます。

カテゴリやコメントなども、『[1]』の部分を修正するだけですから、応用が利きそうですね。

(気づいたこと 感じたこと お気軽にコメントください。 疑問・質問・苦情も 大歓迎です。)