カンタンBlogger学習 #10 記事一覧の総数を表示する方法

2023年4月14日

GoogleBlogger

eyecatch Bloggerの標準機能で、記事の総数を表示してくれる機能がありません。 ということで、無いものは自分で作ってしまいましょう。

ソースコード

1. テーマの編集

テーマ/カスタマイズ/HTMLの編集

2. headタグ内にscriptタグを追記

<script>/*<![CDATA[*/ function feed(url){ const s = document.createElement('script') s.src = url document.body.appendChild(s) } function set_page_status(page_status){ document.body.setAttribute('data-status' , page_status) } function set_post_counts(res){ const elm = document.getElementById('total_posts') if(elm){ const view_items = document.querySelectorAll('.widget .grid > a') elm.textContent = `総数 : ${res.feed.openSearch$totalResults['$t']} 件` } } /*]]>*/</script>

3. 一覧表示するウィジェット箇所に追記

<script> set_page_status('articles') feed('/feeds/posts/default?alt=json&amp;max-results=<data:numPosts />&amp;callback=set_post_counts') </script>

4. 表示タグを追記

<div id='total_posts'></div> ページ内のどの場所に設置しても対応できます。 複数設置したい場合は、javascriptを書き直す必要があので、適宜ご対応ください。 表示するデザインや文言などは、独自にcssを記述してください。

解説

・ラベル、検索ワードには未対応 ・結果スピードを早くするために、max-results=0をセット(ほんのちょっとだけ) ・set_post_counts関数で結果を受け取り表示処理

あとがき

上記設置により、ブログの記事総数が表示できるようになりました。 https://blog.myntinc.com/ でも、少し問題もあり、ブログ内の検索をした場合に該当のリスト総数に切り替えないといけないんですが、そうした処理は今回はしていません。 単に総数が表示されるだけです。 他にもラベルでの絞り込み総数や、それらの組み合わせ検索などの場合の対応をする必要がありますね。 この辺は、feed検索のクエリなどの処理を拡張して対応する必要があるので、安定した処理が作れたらブログで公開したいと思います。 お楽しみに!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。