timeタグの中身を書き換えただけの話
以前からarchive以下のページ(カテゴリや月別アーカイブでの遷移先ページ)の日付の表示がおかしかった。
なので、それを修正した。
やったことはすごく単純で
URL取得して、archive
の文字列含んでいるか見て、
あったらtime
タグ取得して、innerHTML
を置き換え。
一応以下に詳細をば。
まずURLの取得
<script> var url = window.location.toString(); </script>
この後文字列操作したいのでtoString()
を忘れずに。
次はその文字列がarchive
を含んでいるか調べる。
<script> if (url.indexOf("archive") > -1) { // 処理 } </script>
indexOf
は指定した文字列が何番目かを返す。
無ければ-1を返す。
なので、これ以外にも!= -1
や >= 0
とかでも良いんじゃないかな。
最初、containとかあるかなーって思っていたんですが、無いのですね。
次は問題となっているtime
タグ取得。
<script> var times = document.getElementsByTagName("time"); for (var i = 0; i < times.length; i++) { // 処理 } </script>
document.getElementsByTagName("time") によってtime
タグの要素配列が得られる。
今回は気にしなくて大丈夫だったけど、
全取得なので、場合によっては修正しなくて良い場所と分ける必要がある。
配列の要素を回してくれる、foreach的なのないかなーって思ったんですが
どうにも微妙そうなのばかりなので、普通のに落ち着いた。
最後に要素の書き換え。
<script> var timeArray = times[i].innerHTML.split("-"); times[i].innerHTML = "<span class='date-year'>" + timeArray[0] + "</span><span class='date-month'>" + timeArray[1] + "</span><span class='date-day'>" + timeArray[2] + "</span>" } </script>
今回問題だったのが、年・月・日と要素が別れておらず、
year-month-day
という形であったこと。
なのでsplit
で区切り文字(-)を指定して分ける。
後はinnerHTML
に目的のHTMLを入れる。
まとめると、
<script> var url = window.location.toString(); if (url.indexOf("archive") > -1) { var times = document.getElementsByTagName("time"); for (var i = 0; i < times.length; i++) { var timeArray = times[i].innerHTML.split("-"); times[i].innerHTML = "<span class='date-year'>" + timeArray[0] + "</span><span class='date-month'>" + timeArray[1] + "</span><span class='date-day'>" + timeArray[2] + "</span>" } } </script>
このコードで
<time datetime="2017-01-31" title="2017-01-31">2017-01-31</time> ↑これが <time datetime="2017-01-31" title="2017-01-31"><span class="date-year">2017</span><span class="date-month">01</span><span class="date-day">31</span></time> ↑こうなった