Gatsby.js 未來的網頁06:加入Markdown

[影片]Gatsby.js 未來的網頁06:加入Markdown

Gatsby可以以Markdown作為資料來源自動產生頁面,這讓我們可以輕易的建立Blog之類的網站:寫blog只需寫markdown。

gatsby-source-filesystem

我們要從Markdown文件中取得頁面內容需要gatsby-source-filesystem的幫助:

安裝完成後,需要在gatsby-config.js的plugins部分,加入這個plugin。這次,我們要進行一些設定:

resolve是plugin名稱,options是設定,其中path是文件存放目錄,${__dirname}是工作目錄,即這個網站的所在目錄,由於用到變量,我們用 backtick: ` (數字1左邊的那個按鍵),而不是引號。name是存放文件的目錄名稱。

gatsby-transformer-remark

接著,我們需要將從Markdown文件讀取出來的數據轉化成Gatsby能夠透過GraphQL提取的內容,這就需要另一個plugin:gatsby-transformer-remark

這個plugin功能很強大,也能透過gatsby-config.js進行設定,但目前我們只要把它加入plugins裡:

有了這兩個Plugin,Gatsby就能夠從Markdown文件中透過GraphQL讀取資料。

建立blog文章

在/src/pages底下,新增文件夾:20-08-2018-blog-post-1,在裡面新增index.md文件,這便是blog文章所在位置。

這個文件的由frontmatter開始。frontmatter是網站的基本資料,如title。以下是我們的index.md:

templates

blog的文章要怎樣呈現?這就需要用到模版,讓所有的文章都使用相同的模版。

在/src底下,新增templates目錄,在其中新增post.js作為模版文件,其內容為:

參數data是由GraphQL送進來的數據,也就是Markdown文件裡面的內容。這些數據存放在markdownRemark變量當中,我們把它提取並存入post變量中,接著就可以透過post.frontmatter.title使用frontmatter中的title內容。

我們還要在template中加入GraphQL的query:

這段query是要透過路徑(參數:$path)取得對應的文章。

graphql開始是GraphQL的內容。第二行的BlogPostByPath是這段query的名稱,其接受一個參數:$path。我們要在markdownRemark中找frontmatter的path等於參數給予的$path的數據,找到後,我們要取得其html以及frontmatter中的path和title當中存放的內容。

下一步是要用Gatsby的createPages API創建頁,這部分的內容,我們留到明天繼續。

本文參與iT邦幫忙鐵人賽簡體

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料