投稿ページに次のページへ前のページへをつける

もしかしたらもっとスマートなやり方があるかもだけどまずは自己流で。

記事ファイルのメタ情報に、次のページ、前のページという意味でにmdファイル名を入れていました。
これを使ってリンクを張ればいけるなと、考えていました。

nextpage: 001
prevpage: 003

致命的なミス？発見…

それで「$page.stepPost.nextpage」で値を引っ張ってきたんだけど、表示されるのはゼロが抜けた「1」とか「3」とかで…
いやいやゼロどこ行った？と。
文字列にすればいけるじゃないの？とやったけど「1」と「3」。。。

嘘でしょ…といろいろ調べてると…これか。。。

前ゼロをつけるということが特殊な意味を示すとは知りませんでした...。

詳しいことが掲載されてなかったんだけど、私と同じように悩んだ人がですねぇ賢人の方々にゼロが前につくと意味が変わって正しい計算できないよと。

私は計算には使わないんだけど、あんま良くないんだな…ということは分かった！

ハイやり直し～

まずは、markDownファイルのファイル名を「001.md」とかにしてたけど「1.md」の形式に全部変更！
全部ね…まだ傷は浅かったはず…

メタ情報もやり替えました！

nextpage: 1
prevpage: 3

ここまできたら考え通りに

templatesの「StepPost.vue」にページ繰りのレイアウトを追加します。

<div class="row mt-5">
  <div class="col">
    <p class="d-flex align-items-center"><b-icon-arrow-left-circle-fill font-scale="2" class="mr-2"></b-icon-arrow-left-circle-fill font-scale="2"><a :href="'/step/'+ $page.stepPost.prevpage + '/'">前のページへ</a></p>
  </div>
  <div class="col">
    <p v-if="$page.stepPost.nextpage !== null" class="d-flex align-items-center justify-content-end"><a :href="'/step/'+ $page.stepPost.nextpage + '/'">次のページへ</a><b-icon-arrow-right-circle-fill font-scale="2" class="ml-2"></b-icon-arrow-right-circle-fill font-scale="2"></p>
  </div>
</div>
<p class="d-flex align-items-center justify-content-center"><b-icon-arrow-up-circle-fill font-scale="2" class="mr-2"></b-icon-arrow-up-circle-fill font-scale="2"><a href="/step/">目次ページに戻る</a></p>

リンクのところは↓こんな感じです。
記事のURLは「https://gogridsome.work/step/3/」こうなっているので、文字列「/step/」を前に足して「$page.stepPost.prevpage」で引っ張ってきた数字を入れる、最後にスラッシュを足してURLを整形しました。

<a :href="'/step/'+ $page.stepPost.prevpage + '/'">

最後の記事には次のぺージの表示は要らないっす

そうなんです、最後の記事には次のページは当たり前なんですがないので、表示を消したい。

markDownファイルのメタ情報「nextpage」は空っぽにしとく。

nextpage: 
prevpage: 12

templatesの「StepPost.vue」には「v-if="$page.stepPost.nextpage !== null"」を入れました。
「$page.stepPost.nextpage」が空っぽじゃなかったら表示してねって感じです。

<p v-if="$page.stepPost.nextpage !== null" class="d-flex align-items-center justify-content-end"><a :href="'/step/'+ $page.stepPost.nextpage + '/'">次のページへ</a><b-icon-arrow-right-circle-fill font-scale="2" class="ml-2"></b-icon-arrow-right-circle-fill font-scale="2"></p>

新しく記事を追加するたびに、前のファイルを更新しないとダメっていうのはあんまスマートじゃないけど、今はこれで良しとします！