Gatsby.js 未來的網頁06：加入Markdown
Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。
視訊教學連結
gatsby-source-filesystem
我們要從Markdown檔案中取得頁面內容需要gatsby-source-filesystem的幫助：
npm install --save gatsby-source-filesystem
安裝完成後，需要在gatsby-config.js的plugins部分，加入這個plugin。這次，我們要進行一些設定：
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
}
}
resolve是plugin名稱，options是設定，其中path是檔案存放目錄， ${__dirname} 是工作目錄，即這個網站的所在目錄，由於用到變數，我們用 backtick: ` （數字1左邊的那個按鍵），而不是引號。name是存放檔案的目錄名稱。
gatsby-transformer-remark
接著，我們需要將從Markdown檔案讀取出來的資料轉化成Gatsby能夠透過GraphQL提取的內容，這就需要另一個plugin：gatsby-transformer-remark
npm install --save gatsby-transformer-remark
這個plugin功能很強大，也能透過gatsby-config.js進行設定，但目前我們只要把它加入plugins裡：
'gatsby-transformer-remark'
有了這兩個Plugin，Gatsby就能夠從Markdown檔案中透過GraphQL讀取資料。
建立blog文章
在/src/pages底下，新增資料夾：20-08-2018-blog-post-1，在裡面新增index.md檔案，這便是blog文章所在位置。
這個檔案的由frontmatter開始。frontmatter是網站的基本資料，如title。以下是我們的index.md：
--- path: 'blog-post-1' title: 'My post' --- # Post Heading
templates
blog的文章要怎樣呈現？這就需要用到模版，讓所有的文章都使用相同的模版。
在/src底下，新增templates目錄，在其中新增post.js作為模版檔案，其內容為：
import react from 'react';
import Helmet from 'react-helmet';
export default function Template({data}) {
const {markdownRemark: post} = data;
return (
<div>
<h1>{post.frontmatter.title}</h1>
</div>
)
}
引數data是由GraphQL送進來的資料，也就是Markdown檔案裡面的內容。這些資料存放在markdownRemark變數當中，我們把它提取並存入post變數中，接著就可以透過post.frontmatter.title使用frontmatter中的title內容。
我們還要在template中加入GraphQL的query：
export const postQuery = graphql` query BlogPostByPath($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title } } } `
這段query是要透過路徑（引數：$path）取得對應的文章。
graphql開始是GraphQL的內容。第二行的BlogPostByPath是這段query的名稱，其接受一個引數：$path。我們要在markdownRemark中找frontmatter的path等於引數給予的$path的資料，找到後，我們要取得其html以及frontmatter中的path和title當中存放的內容。
下一步是要用Gatsby的createPages API建立頁，這部分的內容，我們留到明天繼續。