初始化项目
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 }) {
nodes {
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,
}
},
},
},
],
}
refs：
- 插件： https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/?=sitemap
- PR： WhiteMatrixTech/gatsby-demo#3
Dark Mode
修改项目：
- 安装插件
yarn add gatsby-plugin-theme-switcher - 修改配置
- 添加主题切换 component
- 添加主题样式（通过 css vars 或者其他）
- 运行并测试效果
refs：
