Gatsby是一个基于React的静态网站生成器,而DatoCMS是一个内容管理系统。结合使用Gatsby和DatoCMS可以方便地创建和管理静态网站内容。
要添加新页面,可以按照以下步骤进行操作:
npm install gatsby-source-datocms
然后,在项目的gatsby-config.js文件中添加以下配置:
module.exports = {
plugins: [
{
resolve: "gatsby-source-datocms",
options: {
apiToken: "YOUR_DATOCMS_API_TOKEN",
},
},
],
}
将"YOUR_DATOCMS_API_TOKEN"替换为你在DatoCMS中生成的API token。
示例代码如下:
import React from "react"
import { graphql } from "gatsby"
import PageTemplate from "../path/to/PageTemplate"
const NewPage = ({ data }) => {
const pageData = data.datoCmsPage // 根据页面模型的名称获取数据
return <PageTemplate data={pageData} />
}
export const query = graphql`
query($slug: String!) {
datoCmsPage(slug: { eq: $slug }) {
# 在这里定义需要获取的页面字段
title
content
# ...
}
}
`
export default NewPage
gatsby develop
现在,你应该能够在浏览器中访问到新添加的页面了。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云云数据库MySQL(https://cloud.tencent.com/product/cdb_mysql)可以用于托管Gatsby项目和存储页面数据。
领取专属 10元无门槛券
手把手带您无忧上云