Someday Somewhere

A little something to say in my everyday life

はてなブログのページャー

f:id:tsukisai:20190317125425p:plain 以前、はてなブログのページャーを少しカスタマイズしました。
その時の記事(↓) www.tsukisai.net

その時は、トップページの2ページ目以降に「前のページ」ボタンを設置しました。

特に問題なく使っていたのですが、最近、ふと見ると、カテゴリページの2ページ目以降に「前のページ」というリンクが2個あることを発見。

以前からあったのに気付かなかったのか、それとも何かカスタマイズした時にそうなってしまったのか・・・。 やっぱり見た目がよくないので、直すことにしました。

今まで使っていたソースで確認

今までのソースコード

<script type="text/javascript">
// 現在のページが記事一覧の2ページ目以降の場合処理実行
if (location.search.indexOf("?page=") === 0) {
// aタグの作成
var a = document.createElement('a');
a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
a.innerHTML = "前のページ"
a.setAttribute("href","javascript:void(0);");
a.setAttribute("rel", "prev"); // seo対策
// spanタグの作成(中に作成したaタグを入れる)
var span = document.createElement('span');
span.classList.add('pager-prev');
span.appendChild(a);
// classがpagerのdivタグに上記で作成したものを挿入する(classがpager-nextのspanタグよりも前に挿入する)
var element = document.getElementsByClassName("pager")[0];
element.insertBefore(span, element.firstChild);
}
</script>

今まで使っていた上記ソースコード内にある”前のページ”から文字の部分である「前のページ」を消し、” ”としてみた。

するとトップページの2ページ目から「前のページ」というリンクが消えました。 カテゴリページの2ページ目以降は問題なく「前のページ」というリンクが表示されています(カテゴリページのページャーは、はてなブログにもともとある機能の一部ということ)。

別のコードを使う

ということで、上記コードを変える必要があり、今回は次のサイトさんにあるコードを使わせて頂きました(↓)。

www.imuza.com

今回使ったコード

<script>
(function(){
if(document.body.classList.contains('page-index')){
if(location.href.indexOf('?page=') !== -1){
var pager = document.getElementsByClassName('pager')[0];
var elemSpan = document.createElement('span');
var prev;
if(document.referrer.indexOf(document.domain) !== -1) {
prev = '<a href="#" onClick="history.back(); return false;">前のページ</a>';
}else{
prev = '<a href="/">ホーム</a>';
}
elemSpan.innerHTML = prev;
elemSpan.classList.add('pager-prev')
pager.insertBefore(elemSpan, pager.firstChild);
}
}
}());
</script>

フッタにあった以前のコードを消し、新しいコードを貼り付けて終了。

確認した結果、カテゴリページの2ページ目以降に現れていた2個の「前のページ」はちゃんと1個になっていました。 トップページ、カテゴリページ共に今の時点では特に問題が見つかっていないので、ひと安心といったところです。