iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

PWA, Severless, GraphQL實作系列 第 5

[影片]Gatsby.js 未來的網頁05:安裝Plugin

和WordPress一樣,Gatsby.js也有plugin系統,透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝plugin。

Yes

gatsby-config.js

gatsby-config.js當中的plugins部分設定了這個網站的所有plugins。以下是預設Starter的gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}

可以看到plugins是一個array,裡面一共有三個plugins,以逗號分開。其中,第二個plugin是一個object,以大括號包起來。這樣做是為了對plugin進行設定。大括號裡的resolve部分是plugin的名稱,options部分便是針對這個plugin的設定,設定內容因不同plugin而異。

安裝plugin

以gatsby-plugin-sass為例,官方文檔提供了指令:

npm install --save node-sass gatsby-plugin-sass

在Command Line,這個網站的位置執行即可。

接著,要在gatsby-config.js中加入這個plugin,由於我們不需要額外設定,只要將plugin名稱加到plugins array最後即可:

'gatsby-plugin-offline',
'gatsby-plugin-sass',

測試plugin

為了測試這個plugin,我們可以把/src/components/當中的layout.css,改為SASS專用的SCSS格式:layout.scss。並在layout.js裡,找到:

import './layout.css'

同樣改為:

import './layout.scss'

執行gatsby develop,查看效果,應該和之前完全一樣。若你的gatsby網站一直跑著,記得先結束(Control + C),再執行一次gatsby develop,因為安裝plugin後需要重啟。

若要進一步測試,可以在layout.scss當中使用SASS語法,如:

body {
  margin: 0
  background: #ff0;
  p {
    color: #fff;
  }
}

同步發表於: NodeJust.com


上一篇
[影片]Gatsby.js 未來的網頁04:新增頁面
下一篇
[影片]Gatsby.js 未來的網頁06:加入Markdown
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言