{"id":48251,"date":"2024-01-01T04:26:12","date_gmt":"2023-04-09T05:23:10","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/"},"modified":"2024-05-04T16:15:28","modified_gmt":"2024-05-04T08:15:28","slug":"%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/","title":{"rendered":"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60"},"content":{"rendered":"

\u56e0\u4e3aGatsbyjs\u7684\u6559\u7a0b\u975e\u5e38\u6613\u61c2\uff0c\u5bf9\u6211\u7684\u5b66\u4e60\u975e\u5e38\u6709\u5e2e\u52a9\uff0c
\n\u6240\u4ee5\u6211\u4e3a\u4e86\u4e0d\u5fd8\u8bb0\u6559\u7a0b\u5185\u5bb9\uff0c\u5c1d\u8bd5\u7740\u5236\u4f5c\u4e86\u4e00\u4e2a\u63a5\u8fd1WordPress\u9ed8\u8ba4\u6a21\u677f\u7684\u6837\u5f0f\u3002<\/p>\n

\u53e6\u5916\uff0c\u6211\u662fGatsbyjs\u548cWordPress\u7684\u521d\u5b66\u8005\uff0c\u8bf7\u591a\u6307\u6559\u3002<\/p>\n

\n

\u6211\u505a\u7684\u4e1c\u897f\u53ef\u4ee5\u5728GitHub Pages\u4e0a\u67e5\u770b\u2193<\/p>\n

\"Screen<\/div>\n
\n

\u6211\u7f16\u5199\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

\"undefined\"<\/div>\n

\u521b\u5efagatsby\u7684\u6a21\u677f<\/h1>\n
npx -p<\/span> gatsby-cli gatsby new myblog https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world\r\ncd <\/span>myblog\r\nyarn develop\r\n<\/code><\/pre>\n
\u5728\u672c\u5730\u4e3b\u673a\u76848000\u7aef\u53e3\u4e0a\u663e\u793a<\/p>\n
\"Screen<\/div>\n
1. \u8bbe\u5b9a\u6574\u4f53\u7684\u98ce\u683c<\/h1>\n
body<\/span> {<\/span>\r\n    font-family<\/span>:<\/span> Verdana<\/span>,<\/span> sans-serif<\/span>;<\/span>\r\n    margin<\/span>:<\/span> 0<\/span> auto<\/span>;<\/span>\r\n    width<\/span>:<\/span> 900px<\/span>;<\/span>\r\n}<\/span>\r\n\r\na<\/span> {<\/span>\r\n    text-decoration<\/span>:<\/span> none<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728gatsby-browser.js\u4e2d\u52a0\u8f7d<\/p>\n
import<\/span> \"<\/span>.\/src\/styles\/global.css<\/span>\"<\/span>\r\n<\/code><\/pre>\n
\u6bcf\u5f53\u66f4\u6539gatsby-browser.js\u7b49\u914d\u7f6e\u6587\u4ef6\u65f6\uff0c\u9700\u8981\u4f7f\u7528Ctrl+C\u5173\u95ed\u5f00\u53d1\u670d\u52a1\u5668\uff0c\u7136\u540e\u518d\u6b21\u4f7f\u7528yarn develop\u547d\u4ee4\u91cd\u65b0\u542f\u52a8\u624d\u80fd\u4f7f\u66f4\u6539\u751f\u6548\u3002<\/p>\n
\u521b\u5efa\u5e76\u5171\u4eab\u5934\u90e8\u3001\u5e95\u90e8\u548c\u4fa7\u8fb9\u680f\u3002<\/h1>\n
\u628a src\/index.js \u7684\u5185\u5bb9\u4fee\u6539\u4e3a\u4ee5\u4e0b\u6837\u5f0f\uff0c\u5e76\u66f4\u6539\u6587\u4ef6\u6269\u5c55\u540d\u4e3a jsx\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/components\/Layout<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ()<\/span> =><\/span> (<\/span>\r\n  <<\/span>Layout<\/span> page<\/span>=<\/span>{<\/span>\"<\/span>top<\/span>\"<\/span>}<\/span>><\/span>\r\n    <<\/span>div<\/span>><\/span>Hello world!<\/<\/span>div<\/span>><\/span>\r\n  <\/<\/span>Layout<\/span>><\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u4e3a\u4e86\u66f4\u5bb9\u6613\u7406\u89e3\uff0c\u53ef\u4ee5\u521b\u5efa\u53e6\u4e00\u4e2a\u9875\u9762\u6765\u7edf\u4e00\u5316\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/components\/Layout<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ()<\/span> =><\/span> (<\/span>\r\n  <<\/span>Layout<\/span>><\/span>\r\n    <<\/span>h1<\/span>><\/span>\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8<\/<\/span>h1<\/span>><\/span>\r\n    <<\/span>p<\/span>><\/span>\r\n      \u3053\u308c\u306f\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u3067\u3059\u3002\u540c\u3058\u4f4d\u7f6e\u306b\u56fa\u5b9a\u3055\u308c\u3001(\u591a\u304f\u306e\u30c6\u30fc\u30de\u3067\u306f)\r\n      \u30b5\u30a4\u30c8\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30e1\u30cb\u30e5\u30fc\u306b\u542b\u307e\u308c\u308b\u70b9\u304c\u30d6\u30ed\u30b0\u6295\u7a3f\u3068\u306f\u7570\u306a\u308a\u307e\u3059\u3002\u307e\u305a\u306f\u3001\u30b5\u30a4\u30c8\u8a2a\u554f\u8005\u306b\u5bfe\u3057\u3066\u81ea\u5206\u306e\u3053\u3068\u3092\u8aac\u660e\u3059\u308b\u81ea\u5df1\u7d39\u4ecb\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u3067\u3059\u3002\u305f\u3068\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002\r\n    <\/<\/span>p<\/span>><\/span>\r\n    <<\/span>blockquote<\/span> class<\/span>=<\/span>\"wp-block-quote\"<\/span>><\/span>\r\n      <<\/span>p<\/span>><\/span>\r\n        \u306f\u3058\u3081\u307e\u3057\u3066\u3002\u663c\u9593\u306f\u30d0\u30a4\u30af\u4fbf\u306e\u30e1\u30c3\u30bb\u30f3\u30b8\u30e3\u30fc\u3068\u3057\u3066\u50cd\u3044\u3066\u3044\u307e\u3059\u304c\u3001\u4ff3\u512a\u5fd7\u671b\u3067\u3082\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u50d5\u306e\u30b5\u30a4\u30c8\u3067\u3059\u3002\u30ed\u30b5\u30f3\u30bc\u30eb\u30b9\u306b\u4f4f\u307f\u3001\u30b8\u30e3\u30c3\u30af\u3068\u3044\u3046\u540d\u524d\u306e\u304b\u308f\u3044\u3044\u72ac\u3092\u98fc\u3063\u3066\u3044\u307e\u3059\u3002\u597d\u304d\u306a\u3082\u306e\u306f\u30d4\u30cb\u30e3\u30b3\u30e9\u30fc\u30c0\u3001\u305d\u3057\u3066\u901a\u308a\u96e8\u306b\u6fe1\u308c\u308b\u3053\u3068\u3002\r\n      <\/<\/span>p<\/span>><\/span>\r\n    <\/<\/span>blockquote<\/span>><\/span>\r\n  <\/<\/span>Layout<\/span>><\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u5728\u7f51\u7ad9\u4e0a\u8bbe\u7f6e\u5143\u6570\u636e\uff0c\u4ee5\u4fbf\u5728\u6807\u9898\u4e2d\u52a0\u8f7d\u3002<\/p>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  siteMetadata<\/span>:<\/span> {<\/span>\r\n    title<\/span>:<\/span> \"<\/span>\u30db\u30b2\u30db\u30b2\u30d6\u30ed\u30b0<\/span>\"<\/span>,<\/span>\r\n    description<\/span>:<\/span> \"<\/span>\u30db\u30b2\u30db\u30b2\u306b\u3088\u308b\u30d6\u30ed\u30b0\u3067\u3059<\/span>\"<\/span>,<\/span>\r\n  },<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u8f7d\u5165\u5305\u542b\u5168\u90e8\u96f6\u4ef6\u7684\u6587\u4ef6\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> Header<\/span> from<\/span> \"<\/span>.\/Header<\/span>\"<\/span>\r\nimport<\/span> Main<\/span> from<\/span> \"<\/span>.\/Main<\/span>\"<\/span>\r\nimport<\/span> Sidebar<\/span> from<\/span> \"<\/span>.\/Sidebar<\/span>\"<\/span>\r\nimport<\/span> Footer<\/span> from<\/span> \"<\/span>.\/Footer<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span> page<\/span> =<\/span> \"<\/span>default<\/span>\"<\/span>,<\/span> children<\/span> })<\/span> =><\/span> (<\/span>\r\n  <><\/span>\r\n    <<\/span>Header<\/span> page<\/span>=<\/span>{<\/span>page<\/span>}<\/span> \/><\/span>\r\n    <<\/span>Main<\/span> sidebar<\/span>=<\/span>{<\/span><<\/span>Sidebar<\/span> \/><\/span>}<\/span>><\/span>{<\/span>children<\/span>}<\/span><\/<\/span>Main<\/span>><\/span>\r\n    <<\/span>Footer<\/span> \/><\/span>\r\n  <\/><\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u4f7f\u7528GraphQL\u83b7\u53d6\u7f51\u7ad9\u5143\u6570\u636e\u7684\u6587\u4ef6\uff0c\u663e\u793a\u5934\u90e8\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> useStaticQuery<\/span>,<\/span> Link<\/span>,<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\nimport<\/span> styles<\/span> from<\/span> \"<\/span>..\/styles\/header.module.css<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span> page<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span>\r\n    site<\/span>:<\/span> {<\/span>\r\n      siteMetadata<\/span>:<\/span> {<\/span> title<\/span>,<\/span> description<\/span> },<\/span>\r\n    },<\/span>\r\n  }<\/span> =<\/span> useStaticQuery<\/span>(<\/span>\r\n    graphql<\/span>`\r\n      query {\r\n        site {\r\n          siteMetadata {\r\n            title\r\n            description\r\n          }\r\n        }\r\n      }\r\n    `<\/span>\r\n  )<\/span>\r\n\r\n  return<\/span> (<\/span>\r\n    <<\/span>header<\/span>><\/span>\r\n      {<\/span>page<\/span> ===<\/span> \"<\/span>top<\/span>\"<\/span> &&<\/span> <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>headerImg<\/span>}<\/span>><\/span>&nbsp;<\/span><\/<\/span>div<\/span>><\/span>}<\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>headerBox<\/span>}<\/span>><\/span>\r\n        <<\/span>h1<\/span>><\/span>\r\n          <<\/span>Link<\/span> to<\/span>=<\/span>\"\/\"<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>Link<\/span>><\/span>\r\n        <\/<\/span>h1<\/span>><\/span>\r\n        <<\/span>p<\/span>><\/span>{<\/span>description<\/span>}<\/span><\/<\/span>p<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    <\/<\/span>header<\/span>><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u663e\u793a\u4fa7\u8fb9\u680f\u548c\u4e3b\u8981\u5185\u5bb9\u7684\u6587\u4ef6<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> styles<\/span> from<\/span> \"<\/span>..\/styles\/main.module.css<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span> children<\/span>,<\/span> sidebar<\/span> })<\/span> =><\/span> (<\/span>\r\n  <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>flex<\/span>}<\/span>><\/span>\r\n    <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>mainLeft<\/span>}<\/span>><\/span>{<\/span>children<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n    <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>mainRight<\/span>}<\/span>><\/span>{<\/span>sidebar<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u7a0d\u540e\u8fdb\u884c\u4fa7\u8fb9\u680f\u663e\u793a\uff0c\u5305\u62ec\u201c\u6700\u8fd1\u7684\u6587\u7ae0\u201d\u548c\u201c\u5206\u7c7b\u201d\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> Link<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ()<\/span> =><\/span> {<\/span>\r\n  return<\/span> (<\/span>\r\n    <><\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u56fa\u5b9a\u30da\u30fc\u30b8<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/span>\r\n          <<\/span>li<\/span>><\/span>\r\n            <<\/span>Link<\/span> to<\/span>=<\/span>\"\/sample-page\/\"<\/span>><\/span>\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8<\/<\/span>Link<\/span>><\/span>\r\n          <\/<\/span>li<\/span>><\/span>\r\n        <\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u6700\u8fd1\u306e\u6295\u7a3f<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u30ab\u30c6\u30b4\u30ea\u30fc<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    <\/><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u663e\u793a\u9875\u811a\u7684\u6587\u4ef6<\/p>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> Link<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ()<\/span> =><\/span> (<\/span>\r\n  <><\/span>\r\n    <<\/span>hr<\/span> \/><\/span>\r\n    <<\/span>Link<\/span> to<\/span>=<\/span>\"https:\/\/www.gatsbyjs.org\/\"<\/span>><\/span>Powered by Gatsbyjs<\/<\/span>Link<\/span>><\/span>\r\n  <\/><\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
\u6211\u5df2\u7ecf\u5b8c\u6210\u4e86\u5171\u901a\u90e8\u5206\u7684\u521b\u5efa\u3002<\/p>\n
\"fcD99uOlTM.gif\"<\/div>\n
3. \u5728\u9996\u9875\u4e0a\u5c55\u793a\u535a\u5ba2\u5217\u8868<\/h1>\n
\u4f7f\u7528Markdown\u5728\u535a\u5ba2\u6587\u4ef6\u5939\u4e2d\u7f16\u5199\u5185\u5bb9\uff0c\u5e76\u5c06\u5176\u663e\u793a\u4e3a\u5217\u8868\u3002
\nMarkdown\u7684\u5185\u5bb9\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
---<\/span>\r\ntitle<\/span>:<\/span> Hello World<\/span>\r\ndate<\/span>:<\/span> \"<\/span>2017-08-21\"<\/span>\r\ncategories<\/span>:<\/span> []<\/span>\r\n---<\/span>\r\n\r\nHello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002\r\n\r\nHello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002\r\n\r\nHello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002Hello World\u3002\r\n<\/code><\/pre>\n
\n
\u5b89\u88c5\u53ef\u4ee5\u5c06\u672c\u5730\u6587\u4ef6\u6570\u636e\u4f20\u9012\u7ed9Gatsby\u7684\u63d2\u4ef6\u548c\u5904\u7406Markdown\u7684\u63d2\u4ef6\u3002<\/p>\n
yarn add gatsby-source-filesystem gatsby-transformer-remark\r\n<\/code><\/pre>\n
\u8bbe\u7f6e\u4f7f\u63d2\u4ef6\u53ef\u7528<\/p>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  siteMetadata<\/span>:<\/span> {<\/span>\r\n    title<\/span>:<\/span> \"<\/span>\u30db\u30b2\u30db\u30b2\u30d6\u30ed\u30b0<\/span>\"<\/span>,<\/span>\r\n    description<\/span>:<\/span> \"<\/span>\u30db\u30b2\u30db\u30b2\u306b\u3088\u308b\u30d6\u30ed\u30b0\u3067\u3059<\/span>\"<\/span>,<\/span>\r\n  },<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>\r\n    {<\/span>\r\n      resolve<\/span>:<\/span> \"<\/span>gatsby-source-filesystem<\/span>\"<\/span>,<\/span>\r\n      options<\/span>:<\/span> {<\/span>\r\n        path<\/span>:<\/span> `<\/span>${<\/span>__dirname<\/span>}<\/span>\/blog`<\/span>,<\/span>\r\n        name<\/span>:<\/span> \"<\/span>blog<\/span>\"<\/span>,<\/span>\r\n      },<\/span>\r\n    },<\/span>\r\n    \"<\/span>gatsby-transformer-remark<\/span>\"<\/span>,<\/span>\r\n  ],<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u521b\u5efagatsby-node.js\u6587\u4ef6\uff0c\u5e76\u4f7f\u7528createNodeField\u8bbe\u7f6eslug\u3002\u8fd9\u6837\uff0c\u5c31\u53ef\u4ee5\u4eceGraphQL\u83b7\u53d6\u5230slug\u3002<\/p>\n
const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>path<\/span>\"<\/span>)<\/span>\r\nconst<\/span> {<\/span> createFilePath<\/span> }<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>gatsby-source-filesystem<\/span>\"<\/span>)<\/span>\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> \"<\/span>MarkdownRemark<\/span>\"<\/span>)<\/span> {<\/span>\r\n    const<\/span> slug<\/span> =<\/span> createFilePath<\/span>({<\/span> node<\/span>,<\/span> getNode<\/span>,<\/span> basePath<\/span>:<\/span> \"<\/span>pages<\/span>\"<\/span> })<\/span>\r\n    createNodeField<\/span>({<\/span>\r\n      node<\/span>,<\/span>\r\n      name<\/span>:<\/span> \"<\/span>slug<\/span>\"<\/span>,<\/span>\r\n      value<\/span>:<\/span> slug<\/span>,<\/span>\r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u2191\u8be6\u7ec6\u7684\u8bf4\u660e\u5728\u6559\u7a0b\u7684\u7b2c6\u90e8\u5206\u548c\u7b2c7\u90e8\u5206\u9644\u8fd1\u3002<\/p>\n
    \n
  • \n
      https:\/\/www.gatsbyjs.org\/tutorial\/part-six\/<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        https:\/\/www.gatsbyjs.org\/tutorial\/part-seven\/<\/ul>\n
        \n
        \u6211\u4f7f\u7528 GraphQL \u6309\u65e5\u671f\u8fdb\u884c\u6392\u5e8f\u5e76\u68c0\u7d22\u6240\u9700\u6570\u636e\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> Link<\/span>,<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/components\/Layout<\/span>\"<\/span>\r\nimport<\/span> styles<\/span> from<\/span> \"<\/span>..\/styles\/index.module.css<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span>\r\n  data<\/span>:<\/span> {<\/span>\r\n    allMarkdownRemark<\/span>:<\/span> {<\/span> totalCount<\/span>,<\/span> edges<\/span>:<\/span> blogs<\/span> },<\/span>\r\n  },<\/span>\r\n})<\/span> =><\/span> (<\/span>\r\n  <<\/span>Layout<\/span> page<\/span>=<\/span>{<\/span>\"<\/span>top<\/span>\"<\/span>}<\/span>><\/span>\r\n    <<\/span>strong<\/span>><\/span>\u6295\u7a3f ( {<\/span>totalCount<\/span>}<\/span> ) <\/<\/span>strong<\/span>><\/span>\r\n    {<\/span>blogs<\/span>.<\/span>map<\/span>(<\/span>\r\n      ({<\/span>\r\n        node<\/span>:<\/span> {<\/span>\r\n          id<\/span>,<\/span>\r\n          frontmatter<\/span>:<\/span> {<\/span> title<\/span>,<\/span> date<\/span> },<\/span>\r\n          fields<\/span>:<\/span> {<\/span> slug<\/span> },<\/span>\r\n          excerpt<\/span>,<\/span>\r\n        },<\/span>\r\n      })<\/span> =><\/span> (<\/span>\r\n        <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>id<\/span>}<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>box<\/span>}<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>date<\/span>}<\/span>><\/span>{<\/span>date<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n          <<\/span>h2<\/span> className<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>title<\/span>}<\/span>><\/span>\r\n            <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>slug<\/span>}<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>Link<\/span>><\/span>\r\n          <\/<\/span>h2<\/span>><\/span>\r\n          <<\/span>p<\/span>><\/span>{<\/span>excerpt<\/span>}<\/span><\/<\/span>p<\/span>><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n      )<\/span>\r\n    )<\/span>}<\/span>\r\n  <\/<\/span>Layout<\/span>><\/span>\r\n)<\/span>\r\n\r\nexport<\/span> const<\/span> query<\/span> =<\/span> graphql<\/span>`\r\n  query {\r\n    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {\r\n      totalCount\r\n      edges {\r\n        node {\r\n          id\r\n          frontmatter {\r\n            title\r\n            date(formatString: \"YYYY\u5e74MM\u6708DD\u65e5\")\r\n          }\r\n          fields {\r\n            slug\r\n          }\r\n          excerpt\r\n        }\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
        \u76ee\u524d\u53ef\u4ee5\u5728\u9996\u9875\u4e0a\u663e\u793a\u535a\u5ba2\u5217\u8868\uff0c\u4f46\u7531\u4e8e\u8fd8\u6ca1\u521b\u5efa\u8be6\u7ec6\u5c55\u793a\u9875\u9762\uff0c\u6240\u4ee5\u8bbf\u95ee\u65f6\u4f1a\u663e\u793a404\u9519\u8bef\u3002<\/p>\n
        \"wcBbnWmC0G.gif\"<\/div>\n
        \u521b\u5efa\u535a\u5ba2\u8be6\u7ec6\u9875\u9762<\/h1>\n
        \u6211\u4f1a\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u663e\u793a\u535a\u5ba2\u9875\u9762\u7684\u6a21\u677f\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\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/components\/layout<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span>\r\n  data<\/span>:<\/span> {<\/span>\r\n    markdownRemark<\/span>:<\/span> {<\/span>\r\n      html<\/span>,<\/span>\r\n      frontmatter<\/span>:<\/span> {<\/span> title<\/span>,<\/span> categories<\/span> },<\/span>\r\n    },<\/span>\r\n  },<\/span>\r\n})<\/span> =><\/span> {<\/span>\r\n  return<\/span> (<\/span>\r\n    <<\/span>Layout<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>h1<\/span>><\/span>\r\n      <><\/span>\r\n        <<\/span>strong<\/span>><\/span>\u30ab\u30c6\u30b4\u30ea\u30fc : <\/<\/span>strong<\/span>><\/span>\r\n        {<\/span>categories<\/span>.<\/span>length<\/span> ?<\/span> categories<\/span>.<\/span>join<\/span>(<\/span>\"<\/span>, <\/span>\"<\/span>)<\/span> :<\/span> \"<\/span>\u306a\u3057<\/span>\"<\/span>}<\/span>\r\n      <\/><\/span>\r\n      <<\/span>div<\/span> dangerouslySetInnerHTML<\/span>=<\/span>{<\/span>{<\/span> __html<\/span>:<\/span> html<\/span> }<\/span>}<\/span> \/><\/span>\r\n    <\/<\/span>Layout<\/span>><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> const<\/span> query<\/span> =<\/span> graphql<\/span>`\r\n  query($slug: String!) {\r\n    markdownRemark(fields: { slug: { eq: $slug } }) {\r\n      html\r\n      frontmatter {\r\n        title\r\n        categories\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
        \u4fee\u6539gatsby-node.js\u6587\u4ef6\uff0c\u4ee5\u4fbf\u521b\u5efa\u535a\u5ba2\u9875\u9762\u3002<\/p>\n
        const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>path<\/span>\"<\/span>)<\/span>\r\nconst<\/span> {<\/span> createFilePath<\/span> }<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>gatsby-source-filesystem<\/span>\"<\/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> \"<\/span>MarkdownRemark<\/span>\"<\/span>)<\/span> {<\/span>\r\n    const<\/span> slug<\/span> =<\/span> createFilePath<\/span>({<\/span> node<\/span>,<\/span> getNode<\/span>,<\/span> basePath<\/span>:<\/span> \"<\/span>pages<\/span>\"<\/span> })<\/span>\r\n    createNodeField<\/span>({<\/span>\r\n      node<\/span>,<\/span>\r\n      name<\/span>:<\/span> \"<\/span>slug<\/span>\"<\/span>,<\/span>\r\n      value<\/span>:<\/span> slug<\/span>,<\/span>\r\n    })<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexports<\/span>.<\/span>createPages<\/span> =<\/span> async<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createPage<\/span> }<\/span> =<\/span> actions<\/span>\r\n  const<\/span> result<\/span> =<\/span> await<\/span> graphql<\/span>(<\/span>`\r\n    query {\r\n      allMarkdownRemark {\r\n        edges {\r\n          node {\r\n            fields {\r\n              slug\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `<\/span>)<\/span>\r\n  result<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>.<\/span>forEach<\/span>(({<\/span> node<\/span> })<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n      component<\/span>:<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>.\/src\/templates\/blog-post.jsx<\/span>\"<\/span>),<\/span>\r\n      context<\/span>:<\/span> {<\/span>\r\n        \/\/ GraphQL\u306e\u30af\u30a8\u30ea\u306e $slug \u5909\u6570\u306b\u8a2d\u5b9a\u3059\u308b\u5024<\/span>\r\n        slug<\/span>:<\/span> node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n      },<\/span>\r\n    })<\/span>\r\n  })<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u6211\u5df2\u7ecf\u786e\u8ba4\u4e86\u535a\u5ba2\u9875\u9762\u3002<\/p>\n
        \"Screen<\/div>\n
        5. \u521b\u5efa\u6309\u7c7b\u522b\u5206\u7c7b\u7684\u5217\u8868\u9875\u9762<\/h1>\n
        \u53c2\u8003\u94fe\u63a5\uff1ahttps:\/\/www.gatsbyjs.org\/docs\/adding-tags-and-categories-to-blog-posts\/<\/p>\n
        \u5728\u535a\u5ba2\u6587\u7ae0\u4e2d\u6dfb\u52a0\u6807\u7b7e\u548c\u5206\u7c7b\u7684\u65b9\u6cd5\u53ef\u4ee5\u53c2\u8003\u4e0a\u8ff0\u94fe\u63a5\u3002<\/p>\n
        \u6211\u5c06\u521b\u5efa\u4e00\u4e2a\u4e0e\u4e4b\u524d\u76f8\u540c\u7684\u6a21\u677f\u3002<\/p>\n
        import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> Link<\/span>,<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/components\/layout<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ({<\/span>\r\n  data<\/span>:<\/span> {<\/span>\r\n    allMarkdownRemark<\/span>:<\/span> {<\/span> totalCount<\/span>,<\/span> edges<\/span>:<\/span> blogs<\/span> },<\/span>\r\n  },<\/span>\r\n})<\/span> =><\/span> {<\/span>\r\n  return<\/span> (<\/span>\r\n    <<\/span>Layout<\/span>><\/span>\r\n      {<\/span>blogs<\/span>.<\/span>map<\/span>(<\/span>\r\n        ({<\/span>\r\n          node<\/span>:<\/span> {<\/span>\r\n            id<\/span>,<\/span>\r\n            html<\/span>,<\/span>\r\n            frontmatter<\/span>:<\/span> {<\/span> title<\/span> },<\/span>\r\n            fields<\/span>:<\/span> {<\/span> slug<\/span> },<\/span>\r\n          },<\/span>\r\n        })<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>id<\/span>}<\/span>><\/span>\r\n            <<\/span>h2<\/span>><\/span>\r\n              <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>slug<\/span>}<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>Link<\/span>><\/span>\r\n            <\/<\/span>h2<\/span>><\/span>\r\n            <<\/span>div<\/span> dangerouslySetInnerHTML<\/span>=<\/span>{<\/span>{<\/span> __html<\/span>:<\/span> html<\/span> }<\/span>}<\/span> \/><\/span>\r\n            <<\/span>hr<\/span> \/><\/span>\r\n          <\/<\/span>div<\/span>><\/span>\r\n        )<\/span>\r\n      )<\/span>}<\/span>\r\n    <\/<\/span>Layout<\/span>><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> const<\/span> pageQuery<\/span> =<\/span> graphql<\/span>`\r\n  query($category: String!) {\r\n    allMarkdownRemark(\r\n      sort: { fields: [frontmatter___date], order: DESC }\r\n      filter: { frontmatter: { categories: { in: [$category] } } }\r\n    ) {\r\n      totalCount\r\n      edges {\r\n        node {\r\n          id\r\n          html\r\n          frontmatter {\r\n            title\r\n          }\r\n          fields {\r\n            slug\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
        \u548c\u521b\u5efa\u535a\u5ba2\u8be6\u7ec6\u9875\u9762\u65f6\u4e00\u6837\uff0c\u6211\u4eec\u5728gatsby-node.js\u4e2d\u4e5f\u8981\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\u3002<\/p>\n
          const path = require(\"path\")\r\n  const { createFilePath } = require(\"gatsby-source-filesystem\")\r\n  exports.onCreateNode = ({ node, getNode, actions }) => {\r\n    const { createNodeField } = actions\r\n    if (node.internal.type === \"MarkdownRemark\") {\r\n      const slug = createFilePath({ node, getNode, basePath: \"pages\" })\r\n      createNodeField({\r\n        node,\r\n        name: \"slug\",\r\n        value: slug,\r\n      })\r\n    }\r\n  }\r\n\r\n  exports.createPages = async ({ graphql, actions }) => {\r\n    const { createPage } = actions\r\n    const result = await graphql(`\r\n      query {\r\n        allMarkdownRemark {\r\n          edges {\r\n            node {\r\n              fields {\r\n                slug\r\n              }\r\n            }\r\n          }\r\n        }\r\n+       categoriesAllMarkdownRemark: allMarkdownRemark {\r\n+         group(field: frontmatter___categories) {\r\n+           category: fieldValue\r\n+         }\r\n+       }\r\n<\/span>      }\r\n    `)\r\n    result.data.allMarkdownRemark.edges.forEach(({ node }) => {\r\n      createPage({\r\n        path: node.fields.slug,\r\n        component: path.resolve(\".\/src\/templates\/blog-post.jsx\"),\r\n        context: {\r\n          \/\/ GraphQL\u306e\u30af\u30a8\u30ea\u306e $slug \u5909\u6570\u306b\u8a2d\u5b9a\u3059\u308b\u5024\r\n          slug: node.fields.slug,\r\n        },\r\n      })\r\n    })\r\n+   result.data.categoriesAllMarkdownRemark.group.forEach(({ category }) => {\r\n+     createPage({\r\n+       path: `\/category\/${category}\/`,\r\n+       component: path.resolve(\".\/src\/templates\/categories.jsx\"),\r\n+       context: {\r\n+         \/\/ GraphQL\u306e\u30af\u30a8\u30ea\u306e $category \u5909\u6570\u306b\u8a2d\u5b9a\u3059\u308b\u5024\r\n+         category,\r\n+       },\r\n+     })\r\n+   })\r\n<\/span>  }\r\n<\/code><\/pre>\n
        \u76ee\u524d\u5728\u9875\u9762\u5185\u8fd8\u6ca1\u6709\u94fe\u63a5\uff0c\u4f46\u662f\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728\u7f51\u5740\u680f\u8f93\u5165http:\/\/localhost:8000\/category\/\u30d6\u30ed\u30b0\/\uff0c\u8fd9\u6837\u53ef\u4ee5\u53ea\u663e\u793a\u4e0e\u8be5\u5206\u7c7b\u76f8\u5173\u7684\u6587\u7ae0\u3002<\/p>\n
        \"Screen<\/div>\n
        \u83b7\u53d6\u5e76\u663e\u793a\u4fa7\u8fb9\u680f\u7684\u4fe1\u606f\u3002<\/h1>\n
        \u5c06 Sidebar.jsx \u66f4\u6539\u4e3a\u4ece GraphQL \u4e2d\u83b7\u53d6\u6570\u636e<\/p>\n
        import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>\r\nimport<\/span> {<\/span> useStaticQuery<\/span>,<\/span> Link<\/span>,<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>\r\n\r\nexport<\/span> default<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span>\r\n    recentlyAllMarkdownRemark<\/span>:<\/span> {<\/span> edges<\/span>:<\/span> recentlyBlogs<\/span> },<\/span>\r\n    categoriesAllMarkdownRemark<\/span>:<\/span> {<\/span> group<\/span>:<\/span> categories<\/span> },<\/span>\r\n  }<\/span> =<\/span> useStaticQuery<\/span>(<\/span>\r\n    graphql<\/span>`\r\n      query {\r\n        recentlyAllMarkdownRemark: allMarkdownRemark(\r\n          sort: { fields: [frontmatter___date], order: DESC }\r\n          limit: 5\r\n        ) {\r\n          edges {\r\n            node {\r\n              id\r\n              frontmatter {\r\n                title\r\n              }\r\n              fields {\r\n                slug\r\n              }\r\n            }\r\n          }\r\n        }\r\n        categoriesAllMarkdownRemark: allMarkdownRemark {\r\n          group(field: frontmatter___categories) {\r\n            category: fieldValue\r\n            totalCount\r\n          }\r\n        }\r\n      }\r\n    `<\/span>\r\n  )<\/span>\r\n\r\n  return<\/span> (<\/span>\r\n    <><\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u56fa\u5b9a\u30da\u30fc\u30b8<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/span>\r\n          <<\/span>li<\/span>><\/span>\r\n            <<\/span>Link<\/span> to<\/span>=<\/span>\"\/sample-page\/\"<\/span>><\/span>\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8<\/<\/span>Link<\/span>><\/span>\r\n          <\/<\/span>li<\/span>><\/span>\r\n        <\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u6700\u8fd1\u306e\u6295\u7a3f<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/span>\r\n          {<\/span>recentlyBlogs<\/span>.<\/span>map<\/span>(<\/span>\r\n            ({<\/span>\r\n              node<\/span>:<\/span> {<\/span>\r\n                id<\/span>,<\/span>\r\n                frontmatter<\/span>:<\/span> {<\/span> title<\/span> },<\/span>\r\n                fields<\/span>:<\/span> {<\/span> slug<\/span> },<\/span>\r\n              },<\/span>\r\n            })<\/span> =><\/span> (<\/span>\r\n              <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>id<\/span>}<\/span>><\/span>\r\n                <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>slug<\/span>}<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>Link<\/span>><\/span>\r\n              <\/<\/span>li<\/span>><\/span>\r\n            )<\/span>\r\n          )<\/span>}<\/span>\r\n        <\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n\r\n      <<\/span>div<\/span>><\/span>\r\n        <<\/span>h3<\/span>><\/span>\u30ab\u30c6\u30b4\u30ea\u30fc<\/<\/span>h3<\/span>><\/span>\r\n        <<\/span>ul<\/span>><\/span>\r\n          {<\/span>categories<\/span>.<\/span>map<\/span>(({<\/span> category<\/span>,<\/span> totalCount<\/span> })<\/span> =><\/span> (<\/span>\r\n            <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>category<\/span>}<\/span>><\/span>\r\n              <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>`category\/<\/span>${<\/span>category<\/span>}<\/span>`<\/span>}<\/span>><\/span>{<\/span>category<\/span>}<\/span><\/<\/span>Link<\/span>><\/span> ( {<\/span>totalCount<\/span>}{<\/span>\"<\/span> \"<\/span>}<\/span>\r\n              )\r\n            <\/<\/span>li<\/span>><\/span>\r\n          ))<\/span>}<\/span>\r\n        <\/<\/span>ul<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    <\/><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
        \u80fd\u591f\u663e\u793a\u4fa7\u8fb9\u680f<\/p>\n
        \"Screen<\/div>\n
        7. \u7f51\u7ad9\u5143\u6570\u636e<\/h1>\n
        \u53c2\u8003\u94fe\u63a5\uff1aGatsby\u6559\u7a0b\u7684\u7b2c\u516b\u90e8\u5206\u3002<\/p>\n
        \u6211\u4f1a\u8bbe\u7f6e\u7f51\u7ad9\u7684meta\u6807\u7b7e\u3001\u6807\u9898\u548c\u63cf\u8ff0\u3002<\/p>\n
        \u56e0\u4e3a\u8981\u4f7f\u7528 react-helmet\uff0c\u6240\u4ee5\u9700\u8981\u5b89\u88c5\u3002<\/p>\n
        yarn add gatsby-plugin-react-helmet react-helmet\r\n<\/code><\/pre>\n
          module.exports = {\r\n    siteMetadata: {\r\n      title: \"\u30db\u30b2\u30db\u30b2\u30d6\u30ed\u30b0\",\r\n      description: \"\u30db\u30b2\u30db\u30b2\u306b\u3088\u308b\u30d6\u30ed\u30b0\u3067\u3059\",\r\n    },\r\n    plugins: [\r\n      {\r\n        resolve: \"gatsby-source-filesystem\",\r\n        options: {\r\n          path: `${__dirname}\/blog`,\r\n          name: \"blog\",\r\n        },\r\n      },\r\n      \"gatsby-transformer-remark\",\r\n+     \"gatsby-plugin-react-helmet\",\r\n<\/span>    ],\r\n  }\r\n<\/code><\/pre>\n
          import React from \"react\"\r\n+ import Helmet from \"react-helmet\"\r\n<\/span>  import { useStaticQuery, Link, graphql } from \"gatsby\"\r\n  import styles from \"..\/styles\/header.module.css\"\r\n\r\n  export default ({ page }) => {\r\n    const {\r\n      site: {\r\n        siteMetadata: { title, description },\r\n      },\r\n    } = useStaticQuery(\r\n      graphql`\r\n        query {\r\n          site {\r\n            siteMetadata {\r\n              title\r\n              description\r\n            }\r\n          }\r\n        }\r\n      `\r\n    )\r\n\r\n    return (\r\n+     <>\r\n+       <Helmet\r\n+         htmlAttributes={{ lang: \"ja\" }}\r\n+         title={title}\r\n+         meta={[\r\n+           {\r\n+             name: \"description\",\r\n+             content: description,\r\n+           },\r\n+         ]}\r\n+       \/>\r\n<\/span>        <header>\r\n          {page === \"top\" && <div className={styles.headerImg}>&nbsp;<\/div>}\r\n          <div className={styles.headerBox}>\r\n            <h1>\r\n              <Link to=\"\/\">{title}<\/Link>\r\n            <\/h1>\r\n            <p>{description}<\/p>\r\n          <\/div>\r\n        <\/header>\r\n+     <\/>\r\n<\/span>    )\r\n  }\r\n<\/code><\/pre>\n
        \u6807\u9898\u6807\u7b7e\u548cmeta\u6807\u7b7e\u53ef\u4ee5\u8fdb\u884c\u8bbe\u7f6e\u3002<\/p>\n
        \"Screen<\/div>\n
        \n
        \u975e\u5e38\u611f\u8c22\u60a8\u4e00\u76f4\u9605\u8bfb\u81f3\u6700\u540e\u3002m(_ _)m<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u56e0\u4e3aGatsbyjs\u7684\u6559\u7a0b\u975e\u5e38\u6613\u61c2\uff0c\u5bf9\u6211\u7684\u5b66\u4e60\u975e\u5e38\u6709\u5e2e\u52a9\uff0c \u6240\u4ee5\u6211\u4e3a\u4e86\u4e0d\u5fd8\u8bb0\u6559\u7a0b\u5185\u5bb9\uff0c\u5c1d\u8bd5\u7740\u5236\u4f5c\u4e86\u4e00\u4e2a\u63a5\u8fd1Wo […]<\/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-48251","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60 - 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\/\u6211\u7528gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cwordpress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60\" \/>\n<meta property=\"og:description\" content=\"\u56e0\u4e3aGatsbyjs\u7684\u6559\u7a0b\u975e\u5e38\u6613\u61c2\uff0c\u5bf9\u6211\u7684\u5b66\u4e60\u975e\u5e38\u6709\u5e2e\u52a9\uff0c \u6240\u4ee5\u6211\u4e3a\u4e86\u4e0d\u5fd8\u8bb0\u6559\u7a0b\u5185\u5bb9\uff0c\u5c1d\u8bd5\u7740\u5236\u4f5c\u4e86\u4e00\u4e2a\u63a5\u8fd1Wo […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cwordpress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-09T05:23:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T08:15:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8390913a08637a6b3b49\/5-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=\"7 \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\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/\",\"name\":\"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-04-09T05:23:10+00:00\",\"dateModified\":\"2024-05-04T08:15:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60\"}]},{\"@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\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60 - 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\/\u6211\u7528gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cwordpress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60","og_description":"\u56e0\u4e3aGatsbyjs\u7684\u6559\u7a0b\u975e\u5e38\u6613\u61c2\uff0c\u5bf9\u6211\u7684\u5b66\u4e60\u975e\u5e38\u6709\u5e2e\u52a9\uff0c \u6240\u4ee5\u6211\u4e3a\u4e86\u4e0d\u5fd8\u8bb0\u6559\u7a0b\u5185\u5bb9\uff0c\u5c1d\u8bd5\u7740\u5236\u4f5c\u4e86\u4e00\u4e2a\u63a5\u8fd1Wo […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cwordpress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-04-09T05:23:10+00:00","article_modified_time":"2024-05-04T08:15:28+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8390913a08637a6b3b49\/5-0.png"}],"author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/","name":"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-04-09T05:23:10+00:00","dateModified":"2024-05-04T08:15:28+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u7528Gatsbyjs\u5236\u4f5c\u4e86\u4e00\u4e2a\u7c7b\u4f3cWordPress\u98ce\u683c\u7684\u7b80\u6613\u535a\u5ba2\uff0c\u5e76\u8fdb\u884c\u4e86\u5b66\u4e60"}]},{"@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\/%e6%88%91%e7%94%a8gatsbyjs%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e7%b1%bb%e4%bc%bcwordpress%e9%a3%8e%e6%a0%bc%e7%9a%84%e7%ae%80%e6%98%93%e5%8d%9a%e5%ae%a2%ef%bc%8c%e5%b9%b6%e8%bf%9b%e8%a1%8c\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48251","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=48251"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48251\/revisions"}],"predecessor-version":[{"id":99361,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48251\/revisions\/99361"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}