{"id":48187,"date":"2023-03-09T02:44:46","date_gmt":"2023-01-27T06:58:49","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/"},"modified":"2024-04-29T18:00:31","modified_gmt":"2024-04-29T10:00:31","slug":"%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/","title":{"rendered":"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b"},"content":{"rendered":"

\u6211\u8bd5\u8fc7\u7528 Gatsby\uff0c\u4f46\u53ea\u7528\u6559\u7a0b\u53ea\u80fd\u89e3\u51b3\u4e00\u4e9b\u95ee\u9898\uff0c\u6700\u540e\u8fd8\u662f\u4e0d\u5f97\u4e0d\u9605\u8bfb\u5927\u91cf\u6587\u6863\u3002\u6574\u7406\u4e86\u6587\u6863\u94fe\u63a5\u540e\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u8fd8\u4e0d\u9519\u7684\u6559\u7a0b\uff0c\u6240\u4ee5\u53d1\u4e86\u51fa\u6765\uff08\u867d\u7136\u6709\u4e9b\u5730\u65b9\u8fd8\u662f\u6709\u70b9\u4e0d\u5b8c\u6574\u7684\uff09\u3002<\/p>\n

\uff08\u8ffd\u52a0\u8bf4\u660e\uff09\u5f53\u5b9e\u9645\u521b\u5efa\u535a\u5ba2\u65f6\uff0c\u60a8\u53ef\u80fd\u4f1a\u53c2\u8003\u8fd9\u91cc\u7684\u5185\u5bb9\u3002<\/p>\n

\u5b89\u88c5<\/h2>\n
npm install -g gatsby-cli\r\n<\/code><\/pre>\n
gatsby new [rootPath] [starter]  Create new Gatsby project.\r\n<\/code><\/pre>\n
\u60a8\u53ef\u4ee5\u6307\u5b9a\u4e00\u4e2a\u201cstarter\u201d\u6765\u542f\u52a8\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5c06\u9009\u62e9\u9ed8\u8ba4\u7684\u542f\u52a8\u5668\u3002<\/p>\n
\u7531\u4e8e\u8fd9\u662f\u4e00\u4e2a\u5165\u95e8\u6559\u7a0b\uff0c\u53ea\u9700\u8981\u9009\u62e9\u4e00\u4e2aHello-World\u3002<\/p>\n
gatsby new my-blog https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world\r\n<\/code><\/pre>\n
gatsby develop\r\n<\/code><\/pre>\n
\u603b\u7b97\u4e5f\u5199\u5728\u4e86npm\u811a\u672c\u4e2d\u3002<\/p>\n
npm run develop \r\n<\/code><\/pre>\n
 \"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"develop\"<\/span>:<\/span> \"gatsby develop\"<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
\u5f53\u9700\u8981\u542f\u52a8\u591a\u4e2a\u9879\u76ee\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528-p\u9009\u9879\u6765\u6307\u5b9a\u4e0d\u540c\u7684\u7aef\u53e3\u3002<\/p>\n
gatsby develop -p 3000\r\n<\/code><\/pre>\n
CLI\u7684\u6587\u6863\u90fd\u88ab\u8be6\u7ec6\u5730\u63d0\u4f9b\u4e86\u3002<\/p>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7http:\/\/localhost:8000\/\u8bbf\u95ee\u9875\u9762\uff0c\u5e76\u4e14\u53ef\u4ee5\u901a\u8fc7http:\/\/localhost:8000\/___graphql\u8bbf\u95eeGrqphiQL\u3002<\/p>\n
\u521d\u7ea7\u521d\u5b66\u8005<\/h2>\n
\u9875\u9762 (y\u00e8 mian)<\/h3>\n
\u5728\u76ee\u5f55\u7684\u7ed3\u6784\u4e2d\u6709\u89c4\u5219\uff0cpages\/\u4f1a\u81ea\u52a8\u6210\u4e3a\u9875\u9762\u3002
\n\u4f8b\u5982\uff0c\u521b\u5efapages\/about.js\uff0c\u5c31\u4f1a\u5728\/about\u4e0a\u663e\u793a\uff08\u751f\u6210\u9875\u9762\u5e76\u8bbe\u7f6e\u8def\u7531\uff09\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> <<\/span>div<\/span>><\/span> index<\/span> page<\/span> <<\/span>\/div<\/span>>\r\n<\/span><\/code><\/pre>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> <<\/span>div<\/span>><\/span> hello<\/span> page<\/span> <<\/span>\/div<\/span>>\r\n<\/span><\/code><\/pre>\n
\u60a8\u53ef\u4ee5\u5728components\/\u4e2d\u521b\u5efa\u5171\u4eab\u7ec4\u4ef6\uff0c\u7136\u540e\u50cf\u5f00\u53d1\u666e\u901a\u7684React\u5e94\u7528\u7a0b\u5e8f\u90a3\u6837\u8fdb\u884c\u5f00\u53d1\u3002<\/p>\n
\u5728 src\/pages\/*.js \u4e2d\u5b9a\u4e49\u7684\u4efb\u4f55 React \u7ec4\u4ef6\u90fd\u5c06\u81ea\u52a8\u6210\u4e3a\u4e00\u4e2a\u9875\u9762\u3002<\/p><\/blockquote>\n
\u4f7f\u7528\u9875\u9762\u7ec4\u4ef6<\/p>\n
\u8fd8\u53ef\u4ee5\u521b\u5efa\u6a21\u677f\u6587\u4ef6\u5e76\u52a8\u6001\u5730\u751f\u6210\u9875\u9762\u3002\u53ef\u4ee5\u81ea\u52a8\u521b\u5efa\u9875\u9762\u3002<\/p>\n
GraphQL (only need one option):<\/h3>\n
GraphQL\u662f\u4e00\u79cd\u67e5\u8be2\u8bed\u8a00<\/p>\n
gatsby \u7684\u65b9\u4fbf\u4e4b\u5904\u5728\u4e8e\u53ef\u4ee5\u901a\u8fc7 Graphql \u5728\u9879\u76ee\u5185\u83b7\u53d6\u6570\u636e\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u67e5\u8be2\u83b7\u53d6\u9879\u76ee\u7684\u8bbe\u7f6e\u4fe1\u606f\u3002<\/p>\n
\u5c06config\u6587\u4ef6\u5982\u4e0b\u8fdb\u884c\u66f4\u6539\u3002<\/p>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  siteMetadata<\/span>:<\/span> {<\/span>\r\n    title<\/span>:<\/span> `Title from siteMetadata`<\/span>,<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
  query {\r\n    site {\r\n      siteMetadata {\r\n        title\r\n      }\r\n    }\r\n  }\r\n<\/code><\/pre>\n
\u793a\u5a01\u6d3b\u52a8<\/p>\n
\u901a\u8fc7\u67e5\u8be2\u83b7\u53d6\u9879\u76ee\u4fe1\u606f\uff0c\u521b\u5efa\u4e00\u4e2a\u663e\u793a\u8fd9\u4e9b\u4fe1\u606f\u7684React\u7ec4\u4ef6\uff0c\u5e76\u4e14\u57fa\u4e8e\u5b83\u751f\u6210\u9875\u9762\u7684\u6d41\u7a0b\u662fgatsby\u7684\u3002<\/p>\n
\u4f7f\u7528\u4e00\u4e2a\u9875\u9762\u67e5\u8be2<\/p>\n
\u6211\u8ba4\u4e3a\u5bf9\u4e8e\u8fd9\u4e2aGraphQL\uff0c\u6700\u597d\u5c06\u5176\u5206\u4e3a\u4e24\u4e2a\u6b65\u9aa4\u6765\u7406\u89e3\uff0c\u4e00\u4e2a\u662f\u6dfb\u52a0\u6570\u636e\u7684\u6b65\u9aa4\uff0c\u53e6\u4e00\u4e2a\u662f\u83b7\u53d6\u6570\u636e\u7684\u6b65\u9aa4\u3002<\/p>\n
\n
\u9996\u5148\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u6dfb\u52a0\u6570\u636e\u7684\u5de5\u4f5c\u3002
\n\u901a\u8fc7\u5b89\u88c5\u540e\u8ff0\u7684\u63d2\u4ef6\uff0c\u4f60\u5c31\u53ef\u4ee5\u81ea\u7531\u83b7\u53d6\u9879\u76ee\u5185\u7684\u4fe1\u606f\u3002<\/p>\n
\u5c06\u6570\u636e\u6dfb\u52a0\u5230GraphQL<\/p>\n
\u901a\u8fc7\u63d2\u4ef6\u6dfb\u52a0\u6570\u636e<\/h4>\n
\u5728\u6587\u4ef6\u4e2d\uff0c\u5c06\u6570\u636e\u6dfb\u52a0\u64cd\u4f5c\u63cf\u8ff0\u4e3a\u201c\u57fa\u4e8e\u63d2\u4ef6\u9a71\u52a8\u201d\uff0c\u5b9e\u9645\u4e0a\u53ea\u9700\u8981\u5b89\u88c5\u63d2\u4ef6\u5373\u53ef\u3002<\/p>\n
\u5bfb\u627e\u6570\u636e<\/p>\n
\u300a\u4e86\u4e0d\u8d77\u7684\u76d6\u8328\u6bd4\u300b\u6e90\u6587\u4ef6\u7cfb\u7edf<\/h5>\n
\u901a\u8fc7\u4f7f\u7528gatsby-source-filesystem\uff0c\u53ef\u4ee5\u4ece\u6e90\u4e2d\u83b7\u53d6\u6570\u636e\u3002<\/p>\n
npm install --save gatsby-source-filesystem\r\n<\/code><\/pre>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  siteMetadata<\/span>:<\/span> {<\/span>\r\n    title<\/span>:<\/span> `Pandas Eating Lots`<\/span>,<\/span>\r\n  },<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>\r\n    {<\/span>\r\n      resolve<\/span>:<\/span> `gatsby-source-filesystem`<\/span>,<\/span>\r\n      options<\/span>:<\/span> {<\/span>\r\n        name<\/span>:<\/span> `src`<\/span>,<\/span>\r\n        path<\/span>:<\/span> `<\/span>${<\/span>__dirname<\/span>}<\/span>\/src\/`<\/span>,<\/span>\r\n      },<\/span>\r\n    }<\/span>\r\n  ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6253\u5f00GraphiQL\u540e\uff0c\u5c06\u4f1a\u65b0\u589eallFile\u548cfile\u9009\u9879\uff0c\u5e76\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u67e5\u8be2\u83b7\u53d6\u6587\u4ef6\u4fe1\u606f\u3002<\/p>\n
  query<\/span> {<\/span>\r\n    allFile<\/span> {<\/span>\r\n      edges<\/span> {<\/span>\r\n        node<\/span> {<\/span>\r\n          relativePath<\/span>\r\n          prettySize<\/span>\r\n          extension<\/span>\r\n          birthTime<\/span>(<\/span>fromNow<\/span>:<\/span> true<\/span>)<\/span>\r\n        }<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
\u5728\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u83b7\u53d6\u5e76\u5c55\u793a\u4e86\u9879\u76ee\u7684JS\u6587\u4ef6\u3002<\/p>\n
gatsby-transformer-remark: \u8d3e\u6bd4\u8f6c\u6362\u5668<\/h5>\n
\u8fd9\u4e2a\u63d2\u4ef6\u4e0d\u4ec5\u4ec5\u662f\u7528\u6765\u6dfb\u52a0\u6570\u636e\u7684\uff0c\u6240\u4ee5\u7528\u8fd9\u79cd\u65b9\u5f0f\u5199\u53ef\u80fd\u6709\u70b9\u5fae\u5999\uff0c\u4f46\u8fd9\u4e2a\u63d2\u4ef6\u6700\u5bb9\u6613\u7406\u89e3\u7684\u529f\u80fd\u662f\u5c06Markdown\u8f6c\u6362\u4e3aHTML\u3002\u53ef\u4ee5\u5c06md\u6587\u4ef6\u7684\u4fe1\u606f\u8f6c\u6362\u5e76\u63d0\u53d6\u4e3ahtml\uff0c\u4e5f\u53ef\u4ee5\u63d0\u53d6frontmatter\u7b49\u5143\u4fe1\u606f\u3002<\/p>\n
\u6dfb\u52a0\u4e86allMarkdownRemark\u3002<\/p>\n
\u81ea\u5df1\u6dfb\u52a0\u6570\u636e<\/h4>\n
\u53ef\u4ee5\u4f7f\u7528createNodeAPI\u6765\u81ea\u5df1\u4f20\u8f93\u6570\u636e\u3002\u540e\u9762\u4f1a\u63d0\u53ca\uff0c\u63d2\u4ef6\u662f\u4f7f\u7528\u8fd9\u4e2aAPI\u6765\u4f20\u8f93\u6570\u636e\u7684\u3002<\/p>\n
\u5c1d\u8bd5\u624b\u52a8\u8f93\u5165\u6570\u636e<\/h5>\n
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
\nconst pokemons = [
\n{ name: “Pikachu”, type: “electric” },
\n{ name: “Squirtle”, type: “water” },
\n]
\npokemons.forEach(pokemon => {
\nconst node = {
\n\u540d\u79f0\uff1apokemon.name,
\n\u7c7b\u578b\uff1apokemon.type,
\n\u7f16\u53f7\uff1acreateNodeId(`Pokemon-${pokemon.name}`),
\n\u5185\u90e8\uff1a{
\n\u7c7b\u578b\uff1a”\u5ba0\u7269”,
\n\u5185\u5bb9\u6458\u8981\uff1acreateContentDigest(pokemon),
\n},
\n}
\nactions.createNode(node)
\n})
\n}<\/details>\n
\u901a\u8fc7\u4ee5\u4e0b\u67e5\u8be2\uff0c\u60a8\u5c06\u80fd\u591f\u83b7\u53d6 \u3002<\/p>\n
query<\/span> MyPokemonQuery<\/span> {<\/span>\r\n  allPokemon<\/span> {<\/span>\r\n    nodes<\/span> {<\/span>\r\n      name<\/span>\r\n      type<\/span>\r\n      id<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u53ef\u4ee5\u4f20\u9001\u5916\u90e8\u83b7\u53d6\u7684\u6570\u636e\u3002<\/p>\n
\u8bd5\u8bd5\u628a\u4ece API \u83b7\u53d6\u7684\u6570\u636e\u6d41\u8fc7\u53bb\u3002<\/h5>\n
\u5c1d\u8bd5\u901a\u8fc7Qiita\u7684API\u4f20\u9012\u6570\u636e\u8fd9\u4e9bAPI\u6211\u6ca1\u8be6\u7ec6\u68c0\u67e5\u8fc7\uff0c\u53ea\u662f\u7a0d\u4f5c\u4fee\u6539\uff0c<\/p>\n
const fetch = require(“node-fetch”)<\/p>\n
const fetchItems = () =>
\nfetch(“https:\/\/qiita.com\/api\/v2\/items”).then(res => res.json())<\/p>\n
exports.sourceNodes = async ({
\nactions,
\ncreateNodeId,
\ncreateContentDigest,
\n}) => {
\nconst items = await fetchItems()
\nitems.forEach(item => {
\nconst node = {
\nid: item.id,
\ntitle: item.title,
\nuser: {
\nname: item.user.name,
\n},
\ninternal: {
\ntype: “Item”,
\ncontentDigest: createContentDigest(item),
\n},
\n}
\nactions.createNode(node)
\n})
\n}<\/p>\n
\u67e5\u8be2ItemQuery {
\nallItem {
\nnodes {
\ntitle
\nuser {
\nname
\n}
\n}
\n}
\n}<\/p>\n
{
\n“data”: {
\n“allItem”: {
\n“nodes”: [
\n{
\n“title”: “\u5173\u4e8eblob\u548ccreateObjectURL\u7684\u95ee\u9898”,
\n“user”: {
\n“name”: “Yu Watanabe”
\n}
\n},
\n]
\n}
\n}
\n}<\/p>\n
\u901a\u8fc7\u4eceQiita\u7684API\u83b7\u53d6\u7684\u4fe1\u606f\u6d41\uff0c\u73b0\u5728\u53ef\u4ee5\u901a\u8fc7\u67e5\u8be2\u8fdb\u884c\u83b7\u53d6\u3002<\/p>\n<\/details>\n
\u6211\u8ba4\u4e3a\u60a8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528createNode\u51fd\u6570\u83b7\u53d6\u5e76\u5bfc\u5165\u4e86\u672c\u5730\u6587\u4ef6\u5217\u8868\uff0c\u5c31\u50cf\u4e4b\u524d\u63d0\u5230\u7684gatsby-source-filesystem\u6240\u505a\u7684\u4e00\u6837\u3002<\/p>\n
\u7531\u4e8e\u6709\u4e00\u4e2a\u63d2\u4ef6\uff0c\u5b83\u53ef\u4ee5\u5728\u4f20\u8f93\u6587\u4ef6\u4fe1\u606f\u6216\u4eceWordPress\u83b7\u53d6\u5e76\u4f20\u8f93\u6587\u7ae0\uff0c\u6240\u4ee5\u6211\u4eec\u53ea\u9700\u5c06\u8def\u5f84\u6216URL\u653e\u5165\u914d\u7f6e\u6587\u4ef6\u4e2d\uff0c\u5c31\u53ef\u4ee5\u901a\u8fc7\u67e5\u8be2\u6765\u83b7\u53d6\u6570\u636e\u3002<\/p>\n
Pixabay\u6e90\u63d2\u4ef6\u6559\u7a0b<\/p>\n
\u53ea\u9700\u8981\u5728\u9875\u9762\u4e0a\u663e\u793a\u901a\u8fc7\u67e5\u8be2\u83b7\u53d6\u7684\u7ed3\u679c\u5373\u53ef\u3002<\/p>\n
\u6dfb\u52a0\u8282\u70b9<\/h4>\n
\u4f60\u53ef\u4ee5\u5728\u8282\u70b9\u4e2d\u6dfb\u52a0\u5b57\u6bb5<\/p>\n
\u751f\u6210\u9875\u9762\u7684\u77ed\u6807\u8bc6\u7b26<\/p>\n
const<\/span> {<\/span> createFilePath<\/span> }<\/span> =<\/span> require<\/span>(<\/span>`gatsby-source-filesystem`<\/span>)<\/span>\r\n\r\nexports<\/span>.<\/span>onCreateNode<\/span> =<\/span> ({<\/span> node<\/span>,<\/span> getNode<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createNodeField<\/span> }<\/span> =<\/span> actions<\/span>\r\n  if<\/span> (<\/span>node<\/span>.<\/span>internal<\/span>.<\/span>type<\/span> ===<\/span> `MarkdownRemark`<\/span>)<\/span> {<\/span>\r\n    const<\/span> slug<\/span> =<\/span> createFilePath<\/span>({<\/span> node<\/span>,<\/span> getNode<\/span>,<\/span> basePath<\/span>:<\/span> `pages`<\/span> })<\/span>\r\n    createNodeField<\/span>({<\/span>\r\n      node<\/span>,<\/span>\r\n      name<\/span>:<\/span> `slug`<\/span>,<\/span>\r\n      value<\/span>:<\/span> slug<\/span>,<\/span>\r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5df2\u65b0\u589e\u4e86\u4e00\u4e2aslug\uff0c\u53ef\u4ee5\u83b7\u53d6\u5b83\u3002<\/p>\n
query  {\r\n  allMarkdownRemark {\r\n    edges {\r\n      node {\r\n        id\r\n        fields {\r\n          slug\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n
\u67e5\u8be2<\/h4>\n
\u6709\u4e9b\u4eba\u53ef\u80fd\u662f\u7b2c\u4e00\u6b21\u63a5\u89e6GraphQL\uff0c\u4f46\u5982\u679c\u53ea\u662f\u521b\u5efa\u7f51\u7ad9\uff0c\u6211\u8ba4\u4e3a\u53c2\u8003\u6587\u6863\u7684\u5185\u5bb9\u5c31\u8db3\u591f\u4e86\u3002\u800c\u4e14\u5728GraphQL\u4e2d\uff0c\u53ea\u9700\u968f\u610f\u70b9\u51fb\u5de6\u8fb9\u7684\u9009\u9879\u5c31\u4f1a\u81ea\u52a8\u5e2e\u4f60\u751f\u6210\u67e5\u8be2\uff0c\u6240\u4ee5\u6211\u8ba4\u4e3a\u6ca1\u6709\u4ec0\u4e48\u7279\u522b\u56f0\u6270\u7684\u4e8b\u60c5\u3002<\/p>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
\u522b\u540d<\/h5>\n
\u5728\u4e2d\u56fd\u7684\u672c\u5730\u5316\uff0c\u53ea\u9700\u8981\u4e00\u79cd\u9009\u62e9\uff1a
\nallMarkdownRemark\u7684\u7ed3\u679c\u662fdata.allMarkdownRemark\u672c\u8eab\uff0c\u4f46\u662f\u60a8\u53ef\u4ee5\u5728\u5f00\u5934\u52a0\u4e0a\u4efb\u610f\u7684alias\u3002
\n\u5b83\u5c06\u8fd4\u56de\u4e3adata.latestPost\uff0cdata.relatedPost\u8fd9\u6837\u7684\u5f62\u5f0f\u3002<\/p>\n
query {\r\n  latestPost: allMarkdownRemark(limit: 5) { }\r\n  relatedPost: allMarkdownRemark(limit: 5) { }\r\n}\r\n<\/code><\/pre>\n
\u524d\u8a00<\/h5>\n
\u5728Markdown\u6587\u4ef6\u7684\u5f00\u5934\uff0c\u5b9a\u4e49\u4fe1\u606f\u5982\u4e0b\u3002<\/p>\n
---<\/span>\r\ntitle<\/span>:<\/span> my first post<\/span>\r\ndate<\/span>:<\/span> 2019-12-7<\/span>\r\n---<\/span>\r\n<\/code><\/pre>\n
\u901a\u8fc7\u4f7f\u7528\u5148\u524d\u63d0\u5230\u7684gatsby-transformer-remark\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u67e5\u8be2\u6765\u83b7\u53d6\u6570\u636e\u3002<\/p>\n
frontmatter {\r\n  title:\r\n  date:\r\n}\r\n<\/code><\/pre>\n
\u53c2\u6570<\/h5>\n
\u4e3b\u8981\u662f\u5173\u4e8eMarkdown-Remark\u7684\u8ba8\u8bba\u3002<\/p>\n
    limit<\/ul>\n
     allMarkdownRemark(limit: 5) { }\r\n<\/code><\/pre>\n
      format<\/ul>\n
      date(formatString: \"YYYY\u6708MM\u6708DD\u65e5\")\r\n<\/code><\/pre>\n
        filter<\/ul>\n
        filter: { tags: { in: [\"post\", \"page\"] }, draft: { eq: false } }\r\n<\/code><\/pre>\n
        \u83b7\u53d6\u6700\u8fd1\u76845\u4e2a\u5e16\u5b50\u7684\u67e5\u8be2<\/h5>\n
        query {\r\n  allMarkdownRemark(\r\n    limit: 5,\r\n    sort: {order: DESC, fields: frontmatter___create_at}\r\n  ) {\r\n    edges {\r\n      node {\r\n        id\r\n        frontmatter {\r\n          title\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n
        \u52a8\u6001\u751f\u6210\u9875\u9762\u3002<\/h3>\n
        \u4ece\u9875\u9762\u4e2d\u83b7\u53d6\u6240\u9700\u7684\u6570\u636e<\/h4>\n
        \u6211\u4eec\u5c06\u5b9e\u9645\u4eceGraphQL\u4e2d\u83b7\u53d6\u6570\u636e\u5e76\u5728\u9875\u9762\u4e0a\u663e\u793a\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\n\r\nexport<\/span> const<\/span> query<\/span> =<\/span> graphql<\/span>`\r\n  query TitleQuery {\r\n    site {\r\n      siteMetadata {\r\n        title\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\nexport<\/span> default<\/span> ({<\/span> data<\/span> })<\/span> =><\/span> (<\/span>\r\n  <<\/span>div<\/span>><\/span>\r\n    <<\/span>h1<\/span>><\/span>{<\/span>data<\/span>.<\/span>site<\/span>.<\/span>siteMetadata<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/h1<\/span>>\r\n<\/span>  <<\/span>\/div<\/span>>\r\n<\/span>)<\/span>\r\n<\/code><\/pre>\n
        \u9875\u9762\u67e5\u8be2<\/p>\n
          \n
        • \n
            \uff11\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u304d\uff11\u3064\u306equery\u3092\u5ba3\u8a00\u3067\u304d\u308b\u3002\u3053\u306e\u6642\u5909\u6570\u306f\u95a2\u4fc2\u306a\u3044\u3002<\/ul>\n<\/li>\n<\/ul>\n
             <\/p>\n
              query\u306e\u7d50\u679c\u304cprops\u306edata\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5165\u3063\u3066\u304f\u308b\u3002<\/ul>\n
              \u5728\u6559\u7a0b\u4e2d\u6ca1\u6709\u5199\u660e\uff0c\u4f46\u4e0a\u8ff0\u89c4\u5219\u662f\u5b58\u5728\u7684\u3002<\/p>\n
              \u6211\u5c1d\u8bd5\u5728\u4e00\u4e2a\u6587\u4ef6\u4e2d\u58f0\u660e\u4e86\u4e24\u4e2a\u67e5\u8be2\uff0c\u7ed3\u679c\u88ab\u6012\u65a5\u4e86\u3002<\/p>\n
              export const query1 = graphql`\r\n  query HomePageQuery {\r\n    site {\r\n      siteMetadata {\r\n        description\r\n      }\r\n    }\r\n  }\r\n`\r\nexport const query2 = graphql`\r\n  query HomePageQuery {\r\n    site {\r\n      siteMetadata {\r\n        description\r\n      }\r\n    }\r\n  }\r\n`\r\n<\/code><\/pre>\n
              Multiple \"root\" queries found in file\r\n<\/code><\/pre>\n
              \u5f53\u521d\u770b\u5230\u8fd9\u4e2a\u65f6\uff0c\u4e3a\u4ec0\u4e48\u67e5\u8be2\u7684\u7ed3\u679c\u4f1a\u4f20\u9012\u5230props\u7684data\u91cc\u5462\uff1f\u4e00\u5f00\u59cb\u6211\u6709\u70b9\u56f0\u60d1\uff0c\u4e0d\u77e5\u9053\u4ec0\u4e48\u65f6\u5019\u6267\u884c\u67e5\u8be2\uff0c\u4f46\u73b0\u5728\u6211\u4f7f\u7528\u7684\u662f\u9759\u6001\u7f51\u7ad9\u751f\u6210\u5668\uff0c\u6839\u636e\u89c4\u8303\u6211\u5e94\u8be5\u5728\u6587\u4ef6\u4e2d\u5b9a\u4e49\u67e5\u8be2\uff0c\u7136\u540e\u5b83\u4f1a\u6839\u636e\u8fd9\u4e2a\u67e5\u8be2\u6765\u751f\u6210\u9875\u9762\uff0c\u6211\u5fd8\u8bb0\u4e86\u8fd9\u4e00\u70b9\u3002<\/p>\n
              https:\/\/www.gatsbyjs.org\/docs\/recipes\/#\u4f7f\u7528\u9875\u9762\u67e5\u8be2\u4ece\u6570\u636e\u4e2d\u67e5\u8be2\u6570\u636e
              \nhttps:\/\/www.gatsbyjs.org\/docs\/page-query\/#\u6dfb\u52a0GraphQL\u67e5\u8be2<\/p>\n
              \u52a8\u6001\u751f\u6210\u9875\u9762<\/h4>\n
              \u4f7f\u7528createPage API\u4ece\u6a21\u677f\u52a8\u6001\u751f\u6210\u9875\u9762\u3002<\/p>\n
              \u6211\u8ba4\u4e3a\u5728\u6559\u7a0b\u7684\u7b2c\u4e03\u90e8\u5206\u4f1a\u53d8\u6210\u8fd9\u6837\u7684\u611f\u89c9\u3002<\/p>\n
              const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>`path`<\/span>)<\/span>\r\n\r\nexports<\/span>.<\/span>createPages<\/span> =<\/span> async<\/span> ({<\/span> actions<\/span>,<\/span> graphql<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> result<\/span> =<\/span> await<\/span> graphql<\/span>(<\/span>`\r\n    {\r\n      allMarkdownRemark {\r\n        edges {\r\n          node {\r\n            frontmatter {\r\n              path\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `<\/span>)<\/span>\r\n\r\n  if<\/span> (<\/span>result<\/span>.<\/span>errors<\/span>)<\/span> {<\/span> console<\/span>.<\/span>error<\/span>(<\/span>result<\/span>.<\/span>errors<\/span>)<\/span> }<\/span>\r\n\r\n  result<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>.<\/span>forEach<\/span>(({<\/span> node<\/span> })<\/span> =><\/span> {<\/span>\r\n    actions<\/span>.<\/span>createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>path<\/span>,<\/span>\r\n      component<\/span>:<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>`src\/templates\/post.js`<\/span>),<\/span>\r\n    })<\/span>\r\n  })<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
              import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\n\r\nexport<\/span> const<\/span> pageQuery<\/span> =<\/span> graphql<\/span>`\r\n  query($path: String!) {\r\n    markdownRemark(frontmatter: { path: { eq: $path } }) {\r\n      html\r\n      frontmatter {\r\n        date(formatString: \"MMMM DD, YYYY\")\r\n        path\r\n        title\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n\r\nconst<\/span> Template<\/span> =<\/span> ({<\/span> data<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> markdownRemark<\/span> }<\/span> =<\/span> dat<\/span>\r\n  const<\/span> {<\/span> frontmatter<\/span>,<\/span> html<\/span> }<\/span> =<\/span> markdownRemark<\/span>\r\n  return<\/span> (<\/span>\r\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>blog-post<\/span>\"<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>{<\/span>frontmatter<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/h1<\/span>>\r\n<\/span>      <<\/span>h2<\/span>><\/span>{<\/span>frontmatter<\/span>.<\/span>date<\/span>}<\/span><<\/span>\/h2<\/span>>\r\n<\/span>      <<\/span>div<\/span>\r\n        className<\/span>=<\/span>\"<\/span>blog-post-content<\/span>\"<\/span>\r\n        dangerouslySetInnerHTML<\/span>=<\/span>{{<\/span> __html<\/span>:<\/span> html<\/span> }}<\/span>\r\n      \/<\/span>>\r\n<\/span>    <<\/span>\/div<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> Template<\/span>;<\/span>\r\n<\/code><\/pre>\n
              \u9996\u5148\uff0c\u6211\u4eec\u6765\u67e5\u770b\u6a21\u677f\u6587\u4ef6\u3002\u6a21\u677f\u6587\u4ef6\u4f1a\u4f7f\u7528path\u53c2\u6570\u6765\u5d4c\u5165\u67e5\u8be2\u7684\u7ed3\u679c\u3002<\/p>\n
              \u5728gatsby-node.js\u6587\u4ef6\u4e2d\uff0c\u6839\u636e\u6240\u6709md\u6587\u4ef6\u7684\u67e5\u8be2\u7ed3\u679c\u8c03\u7528createPage\u65b9\u6cd5\u3002
              \n\u8be5\u65b9\u6cd5\u6307\u5b9a\u4e86\u4e0a\u9762\u7684\u6a21\u677f\u6587\u4ef6\uff0c\u5e76\u52a8\u6001\u751f\u6210\u9875\u9762\u3002
              \n\u91cd\u8981\u4f46\u672a\u5728\u6559\u7a0b\u4e2d\u63d0\u5230\u7684\u4e00\u70b9\u662f\uff0c\u4e0a\u4e0b\u6587\u53c2\u6570\u53ef\u4ee5\u4f5c\u4e3a\u6a21\u677f\u7684props\u548c\u6a21\u677f\u6587\u4ef6\u67e5\u8be2\u7684\u53c2\u6570\u4f20\u9012\u3002<\/p>\n
              https:\/\/www.gatsbyjs.org\/docs\/recipes\/#\u901a\u8fc7GraphQL\u4e3a\u535a\u5ba2\u5e16\u5b50\u548c\u9875\u9762\u83b7\u53d6Markdown\u6570\u636e
              \nhttps:\/\/www.gatsbyjs.org\/docs\/using-gatsby-without-graphql\/<\/p>\n
              \u521b\u5efa\u9875\u9762<\/p>\n
              \u6240\u6709\u4e0a\u4e0b\u6587\u503c\u90fd\u53ef\u4ee5\u4f5c\u4e3a\u4ee5$\u4e3a\u524d\u7f00\u7684\u53c2\u6570\uff0c\u5728\u6a21\u677f\u7684GraphQL\u67e5\u8be2\u4e2d\u4f7f\u7528\u3002<\/p><\/blockquote>\n
              \u521b\u5efa\u9875\u9762<\/p>\n
              \u5c06\u8fd9\u4e9b\u4f5c\u4e3a\u5c5e\u6027\u4f20\u9012\u7ed9\u7ec4\u4ef6\u7684this.props.pageContext\uff0c\u540c\u65f6\u4e5f\u4f5c\u4e3agraphql\u53c2\u6570\u4f20\u9012\u7ed9graphql\u67e5\u8be2\u3002<\/p><\/blockquote>\n
              \u5bfb\u627e\u6765\u6e90\u82b1\u4e86\u6211\u4e00\u4e9b\u65f6\u95f4\u3002<\/p>\n
              \u6982\u5ff5\u6027\u7684<\/h2>\n
              \u5f00\u80c3\u83dc<\/h4>\n
                \n
              • \n
                  gatsby-starter-default<\/ul>\n<\/li>\n<\/ul>\n
                  gatsby-starter-blog<\/p>\n
                  gatsby-starter-hello-world<\/p>\n
                  \u5b9e\u9645\u4e0a\uff0c\u516c\u5f0f\u7684\u8d77\u59cb\u8005\u53ea\u6709\u524d\u9762\u63d0\u5230\u7684\u4e09\u4e2a\u3002<\/p>\n
                  Gatsby.js \u521d\u59cb\u6a21\u677f\u5217\u8868
                  \nhttps:\/\/www.gatsbyjs.org\/starters\/?v=2<\/p>\n
                  gatsby new gatsby-starter-hero-blog https:\/\/github.com\/greglobinski\/gatsby-starter-hero-blog\r\n<\/code><\/pre>\n
                  \u8fd9\u4ef6\u4e8b\u6709\u70b9\u7b28\u91cd\u3002<\/p>\n
                  \u63d2\u4ef6<\/h4>\n
                  npm install --save gatsby-transformer-json\r\n<\/code><\/pre>\n
                  module.exports = {\r\n  plugins: [`gatsby-transformer-json`],\r\n}\r\n<\/code><\/pre>\n
                  \u63d2\u4ef6\u53ef\u4ee5\u6307\u5b9a\u4efb\u610f\u7684\u9009\u9879\u3002<\/p>\n
                    plugins<\/span>:<\/span> [<\/span>\r\n    \/\/ Shortcut for adding plugins without options.<\/span>\r\n    \"<\/span>gatsby-plugin-react-helmet<\/span>\"<\/span>,<\/span>\r\n    {<\/span>\r\n      \/\/ Standard plugin with options example<\/span>\r\n      resolve<\/span>:<\/span> `gatsby-source-filesystem`<\/span>,<\/span>\r\n      options<\/span>:<\/span> {<\/span>\r\n        path<\/span>:<\/span> `<\/span>${<\/span>__dirname<\/span>}<\/span>\/src\/data\/`<\/span>,<\/span>\r\n        name<\/span>:<\/span> \"<\/span>data<\/span>\"<\/span>,<\/span>\r\n      },<\/span>\r\n    }<\/span>\r\n  ]<\/span>\r\n<\/code><\/pre>\n
                  \u4f7f\u7528StyledComponents\u548caxios\u7b49npx package\u9700\u8981<\/p>\n
                  \u4e5f\u53ef\u4ee5\u6307\u5b9a\u672c\u5730\u8def\u5f84\u6765\u5b89\u88c5\u63d2\u4ef6\u3002<\/p>\n
                  \u914d\u7f6e<\/h4>\n
                  gatsby-config.js -> Gatsby\u914d\u7f6e.js<\/h5>\n
                  \u76d6\u8328\u6bd4-Node.js<\/h5>\n
                  \u5728\u6784\u5efa\u65f6\u53ea\u88ab\u8c03\u7528\u4e00\u6b21\uff0c\u53ef\u4ee5\u52a8\u6001\u751f\u6210\u9875\u9762\u6216\u6dfb\u52a0GraphQL\u8282\u70b9\u3002<\/p>\n
                  \u5b9e\u8df5\u90e8\u5206<\/h2>\n
                  gatsby new blog https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world\r\n<\/code><\/pre>\n
                  \u4f7f\u7528styled-components<\/h4>\n
                  \u5b89\u88c5\u6a21\u5757\u548c\u63d2\u4ef6\u3002<\/p>\n
                  npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components\r\n<\/code><\/pre>\n
                  module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>`gatsby-plugin-styled-components`<\/span>],<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                  \u4f7f\u7528TypeScript<\/h4>\n
                  \u6211\u4e0d\u786e\u5b9a\u5b83\u662f\u5426\u4f1a\u6709\u591a\u5927\u53c2\u8003\u4ef7\u503c\uff0c\u4f46\u60a8\u9700\u8981\u5b89\u88c5\u63d2\u4ef6\u3002<\/p>\n
                  npm install gatsby-plugin-typescript\r\n<\/code><\/pre>\n
                  {<\/span>\r\n  \"include\"<\/span>:<\/span> [<\/span>\".\/src\/**\/*\"<\/span>],<\/span>\r\n  \"compilerOptions\"<\/span>:<\/span> {<\/span>\r\n    \"target\"<\/span>:<\/span> \"esnext\"<\/span>,<\/span>\r\n    \"module\"<\/span>:<\/span> \"commonjs\"<\/span>,<\/span>\r\n    \"lib\"<\/span>:<\/span> [<\/span>\"dom\"<\/span>,<\/span> \"es2017\"<\/span>],<\/span>\r\n    \"jsx\"<\/span>:<\/span> \"react\"<\/span>,<\/span>\r\n    \"strict\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"esModuleInterop\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"experimentalDecorators\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"emitDecoratorMetadata\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"noEmit\"<\/span>:<\/span> true<\/span>,<\/span>\r\n    \"skipLibCheck\"<\/span>:<\/span> true<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                  \u4f7f\u7528TypeScript\u7684\u4f18\u70b9\u6709\u591a\u5927\uff0c\u6839\u636e\u5b98\u65b9\u6b63\u5728\u52aa\u529b\u4f7f\u7528PropsTypes\u7684\u60c5\u51b5\u6765\u770b\uff0c\u6211\u8ba4\u4e3a\u52a0\u5165TypeScript\u662f\u53ef\u4ee5\u7684\u3002<\/p>\n
                  \u8bed\u6cd5\u9ad8\u4eae<\/h4>\n
                  \u53ea\u8981\u4f9d\u8d56\u4e8eGatsby\u7684\u63d2\u4ef6\uff0c\u5c31\u80fd\u8f7b\u677e\u5730\u5b89\u88c5\u63d2\u4ef6\u3002<\/p>\n
                  npm i -S gatsby-remark-prismjs\r\n<\/code><\/pre>\n
                  \u6211\u4f1a\u5c06\u5176\u6dfb\u52a0\u5230gatsby-transformer-remark\u63d2\u4ef6\u4e2d\u3002<\/p>\n
                  plugins<\/span>:<\/span> [<\/span>\r\n  {<\/span>\r\n    resolve<\/span>:<\/span> `gatsby-transformer-remark`<\/span>,<\/span>\r\n    options<\/span>:<\/span> {<\/span>\r\n      plugins<\/span>:<\/span> [<\/span>\r\n        `gatsby-remark-prismjs`<\/span>,<\/span>\r\n      ]<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\n
                  \u53ef\u4ee5\u83b7\u53d6\u5230\u5e26\u6709class\u7684HTML\u7684\u67e5\u8be2\uff0c\u7136\u540e\u60a8\u53ef\u4ee5\u81ea\u884c\u6307\u5b9a\u6837\u5f0f\uff0c\u6216\u8005\u53ea\u9700\u52a0\u8f7d\u9884\u8bbe\u7684\u4e3b\u9898\u5373\u53ef\u3002<\/p>\n
                  gatsby-browser.js\u7684\u610f\u601d\u662fgatsby\u6846\u67b6\u7684\u6d4f\u89c8\u5668\u7aef\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n
                  require<\/span>(<\/span>\"<\/span>prismjs\/themes\/prism-solarizedlight.css<\/span>\"<\/span>)<\/span>\r\n<\/code><\/pre>\n
                  \u628a\u6807\u7b7e\u8fdb\u884c\u5206\u7c7b\u5206\u914d<\/h4>\n
                  \u641c\u7d22\u5f15\u64ce\u4f18\u5316<\/h4>\n
                  \u6587\u6863\u4e2d\u5305\u542b\u4e86SEO\u7ec4\u4ef6\u3002<\/p>\n
                  \u90e8\u7f72\uff08GitHub\u9875\u9762\uff09<\/h4>\n
                  \u53ea\u9700\u5b89\u88c5\u63d2\u4ef6\u5e76\u8fdb\u884c\u63a8\u9001\u5373\u53ef\u3002<\/p>\n
                  \u63d2\u4ef6<\/h4>\n
                  \u5982\u679c\u4f7f\u7528\u7f16\u8f91\u5668\u7684\u63d2\u4ef6\uff0c\u53ef\u80fd\u4f1a\u5728graphql\u8f93\u5165\u4e2d\u5b9e\u73b0\u63d2\u503c\u529f\u80fd\u3002<\/p>\n
                  \u5bf9\u6b64\u7684\u60f3\u6cd5<\/h2>\n
                  \u56e0\u4e3a\u542c\u8bf4\u5f88\u7b80\u5355\uff0c\u6240\u4ee5\u6211\u4ee5\u4e3a\u53ef\u4ee5\u5728\u770bQiita\u7684\u6559\u7a0b\u7684\u540c\u65f6\u5927\u698230\u5206\u949f\u5c31\u53ef\u4ee5\u641e\u5b9a\uff0c\u4f46\u7ed3\u679c\u6211\u8fd8\u662f\u4e0d\u5f97\u4e0d\u9605\u8bfb\u5f88\u591a\u6587\u6863\uff0c\u82b1\u4e86\u76f8\u5f53\u957f\u7684\u65f6\u95f4\u3002
                  \n\u4ec5\u4ec5\u4f9d\u9760\u6559\u7a0b\u53ef\u80fd\u4f1a\u8ba9\u4f60\u4ea7\u751f\u201c\u4e3a\u4ec0\u4e48\u554a\uff1f\u201d\u7684\u7591\u95ee\uff0c\u6240\u4ee5\u5982\u679c\u6709\u4f59\u529b\u7684\u8bdd\uff0c\u6211\u5efa\u8bae\u4f60\u770b\u4e00\u4e0brecipes\u548ccontent-and-data\uff0c\u8fd9\u6837\u53ef\u4ee5\u52a0\u5feb\u7406\u89e3\u901f\u5ea6\u3002\u5982\u679c\u5bf9\u6309\u7167\u89c4\u8303\u5199\u4f5c\u6ca1\u6709\u56f0\u96be\u7684\u8bdd\uff0c\u6211\u8ba4\u4e3a\u8fd9\u76f8\u5f53\u7b80\u5355\u3002
                  \n\u867d\u7136\u6211\u8bf4\u4e86\u8fd9\u4e48\u591a\uff0c\u4f46\u6211\u8ba4\u4e3a\u4ece\u81ea\u5df1\u559c\u6b22\u7684\u8d77\u6b65\u9879\u76ee\u5f00\u59cb\uff0c\u7a0d\u4f5c\u6539\u52a8\u662f\u6700\u5212\u7b97\u7684\u9009\u62e9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
                  \u6211\u8bd5\u8fc7\u7528 Gatsby\uff0c\u4f46\u53ea\u7528\u6559\u7a0b\u53ea\u80fd\u89e3\u51b3\u4e00\u4e9b\u95ee\u9898\uff0c\u6700\u540e\u8fd8\u662f\u4e0d\u5f97\u4e0d\u9605\u8bfb\u5927\u91cf\u6587\u6863\u3002\u6574\u7406\u4e86\u6587\u6863\u94fe\u63a5\u540e\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u8fd8 […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48187","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\" \/>\n<meta property=\"og:description\" content=\"\u6211\u8bd5\u8fc7\u7528 Gatsby\uff0c\u4f46\u53ea\u7528\u6559\u7a0b\u53ea\u80fd\u89e3\u51b3\u4e00\u4e9b\u95ee\u9898\uff0c\u6700\u540e\u8fd8\u662f\u4e0d\u5f97\u4e0d\u9605\u8bfb\u5927\u91cf\u6587\u6863\u3002\u6574\u7406\u4e86\u6587\u6863\u94fe\u63a5\u540e\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u8fd8 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-27T06:58:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T10:00:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d83fc913a08637a6b4d02\/78-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u9896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u9896\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/\",\"name\":\"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-01-27T06:58:49+00:00\",\"dateModified\":\"2024-04-29T10:00:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\",\"name\":\"\u79d1, \u9896\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u9896\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b","og_description":"\u6211\u8bd5\u8fc7\u7528 Gatsby\uff0c\u4f46\u53ea\u7528\u6559\u7a0b\u53ea\u80fd\u89e3\u51b3\u4e00\u4e9b\u95ee\u9898\uff0c\u6700\u540e\u8fd8\u662f\u4e0d\u5f97\u4e0d\u9605\u8bfb\u5927\u91cf\u6587\u6863\u3002\u6574\u7406\u4e86\u6587\u6863\u94fe\u63a5\u540e\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u8fd8 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-01-27T06:58:49+00:00","article_modified_time":"2024-04-29T10:00:31+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d83fc913a08637a6b4d02\/78-0.png"}],"author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/","name":"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-01-27T06:58:49+00:00","dateModified":"2024-04-29T10:00:31+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5feb\u901f\u638c\u63e1\u300a\u4e86\u89e3\u4e86\u76d6\u8328\u6bd4\u300b\u7684\u6559\u7a0b"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e","name":"\u79d1, \u9896","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","caption":"\u79d1, \u9896"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%bf%ab%e9%80%9f%e6%8e%8c%e6%8f%a1%e3%80%8a%e4%ba%86%e8%a7%a3%e4%ba%86%e7%9b%96%e8%8c%a8%e6%af%94%e3%80%8b%e7%9a%84%e6%95%99%e7%a8%8b\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48187"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48187\/revisions"}],"predecessor-version":[{"id":86781,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48187\/revisions\/86781"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}