はてなブログの個別記事でページャーに日付を追加する

はてなブログで個別の記事を開くと、ページの下部にページャー(前後の記事へのリンク)が表示されますが、現状では左が新しい記事、右が古い記事になっています。パッと見では判断がつかないので、日付を追加してみました。

ページャーに表示されているリンクのURLから年月日を抽出して、リンクの前に書き加えています。

<script type="text/javascript">
function pagerDate(pager){
    if(pager == null || pager.childNodes[1] === undefined){
        return false;
    }
    
    // 記事のURLから年月日(yyyy/mm/dd)にマッチさせる
    var dateReg = /\d{4}\/\d{2}\/\d{2}/; 
    var date = dateReg.exec(pager.childNodes[1].href);

    // yyyy/mm/dd を yyyy-mm-ddに変換して表示する
    if(date != null){
        pager.innerHTML = date[0].replace(/\//g,"-") + "<br />" + pager.innerHTML;
    }
}

// PC
var prev = document.querySelector(".pager-prev");
var next = document.querySelector(".pager-next");
pagerDate(prev);
pagerDate(next);

// スマートフォン(はてなブログProのみ)
var left = document.querySelector(".pager-l");
var right = document.querySelector(".pager-r");
pagerDate(left);
pagerDate(right);

</script>

管理画面からデザイン→カスタマイズ→フッタにスクリプトを追加してください。ページャーが読みこまれた後に処理する都合から、フッタかサイドバーのモジュールに追加する必要があります。スマートフォンでフッタにHTMLを表示するのはPro専用の機能なので、一般ユーザーでの対応はできていません。

記事のURLがはてなダイアリー形式(entry/yyyymmdd/...)だと年月日の間にスラッシュがないので、年月日のマッチと日付を表示する処理が一部変わります。

function pagerDate(pager){
    if(pager == null || pager.childNodes[1] === undefined){
        return false;
    }
    
    // 記事のURLから年月日(yyyymmdd)にマッチさせる
    // date[1]に年、date[2]に月、date[3]に日が入る
    var dateReg = /(\d{4})(\d{2})(\d{2})/;
    var date = dateReg.exec(pager.childNodes[1].href);

    if(date != null){
        var date = date[1] + "-" + date[2] + "-" + date[3];
        pager.innerHTML = date + "<br />" + pager.innerHTML;
    }
}

冒頭の画像の例だと、こんな感じで年月日と改行タグが書き加えられているはずです(PCの場合)

<div class="permalink pager">
  <span class="pager-prev">2015-11-07<br> <!-- 書き加えたところ -->
    <a href="http://sprint-life.hatenablog.com/entry/2015/11/07/232635" rel="prev">
      <span class="pager-arrow">« </span>
      はてなブログ4周年おめでとうございます
    </a>
    </span>

    <span class="pager-next">2015-11-04<br> <!-- 書き加えたところ -->
    <a href="http://sprint-life.hatenablog.com/entry/2015/11/04/211503" rel="next">
      Twitterの「お気に入り」が「いいね」に変…
      <span class="pager-arrow"> »</span>
    </a>
    </span>
</div>

日付ごとのページ(ブログのURL/entries/yyyy/mm/dd)でも同じように処理がされますが、ページャが過去にしか進めないので日付はなくてもいいかもしれません。