【MovableType.net】新しい投稿にNewアイコンをつけたい

【共有】ソースコード
え？日付の曜日を日本語にしたい
javascriptを使う必要なかった
参考サイト置き場
星間旅路のメロディ

MovableType.netの記事になります。
TOPページに項目として、新しい投稿を4件ほどチラ見せしたい。
新しいものは2週間くらいNewアイコンをつけたい。
そんな感じの要件はありますでしょうか。以下のようなものです。

簡単そうだと思うでしょう、それにテンプレートにすでにあるかもしれません。
何回もやったこともあるでしょう。でもおバカなのでスグ忘れてしまいます。

コピペばかりしているから。

何も身につかない。

ふぇ。。恐らくもう触ることもない案件ですけども。

メモとなります。

【共有】ソースコード

基本そうな構成要素を用意しました。
要件は以下です。

・TOPページに最大4件
・サムネイル画像（ない時は画像ない画像を表示）
・ページタイトル
・記事カテゴリー（横にNEWマークつけたい）
・日付（見た目のフォーマットを2024.11.07にしたい）

html

<div class="entry-list">
<!-- 記事ループ 4件 -->
<mt:Entries lastn="4" unique="1">
  <article class="entry">
    <a href="<$mt:EntryPermalink$>">
      <img class="image" src="<mt:If tag="CustomFieldValue" identifier="gallery_images"><mt:CustomFieldAsset identifier="gallery_images"><$mt:AssetThumbnailURL$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL$><mt:Else><$mt:BlogURL encode_html="1"$>images/noimage.jpg</mt:EntryAssets></mt:If>" width="240"$>
      <h3><mt:CustomFieldValue identifier="pagetitle" /></h3>
      <p class="article-category"><span class="txt"><$mt:EntryCategory$></span><time class="new-icon" datetime="<$mt:EntryDate format="%Y-%m-%d"$>"><$mt:EntryDate format="%Y-%m-%d"$></time></p>
      <time datetime="<$mt:EntryDate format="%Y-%m-%d"$>" class="day"><$mt:EntryDate format="%Y.%m.%d"$></time>
    </a>
  </article>
</mt:Entries>
</div>

日付のフォーマットを変えたい時は、以下のように変えると表示の仕方が変わります。

html 9行目

「2024-11-07」を「2024.11.07」のようにドットで区切りたい場合：
<$mt:EntryDate format="%Y.%m.%d"$>

「2024年11月07日」のように年月日を明示したい場合：
<$mt:EntryDate format="%Y年%m月%d日"$>

「11月07日」のように年月を省略したい場合：
<$mt:EntryDate format="%m月%d日"$>

「Nov 07, 2024」のように英語で表示したい場合：
<$mt:EntryDate format="%b %d, %Y"$>

※補足
%b : 英語の月 (短縮形、例: Nov)
%B : 英語の月 (フル表記、例: November)
%a : 英語の曜日 (短縮形、例: Thu)
%A : 英語の曜日 (フル表記、例: Thursday)

続いてスクリプトです。

<time>タグの.new-iconのクラス要素に一致するすべての要素を取得して、時間で判別させてNEWアイコンを突っ込みたいというものです。

javascript (jQuery)

<script>
$(function () {
  // NEWアイコンを追加
  $('time.new-icon').each(function() {
    var current = new Date();
    var range_ms = current.getTime() - (14 * 24 * 60 * 60 * 1000);
    var modified = new Date($(this).attr('datetime'));
    var modified_ms = modified.getTime();
    if (range_ms < modified_ms) {
      $(this).after('<span class="text-icon">NEW</span>');
    }
  });
});
</script>

movabletype.net公式のスクリプトを参考にしました。
https://movabletype.net/dict/entry-01/new-icon-jquery.html

6行目の「current.getTime() – (14 * 24 * 60 * 60 * 1000);」の14の箇所が表示される日数ということで、14日間経ったらNEWアイコンは消えます。

css

