iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

PWA, Severless, GraphQL實作系列 第 6

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

  • 分享至 

  • xImage
  •  

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

YouTube Video:
Yes

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創建頁,這部分的內容,我們留到明天繼續。

同步發表於:NodeJust.com


上一篇
[影片]Gatsby.js 未來的網頁05:安裝Plugin
下一篇
[影片]Gatsby.js 未來的網頁07:自動生成文章
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言