Google Bloggerのカスタマイズ備忘録ー７

0 Blogger

投稿記事の分割表示とページナビゲーション
投稿記事の分割表示とページナビゲーション
　Bloggerの追記区切り(続きを読む)設定機能は、トップページの記事一覧では有効に働きますが、記事ページの表示では全文が表示されてしまいます。　Bloggerには1つの投稿記事を複数ページに分割・表示する機能は存在しません。　そこで、記事ページを指定したセンテンスで分割し、ページナビゲーションでジャンプしたり出来る様にしてみた。

 Vaster2の導入とカスタマイズ その７　

<!--more-->タグ について

　記事の本文中に<!--more-->タグを挿入すれば、トップページの記事一覧に表示される文章の長さを制御できるけど、「Photo of the LIFE」では記事一覧の表示をカスタマイズしているので、<!--more-->タグは意味がないし、記事本文の表示では全文が表示されてしまう。　それゆえ、本文記事を表示する際に目次を作成・表示する「位置目標」として<!--more-->タグを利用しています。

Google先生に訊いてみる

　Googleで『bloggerで記事表示を分割するスクリプト』で検索すると、AI先生が教えてくれる。　ところが、検索する度に内容が変わるので、どれが良いのか判らなくなる。　AI先生が教えてくれた方法の一つは、複数の <div class="page-content"> ～ </div> で囲まれた各記事範囲を、表示/非表示に制御する方法だった。　この方法は記事単体で対応できるので悪くないけど、画像を含む長い記事全体が送られてしまうので最初の読み込み速度が高速化されないし、目次からのジャンプが破綻してしまうので却下かなぁ。

<!--nextpage-->タグ を利用する方法

<!--nextpage-->タグ を利用する方法

　Bloggerでは<!--nextpage-->タグが機能しないので、<!--nextpage-->タグを利用して記事を分割するスクリプトを組み込む事にした。　記事本文内の分割したい位置に<!--nextpage-->タグを挿入し、「Photo of the LIFE」の本体HTMLに分割スクリプトとCSSを記述する方法を誰かの記事で読んだのだけど、Googleで検索してもどの記事だか判らなくなってしまった。💦　元作者には申し訳ないけど、流用させて頂きました。m(_ _)m
　色々といじった現在の記事を分割表示させたページナビケーションは以下の様になってます。
記事を分割表示したページナビゲーション
記事を分割表示したページナビゲーション

記事分割スクリプトの追加

　下記の記事を分割してページナビを生成する下記のスクリプトを </body> の上に挿入します。
　：
　：
<!-- 記事の分割とページ送り対応 -->
<script type='text/javascript'>
//<![CDATA[
(function() {
    // 記事本文の要素を取得（テーマによってクラス名は要調整：通常は post-body）
    var postBody = document.querySelector('.post-body');
    if (!postBody) return;

    // <!--nextpage--> で分割
    var content = postBody.innerHTML;
    var pages = content.split('<!--nextpage-->');

    if (pages.length > 1) {
        var currentPage = 1;
        // URLパラメータから現在のページを取得
        var urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('page')) {
            currentPage = parseInt(urlParams.get('page'));
        }

        // ページが範囲外の場合は1ページ目を表示
        if (currentPage < 1 || currentPage > pages.length) currentPage = 1;

        // コンテンツを切り替え
        postBody.innerHTML = pages[currentPage - 1];

        // ページネーションリンクを生成
        var nav = document.createElement('div');
        nav.className = 'page-navigation';
        var navHtml = '<ul>';
        if (currentPage === pages.length) {
            navHtml += '<li><span class="current">»</span></li>';
        } else {
            // 現在のURLにパラメータを追加
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?page=" + [currentPage + 1];
            navHtml += '<li><a href="' + newUrl + '">' + '»</a></li>';
        }
        for (var i = 1; i <= pages.length; i++) {
            if (i === currentPage) {
                navHtml += '<li><span class="current">' + i + '</span></li>';
            } else {
                // 現在のURLにパラメータを追加
                var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?page=" + i;
                navHtml += '<li><a href="' + newUrl + '">' + i + '</a></li>';
            }
        }
        nav.innerHTML = navHtml;
        postBody.parentNode.insertBefore(nav, postBody.nextSibling);
    }
})();
//]]>
</script>
　：
　：
</body>

ページナビゲーション用CSSの追加

　ページナビゲーションの体裁を整えるために下記のCSSを <b:skin><![CDATA[ ～ ]]></b:skin> の間に記述します。
<b:skin><![CDATA[
　：
　：
/*-------------------------------
  記事分割用ページナビゲーション
--------------------------------*/
.page-navigation {
    text-align: center;
    align-items: center; 
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
.page-navigation ul::before {
    margin: 14px 0;
    font-size: 1.2em;
    font-weight: bold;
    content: "続きを読む";
}
.page-navigation ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
}
.page-navigation li {
    list-style: none;
    margin: 0 2px;
}
.page-navigation a, .page-navigation .current {
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    align-items: center;
    font-size: 1em;
    border-radius: 10%;
    margin: 0 2px;
    text-decoration: none;
    color: #fff !important;
    background: dodgerblue;
}
.page-navigation .current {
    color: #000 !important;
    background: #fff;
}

　：
　：

]]></b:skin>

記事本文の対応

　掲載記事をHTMLビューに切り替えて、記事本文の分割したい場所に<!--nextpage-->タグを挿入します。　<h2>見出し</h2>などの部分で分割するのが良いでしょう。　これで本文記事が分割され、分割された各ページの最後にページナビゲーションが表示されます。
　ただし、困ったこと記事に目次を入れてあった場合に、目次が最初のページ分しか展開されない事です。　とはいえ、各ページの先頭に目次が欲しいので、<!--nextpage-->の下に目次を自動生成する文言を入れれば、各ページ独立ではあるけど先頭に目次が表示されます。　HTML表示している掲載記事に下記HTMLを挿入します。　目次が必要ない場合は<!--more-->タグ以下は必要ありません。
　：
　：
<!--nextpage-->
<!--more-->
<script>
$(function(){
  $("body").toc();
}); 
</script>
<div align="center">
<div align="left" id="toc">
</div>
</div>
　：
　：

あとがき

　これで記事を分割表示出来る様になったけど、目次の処理などに不満が残る。　より良い方法があれば変更を検討したいと思います。
【追記】
　CSSで「続きを読む」を追加すると翻訳されないので、ページ・ナビゲーション・リンクの一部としてスクリプトで生成する事にしました。　なので、スクリプトとCSSを少し変更しましたが、まだ目次対策が出来ていないので、この備忘録には反映していません。m(_ _)m

コメントを投稿

Sponsored Link