讓文章圖片有 figcaption

Cat
這是一張貓咪的圖片

使用 GatsbyJS 框架時,搭配 plugins 來快速架設網站或部落格非常方便。像是搭配 gatsby-transformer-remarkgatsby-remark-images 這兩個 plugins,就可以從 Markdown 檔案產生出圖文並茂的部落格文章。

在 gatsby-remark-images 的 config 中有一個欄位 showCaptions 預設是 false。如果改成 true 的話,Markdown 的每張圖片會產生對應的 figcaption,內容是圖片的 title 或是 alt

gatsby-config.js
...
plugins: [
  ...,
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-images',
          options: {
            showCaptions: true,
          },
        },
      ],
    },
  },
  ...,
]
...

例如下面這段 Markdown 就會產生文章一開始的貓咪圖片與圖片標題。

![Cat](cat.jpg "這是一張貓咪的圖片")
© 2019 Hau Chen