使用 GatsbyJS 框架時,搭配 plugins 來快速架設網站或部落格非常方便。像是搭配 gatsby-transformer-remark 和 gatsby-remark-images 這兩個 plugins,就可以從 Markdown 檔案產生出圖文並茂的部落格文章。
在 gatsby-remark-images 的 config 中有一個欄位 showCaptions
預設是 false
。如果改成 true
的話,Markdown 的每張圖片會產生對應的 figcaption
,內容是圖片的 title
或是 alt
。
...
plugins: [
...,
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: true,
},
},
],
},
},
...,
]
...
例如下面這段 Markdown 就會產生文章一開始的貓咪圖片與圖片標題。
![Cat](cat.jpg "這是一張貓咪的圖片")