{post.frontmatter.date}
\n \n \n)\n\nexport default PostTemplate\n\n// You need to enable `gatsby-transformer-remark` to query `markdownRemark`.\n// If you don't use it, query `googleDocs`\n// If you use convertImgToNode then add googleDocImages query\nexport const pageQuery = graphql`\n query BlogPostBySlug($slug: String!) {\n post: markdownRemark(fields: {slug: {eq: $slug}}) {\n html\n frontmatter {\n name\n date(formatString: \"DD MMMM YYYY\", locale: \"fr\")\n }\n }\n googleDocImages: allFile(filter: {name: {glob: \"google-doc-image-**\"}}) {\n edges {\n node {\n id\n name\n childImageSharp {\n fluid {\n base64\n tracedSVG\n aspectRatio\n src\n srcSet\n srcWebp\n srcSetWebp\n sizes\n originalImg\n originalName\n presentationWidth\n presentationHeight\n }\n }\n }\n }\n }\n }\n`\n```\n### Create a page for each post\n\nUse the `createPages` API from gatsby in your `gatsby-node.js` to create a page for each post.\n\n```js\nconst path = require(\"path\")\n\n// You need to enable `gatsby-transformer-remark` to query `allMarkdownRemark`.\n// If you don't use it, query `allGoogleDocs`\nexports.createPages = async ({graphql, actions}) =>\n graphql(\n `\n {\n allMarkdownRemark(\n sort: {fields: [frontmatter___date], order: DESC}\n ) {\n edges {\n node {\n fields {\n slug\n }\n }\n }\n }\n }\n `\n ).then(result => {\n if (result.errors) {\n throw result.errors\n }\n result.data.allMarkdownRemark.edges.forEach((post, index) => {\n actions.createPage({\n path: post.node.fields.slug,\n component: path.resolve(`./src/templates/post.js`),\n context: {\n slug: post.node.fields.slug,\n },\n })\n })\n })\n```\n\n### Add extra data\n\nIf you need more data attached to your documents, fill the description field in `Google Drive` with a JSON object:\n\n```JSON\n{\n \"slug\": \"custom-url\",\n \"date\": \"2019-01-01\",\n \"author\": \"Yourself\",\n \"category\": \"yourCageory\",\n \"tags\": [\"tag1\", \"tag2\"]\n}\n```\n\nJSON will be transformed to YAML and added to your markdown frontmatter and ovveride the existing ones.\n\n> /!\\ Do not use `id`, `name`, `description` or any `Google Docs` field you add to the config `fields` option\n\n### If convertImgToNode is enabled. You will need to search the id in the HTML file and replace it with Gatsby image tag\n\n### Create a post template\n\nCreate a `src/templates/post.js` file where you will define your post template:\n\n```jsx\nimport React from \"react\";\nimport Img from 'gatsby-image';\nimport parse from 'html-react-parser';\n\nconst PostTemplate = ({data: {post, googleDocImages}}) => {\n //This is needed if convertImgToNode is enabled\n const options = {\n replace: (domNode) => {\n const {\n children,\n } = domNode;\n if (!children) return;\n const hasImgTag = children.find(img => img.name === 'img');\n if (hasImgTag) {\n const {\n attribs,\n } = hasImgTag;\n const {\n src,\n alt,\n } = attribs;\n return (\n{post.frontmatter.date}
\n