トップページ > Movable Type 4.1メモ > 新着エントリーのあるカテゴリーに「New」をつける

新着エントリーのあるカテゴリーに「New」をつける

「最新のエントリー」やその「カテゴリー」に新着の表示を付けようというものですが、「最新のエントリー」にはすでに日付をつけてあるので、エントリーが埋もれてしまう「カテゴリー」のほうだけに、新着記事に「New!」を付ける作業です。

そこで小粋空間さんの記事を参考にしてウィジットテンプレートの「カテゴリーアーカイブ」にコードを追加します。

 <li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription">title="<$mt:CategoryDescription$>"
</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>

<!-- このあとに追加 -->
<span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>

さらにタグの外にjavascriptを追加します。

<script type="text/javascript">
<!--
// 新着表示の時間
var pass = 24;

// 新着表示の内容
var content = 'New!';

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>

新着表示の時間(赤色部分)は24時間だと

// 新着表示の時間:単位は時間
var pass = 24;

新着表示の内容(赤色部分)は

// 新着表示の内容
var content = 'New!';

画像を張る場合は

var content = '<img src="*** />';

・・・

こんなことするのは私だけ?と思ったら、仲間探しに
にほんブログ村 住まいブログへ にほんブログ村 住まいブログ DIYへ

前のページへ まえへ トップページ つぎへ 次のページへ

| コメント(0)

コメントする

INDEX

プロフィール

プロフィール

タクロー
欠点の多い中古公団のリフォームでもあり、安く高品質(?)を目指すにはセルフリフォームしかないと、家族の不安をよそに、経験もないのに素人職人に挑戦しました。
頼りになるのはおじいちゃんが大工だったという血筋のみです(爆)
ですから、おシャレなことはできません。。
解体しないとわからないところもありますので、同じ年代の公団団地のリフォームの参考になれば幸いです。

ブログパーツ

Powered by Movable Type

since 2007.6.19