.new-icon {
  display: none;
}
.image {
  display: none;
}
.entry a {
  display: block;
  position: relative;
  padding: 30px 60px;
  border-radius: 4px;
  transition: 0.3s;
}
.entry a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 60px;
  width: calc(100% - 120px);
  height: 1px;
  background: #DDDDDD;
  opacity: 1;
}
.entry:last-child a:before {
  opacity: 0;
}
.text-icon {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.15em;
  display: inline-block;
  background: #FEDE06;
  padding: 3px 8px 2px 10px;
  line-height: 15px;
  margin-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
  color: #393c41;
  border-radius: 3px;
}
.article-category {
  margin-top: 0;
  margin-bottom: 4px;
}
.article-category .txt {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 20px;
  text-align: left;
  display: inline-block;
  margin-right: 10px;
  color: #393c41;
}
.day {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #999;
}

クラス.new-iconの<time>タグは、時間を判別させるためにあるだけなのでdisplay: none;で非表示にしています。サムネイル画像はいらないそうで非表示に。

コピペ用に以上となります。

え？日付の曜日を日本語にしたい

日本語で曜日を突っ込むのは、すこし大変です。

2024.11.07 (木曜日)にしたい場合：

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

htmlソースの9行目を、JavaScriptで出力させるため<time>タグ内を消します。

document.addEventListener('DOMContentLoaded', () => {
  const dateElements = document.querySelectorAll('time.day');

  // 日本語の曜日リスト
  const weekdays = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];

  dateElements.forEach(el => {
    const originalDate = el.getAttribute('datetime'); // datetime属性から値を取得
    if (originalDate) {
      const date = new Date(originalDate); // ISO形式の日付をDateオブジェクトに変換
      const formattedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()} (${weekdays[date.getDay()]})`;
      el.textContent = formattedDate; // <time>タグ内にフォーマット済みの文字列を挿入
    }
  });
});

datetime属性のフォーマット（%Y-%m-%d）はそのままでOK。JavaScriptがこの形式を解釈し、曜日などを含むフォーマットに変換します。

解釈してくれるのですね！すごい。

日付がJavaScriptだと嫌だという方はjQueryにすると以下になります。

<script>
$(function () {
  // datetime属性を持つ.dayに対して処理を適用
  $('time[datetime].day').each(function() {
    var datetime = $(this).attr('datetime'); // datetime属性の値を取得
    if (datetime) {
      var date = new Date(datetime); // datetimeをDateオブジェクトに変換
      var options = { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' };
      var formattedDate = date.toLocaleDateString('ja-JP', options).replace(/\//g, '.'); // 日本語形式に変換し、スラッシュをドットに置換
      $(this).text(formattedDate); // 要素のテキストを更新
    }
  });
});
</script>

※日付オプション：8行目
weekday: 'short'　出力例：2024.11.07 (木)
weekday: 'long'　出力例：2024.11.07 (木曜日)

OpenAIに聞くと簡単に教えてくださいます。
課金してなくてすいません。
OpenAI使い方の記事はこちらです。

もう終わったんですか。

はい。内容が短過ぎでしょうか。すみません。

せっかくなので、いま聴いていたyoutubeの音楽を下に共有します。

javascriptを使う必要なかった

よく調べるとmovabletype.netでは、format=”%Ex”で日本語にすることができた。

公式の日付指定
https://movabletype.net/tags/date-formats.html

<mt:Date format="%Ex" regex_replace="/(年|月)0/g","$1 "/>

%Ex
年月日を和暦で表示します。(例: 令和元年05月07日)

※ 月日両方が1桁の場合に0を付加しない形で表示するには以下のように記述します。（例：令和元年 5月 7日）

%EX
時分秒を「HH時MM分SS秒」の形式で表示します。(例: 10時07分49秒)

%Ey
和暦の数字の部分を表示します。(例: 1)

%EY
和暦の最初の年を「元年」で表示します。(例: 令和元年)

%Ec
年月日　時分秒を和暦で表示します。(例: 令和元年05月07日 10時07分49秒)

スクリプトの記事は完全に必要ないですね。

参考サイト置き場

参考にさせていただきました。ありがとうございます。

movabletype.net：公式
https://movabletype.net/dict/entry-01/new-icon-jquery.html

星間旅路のメロディ

「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」

「この電波はどこの星からきたのだろうか。」

ワクワクするような波形を感じます。

これは！多重スクロールしてませんか！？