7.Markdown内の相対パスによるリンクが上手くできない (Gatsby-jsによるサイト構築記録)

このサイトを作るまでの記録。(時系列順)
実際に作業を行なったメモに追記、編集して投稿してるので投稿日と作業日は一致しない。

スターターを gatsby new したのは 2022 年の 3 月上旬。 gatsby のバージョンは 4.9

一覧はここ

ここまで、この投稿は全て notion にメモしてただけだでまとめてなかった。
メモがたくさんになった。
メモ → 記事にしてたところ少し問題が発生したのでそれを解決した記録。

問題

例えば次のように Markdown ファイルがあるとする。

content/
  └ post/
    ├ 2021/
    └ 2022/
      ├ hoge
      │ └ index.md
      └ fuga
        └ index.md

fuga/index.md にて、

huga への相対パスによる[リンク](../huga/index.md)

にするとただのファイルへのリンクになって素のマークダウンにリンクされる。

huga への相対パスによる[リンク](../huga/)

にすると、毎回外部ページリンクのようにページ全体がリロードされる。

解決

プラグインを入れると解決する。

$ npm i gatsby-plugin-catch-links

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        ...
        `gatsby-plugin-catch-links`
      ]
...

参考

雑記ブログ：内部リンクをリロードさせない

GIF はみ出る

本題から逸れるけど、上記の問題が解決してレスポンシブ確認してたら GIF 画像がはみ出る問題があった。
GIF は gatsby の方がいい感じの処理はしてくれず、ただ img で配置するだけになってるみたい。

src/style/markdown.scss に次を追加した。

.markdown {
  ...
  img {
    max-width: 100%;
  }
  ...
}