Gatsby 入門示例

初始化項目

refs:

• 官方 Starter 模闆： https://www.gatsbyjs.com/starters/
• 部落格模闆： https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/

npx gatsby new gatsby-demo

https://github.com/gatsbyjs/gatsby-starter-blog

Plugins

MDX

修改項目：

• 添加對應的依賴項

  yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

• 修改配置
• 删除沒用的依賴項

  yarn remove gatsby-plugin-image gatsby-transformer-remark gatsby-plugin-gatsby-cloud

• 修改 GraphQL 查詢語句及相關頁面的模闆
• 測試運作，細節調整

refs：

• 插件： https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx
• PR： WhiteMatrixTech/gatsby-demo#2
• MDX模闆： https://github.com/hagnerd/gatsby-starter-blog-mdx

Sitemap

• 安裝插件

  yarn add gatsby-plugin-sitemap

• 打包測試（運作

  develop

  不生成）

配置中需要指定 GraphQL 查詢，以 MDX 為例：

const siteUrl = process.env.URL || `https://fallback.net`

module.exports = {

  siteMetadata: {

   // 注意 siteUrl 需要提前指派變量

    siteUrl,

  },

  plugins: [

     //  其他插件

    {

      resolve: `gatsby-plugin-sitemap`,

      options: {

        query: `

        {

          allSitePage {

            nodes {

              path

            }

          }

          allMdx(sort: { fields: [frontmatter___date], order: DESC }) {

              fields {

                slug

              }

              frontmatter {

                date

        }

      `,

        resolveSiteUrl: () => siteUrl,

        resolvePages: ({

          allSitePage: { nodes: allPages },

          allMdx: { nodes: allNodes },

        }) => {

          const allNodeMap = allNodes.reduce((acc, node) => {

            const { slug } = node.fields

            acc[slug] = {

              path: slug,

              modifiedGmt: node.frontmatter.date,

            return acc

          }, {})

          return allPages.map(page => {

            return { ...page, ...allNodeMap[page.path] }

          })

        },

        serialize: ({ path, modifiedGmt = "" }) => {

          return {

            url: path,

            lastmod: modifiedGmt,

      },

    },

  ],

}

• https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/?=sitemap
• WhiteMatrixTech/gatsby-demo#3

Dark Mode

• yarn add gatsby-plugin-theme-switcher

• 添加主題切換 component
• 添加主題樣式（通過 css vars 或者其他）
• 運作并測試效果

• https://www.gatsbyjs.com/plugins/gatsby-plugin-theme-switcher/?=theme-switcher
• WhiteMatrixTech/gatsby-demo#4