てがろぐ個別記事の前後移動リンク

20221215.jpg

てがろぐ個別記事表示時の前後移動リンクは、デフォルトでは記事Noになっています。これを前後それぞれの記事タイトルリンクにするカスタマイズの覚書です。

使用するのは jQuery

考え方は「てがろぐ」記事単体表示の時のtitle要素と同じです。動的に前後記事リンクの中身を書き換えています。

skin-onelog.html

以下の記述を追加します。

<h2 class="title"> [[COMMENT:TITLE]] </h2>

[[COMMENT:TITLE]]は投稿本文一行目のみを抜き出すスキン用キーワードです。

skin-cover.html

最後のほうに jQuery 読み込みのためのスキン用キーワード[[JS:LIGHTBOX:JQ]]があると思います。これをまず以下のように書き換えます

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
[[JS:LIGHTBOX]]

そしてその下に

<script>
if(location.href.match("postid")) {
var prevurl = $('.prevlink').attr("href");
var nexturl = $('.nextlink').attr("href");
$('.prevlink').load(prevurl + ' h2.title', function() {$('.prevlink').text($(this).text())});
$('.nextlink').load(nexturl + ' h2.title', function() {$('.nextlink').text($(this).text())});;
}
</script>

を追記します。これで個別記事表示時の前後記事への移動リンクにそれぞれの記事のタイトル(投稿本文一行目)を表示することができます。動的に読み込んでいるので、閲覧環境によっては記事No.から記事タイトルに変わるまでタイムラグが生じることもあります。

サンプル

10plogで見てみてください。