{"componentChunkName":"component---node-modules-narative-gatsby-theme-novela-src-templates-articles-template-tsx","path":"/","result":{"pageContext":{"authors":[{"authorsPage":true,"bio":"Coding.net 产品设计师，专注工具领域创新。\n","id":"d936f7c4-1b9c-5a3c-ae74-c1ee8bf0fba3","name":"Tank Xu","featured":true,"social":[{"url":"https://instagram.com/tankxu"},{"url":"https://github.com/tankxu"}],"slug":"/authors/Tank-Xu","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/afb2b/tank.jpg 13w,\n/static/4d172498d4a28786ec269bc3943aea19/7c20e/tank.jpg 25w,\n/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg 50w,\n/static/4d172498d4a28786ec269bc3943aea19/03612/tank.jpg 75w,\n/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg 100w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/58718/tank.webp 13w,\n/static/4d172498d4a28786ec269bc3943aea19/74aad/tank.webp 25w,\n/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp 50w,\n/static/4d172498d4a28786ec269bc3943aea19/ed320/tank.webp 75w,\n/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp 100w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 50px) 100vw, 50px"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/7c20e/tank.jpg 25w,\n/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg 50w,\n/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg 100w,\n/static/4d172498d4a28786ec269bc3943aea19/59538/tank.jpg 150w,\n/static/4d172498d4a28786ec269bc3943aea19/fd013/tank.jpg 200w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/74aad/tank.webp 25w,\n/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp 50w,\n/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp 100w,\n/static/4d172498d4a28786ec269bc3943aea19/d9b14/tank.webp 150w,\n/static/4d172498d4a28786ec269bc3943aea19/6b183/tank.webp 200w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 100px) 100vw, 100px"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/ec46e/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/a2637/tank.jpg 82w,\n/static/4d172498d4a28786ec269bc3943aea19/15203/tank.jpg 164w,\n/static/4d172498d4a28786ec269bc3943aea19/ec46e/tank.jpg 328w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/5a48e/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/2d087/tank.webp 82w,\n/static/4d172498d4a28786ec269bc3943aea19/29d87/tank.webp 164w,\n/static/4d172498d4a28786ec269bc3943aea19/5a48e/tank.webp 328w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 328px) 100vw, 328px"}}}],"basePath":"/","skip":6,"limit":6,"group":[{"id":"c4ab993c-15d2-5f48-9e44-8451db4c15ed","slug":"/My-first-post-using-Novela-by-Narative","secret":false,"title":"My first post using Novela by Narative","author":"Tank Xu","date":"April 30th, 2019","dateForSEO":"2019-04-30T00:00:00.000Z","timeToRead":2,"excerpt":"With the growing community interest in Gatsby, we hope to create more resources that make it easier for anyone to grasp the power of this incredible tool.","subscription":true,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"My first post using Novela by Narative\",\n  \"author\": \"Tank Xu\",\n  \"date\": \"2019-04-30T00:00:00.000Z\",\n  \"hero\": \"./images/hero.jpg\",\n  \"excerpt\": \"With the growing community interest in Gatsby, we hope to create more resources that make it easier for anyone to grasp the power of this incredible tool.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"My first post using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@narative/gatsby-theme-novela\"), \". Novela is built by the team at \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://narative.co\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Narative\"), \", and built for everyone that loves the web.\"), mdx(\"h2\", {\n    \"id\": \"headers\"\n  }, \"Headers\"), mdx(\"h1\", {\n    \"id\": \"h1\"\n  }, \"H1\"), mdx(\"p\", null, \"It is recommended to NOT use H1s as it is reserved for the article heading. Any H1 is set as an H2.\"), mdx(\"h2\", {\n    \"id\": \"h2\"\n  }, \"H2\"), mdx(\"h3\", {\n    \"id\": \"h3\"\n  }, \"H3\"), mdx(\"h4\", {\n    \"id\": \"h4\"\n  }, \"H4\"), mdx(\"h5\", {\n    \"id\": \"h5\"\n  }, \"H5\"), mdx(\"h6\", {\n    \"id\": \"h6\"\n  }, \"H6\"), mdx(\"h2\", {\n    \"id\": \"emphasis\"\n  }, \"Emphasis\"), mdx(\"p\", null, \"Emphasis, aka italics, with \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"asterisks\"), \" or \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"underscores\"), \".\"), mdx(\"p\", null, \"Strong emphasis, aka bold, with \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"asterisks\"), \" or \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"underscores\"), \".\"), mdx(\"p\", null, \"Combined emphasis with \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"asterisks and \", mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"underscores\")), \".\"), mdx(\"p\", null, \"Strikethrough uses two tildes. \", mdx(\"del\", {\n    parentName: \"p\"\n  }, \"Scratch this.\")), mdx(\"h2\", {\n    \"id\": \"lists\"\n  }, \"Lists\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"First ordered list item\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Another item\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Actual numbers don\\u2019t matter, just that it\\u2019s a number\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Unordered list can use asterisks\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Or minuses\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Or pluses\")), mdx(\"h2\", {\n    \"id\": \"links\"\n  }, \"Links\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.google.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"I\\u2019m an inline-style link\")), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.google.com\",\n    \"title\": \"Google's Homepage\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"I\\u2019m an inline-style link with title\")), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.mozilla.org\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"I\\u2019m a reference-style link\")), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"../blob/master/LICENSE\"\n  }), \"I\\u2019m a relative reference to a repository file\")), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://slashdot.org\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"You can use numbers for reference-style link definitions\")), mdx(\"p\", null, \"Or leave it empty and use the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://www.reddit.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"link text itself\"), \".\"), mdx(\"p\", null, \"URLs and URLs in angle brackets will automatically get turned into links.\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://www.example.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"http://www.example.com\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://www.example.com\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"http://www.example.com\"), \" and sometimes\\nexample.com (but not on Github, for example).\"), mdx(\"p\", null, \"Some text to show that the reference links can follow later.\"), mdx(\"h2\", {\n    \"id\": \"images\"\n  }, \"Images\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1360px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIDAQQF/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQIAA//aAAwDAQACEAMQAAAB60c0vKSAvWoCrhj/xAAcEAADAAEFAAAAAAAAAAAAAAAAAQIDEBESIkH/2gAIAQEAAQUC0Z7zNshVOst9aUI//8QAGREAAQUAAAAAAAAAAAAAAAAAAQACEBES/9oACAEDAQE/AQ21kT//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREQ/9oACAECAQE/AaV7/8QAIBAAAQMCBwAAAAAAAAAAAAAAAAECITFhAxARE0FR4f/aAAgBAQAGPwLLw05ESq9ITiNZY26NsNVsQTJ//8QAHxABAAIBAwUAAAAAAAAAAAAAAQARITFBcVFhgbHw/9oACAEBAAE/IWLNWG+Eyyi1bEBWRvpnoDtFtqPJ5iXFq6dyV3J9Vn//2gAMAwEAAgADAAAAEI/3ff/EABgRAAIDAAAAAAAAAAAAAAAAAAABECFh/9oACAEDAQE/EGWZmKP/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/EDGIK//EAB4QAQACAQUBAQAAAAAAAAAAAAEAETEhQVFxkWHB/9oACAEBAAE/EFCC13D2aKjTNB6aRBp2Ctrl4NMse3jzf6/MRs6TAJYLcsVUjk6uIiJr1dj2xqXDdq8HFT//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/891a8f706331d47474c3f2fd9906d926/2035a/article-image-2.webp 1360w\"],\n    \"sizes\": \"(max-width: 1360px) 100vw, 1360px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/891a8f706331d47474c3f2fd9906d926/68efc/article-image-2.jpg 1360w\"],\n    \"sizes\": \"(max-width: 1360px) 100vw, 1360px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/891a8f706331d47474c3f2fd9906d926/68efc/article-image-2.jpg\",\n    \"alt\": \"Alt text\",\n    \"title\": \"Logo Title Text 1\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\u2019s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry.\"), mdx(\"h2\", {\n    \"id\": \"code-and-syntax-highlighting\"\n  }, \"Code and Syntax Highlighting\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"var s = \\\"JavaScript syntax highlighting\\\";\\nalert(s);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {}), \"No language indicated, so no syntax highlighting.\\nBut let's throw in a <b>tag</b>.\\n\")), mdx(\"h3\", {\n    \"id\": \"jsx\"\n  }, \"JSX\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from \\\"react\\\";\\nimport { ThemeProvider } from \\\"theme-ui\\\";\\nimport theme from \\\"./theme\\\";\\n\\nexport default props => (\\n  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>\\n);\\n\")), mdx(\"h2\", {\n    \"id\": \"blockquotes\"\n  }, \"Blockquotes\"), mdx(\"p\", null, \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\u2019s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Blockquotes are very handy in email to emulate reply text.\\nThis line is part of the same quote.\")), mdx(\"p\", null, \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\u2019s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\"), mdx(\"h2\", {\n    \"id\": \"horizontal-rule\"\n  }, \"Horizontal Rule\"), mdx(\"p\", null, \"Horizontal Rule\"), mdx(\"p\", null, \"Three or more\\u2026\"), mdx(\"hr\", null), mdx(\"p\", null, \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\u2019s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\"), mdx(\"hr\", null), mdx(\"p\", null, \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\\u2019s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAD/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFDDQ65Sj4//8QAGRAAAwADAAAAAAAAAAAAAAAAAAECAxAT/9oACAEBAAEFAmxZkdJKFr//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGI/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Bqv/EABYQAAMAAAAAAAAAAAAAAAAAABAgMf/aAAgBAQAGPwIVP//EABoQAQEAAgMAAAAAAAAAAAAAAAEAETEhUXH/2gAIAQEAAT8hwCzdiR07lk9tJL//2gAMAwEAAgADAAAAECsv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBLNJP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EG9ws//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExcWGx/9oACAEBAAE/ELA0F9hp9sii6+2TIzitPCGjAGf/2Q==","aspectRatio":1.6216216216216217,"src":"/static/20448421130829bd07ac9cc8849d3b35/58fe7/hero.jpg","srcSet":"/static/20448421130829bd07ac9cc8849d3b35/e0f30/hero.jpg 236w,\n/static/20448421130829bd07ac9cc8849d3b35/86afd/hero.jpg 472w,\n/static/20448421130829bd07ac9cc8849d3b35/58fe7/hero.jpg 944w,\n/static/20448421130829bd07ac9cc8849d3b35/0ff54/hero.jpg 1200w","srcWebp":"/static/20448421130829bd07ac9cc8849d3b35/99fbb/hero.webp","srcSetWebp":"/static/20448421130829bd07ac9cc8849d3b35/77392/hero.webp 236w,\n/static/20448421130829bd07ac9cc8849d3b35/1f177/hero.webp 472w,\n/static/20448421130829bd07ac9cc8849d3b35/99fbb/hero.webp 944w,\n/static/20448421130829bd07ac9cc8849d3b35/9000d/hero.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAD/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFDDQ65Sj4//8QAGRAAAwADAAAAAAAAAAAAAAAAAAECAxAT/9oACAEBAAEFAmxZkdJKFr//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGI/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Bqv/EABYQAAMAAAAAAAAAAAAAAAAAABAgMf/aAAgBAQAGPwIVP//EABoQAQEAAgMAAAAAAAAAAAAAAAEAETEhUXH/2gAIAQEAAT8hwCzdiR07lk9tJL//2gAMAwEAAgADAAAAECsv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBLNJP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EG9ws//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExcWGx/9oACAEBAAE/ELA0F9hp9sii6+2TIzitPCGjAGf/2Q==","aspectRatio":1.6216216216216217,"src":"/static/20448421130829bd07ac9cc8849d3b35/1dc0b/hero.jpg","srcSet":"/static/20448421130829bd07ac9cc8849d3b35/3a5ce/hero.jpg 163w,\n/static/20448421130829bd07ac9cc8849d3b35/05730/hero.jpg 327w,\n/static/20448421130829bd07ac9cc8849d3b35/1dc0b/hero.jpg 653w,\n/static/20448421130829bd07ac9cc8849d3b35/f72c7/hero.jpg 980w,\n/static/20448421130829bd07ac9cc8849d3b35/0ff54/hero.jpg 1200w","srcWebp":"/static/20448421130829bd07ac9cc8849d3b35/0acdf/hero.webp","srcSetWebp":"/static/20448421130829bd07ac9cc8849d3b35/ac59e/hero.webp 163w,\n/static/20448421130829bd07ac9cc8849d3b35/7660b/hero.webp 327w,\n/static/20448421130829bd07ac9cc8849d3b35/0acdf/hero.webp 653w,\n/static/20448421130829bd07ac9cc8849d3b35/75470/hero.webp 980w,\n/static/20448421130829bd07ac9cc8849d3b35/9000d/hero.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAD/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAFDDQ65Sj4//8QAGRAAAwADAAAAAAAAAAAAAAAAAAECAxAT/9oACAEBAAEFAmxZkdJKFr//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwGI/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Bqv/EABYQAAMAAAAAAAAAAAAAAAAAABAgMf/aAAgBAQAGPwIVP//EABoQAQEAAgMAAAAAAAAAAAAAAAEAETEhUXH/2gAIAQEAAT8hwCzdiR07lk9tJL//2gAMAwEAAgADAAAAECsv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAwEBPxBLNJP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAECAQE/EG9ws//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExcWGx/9oACAEBAAE/ELA0F9hp9sii6+2TIzitPCGjAGf/2Q==","aspectRatio":1.6216216216216217,"src":"/static/20448421130829bd07ac9cc8849d3b35/eaa58/hero.jpg","srcSet":"/static/20448421130829bd07ac9cc8849d3b35/5a3ee/hero.jpg 114w,\n/static/20448421130829bd07ac9cc8849d3b35/41f8f/hero.jpg 229w,\n/static/20448421130829bd07ac9cc8849d3b35/eaa58/hero.jpg 457w,\n/static/20448421130829bd07ac9cc8849d3b35/c309b/hero.jpg 686w,\n/static/20448421130829bd07ac9cc8849d3b35/e3008/hero.jpg 914w,\n/static/20448421130829bd07ac9cc8849d3b35/0ff54/hero.jpg 1200w","srcWebp":"/static/20448421130829bd07ac9cc8849d3b35/15384/hero.webp","srcSetWebp":"/static/20448421130829bd07ac9cc8849d3b35/31fce/hero.webp 114w,\n/static/20448421130829bd07ac9cc8849d3b35/e3e25/hero.webp 229w,\n/static/20448421130829bd07ac9cc8849d3b35/15384/hero.webp 457w,\n/static/20448421130829bd07ac9cc8849d3b35/0258d/hero.webp 686w,\n/static/20448421130829bd07ac9cc8849d3b35/64ea2/hero.webp 914w,\n/static/20448421130829bd07ac9cc8849d3b35/9000d/hero.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/20448421130829bd07ac9cc8849d3b35/0ff54/hero.jpg"}}}],"pathPrefix":"/","first":true,"last":true,"index":1,"pageCount":1,"additionalContext":{"authors":[{"authorsPage":true,"bio":"Coding.net 产品设计师，专注工具领域创新。\n","id":"d936f7c4-1b9c-5a3c-ae74-c1ee8bf0fba3","name":"Tank Xu","featured":true,"social":[{"url":"https://instagram.com/tankxu"},{"url":"https://github.com/tankxu"}],"slug":"/authors/Tank-Xu","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/afb2b/tank.jpg 13w,\n/static/4d172498d4a28786ec269bc3943aea19/7c20e/tank.jpg 25w,\n/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg 50w,\n/static/4d172498d4a28786ec269bc3943aea19/03612/tank.jpg 75w,\n/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg 100w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/58718/tank.webp 13w,\n/static/4d172498d4a28786ec269bc3943aea19/74aad/tank.webp 25w,\n/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp 50w,\n/static/4d172498d4a28786ec269bc3943aea19/ed320/tank.webp 75w,\n/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp 100w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 50px) 100vw, 50px"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/7c20e/tank.jpg 25w,\n/static/4d172498d4a28786ec269bc3943aea19/fa1ea/tank.jpg 50w,\n/static/4d172498d4a28786ec269bc3943aea19/61cdf/tank.jpg 100w,\n/static/4d172498d4a28786ec269bc3943aea19/59538/tank.jpg 150w,\n/static/4d172498d4a28786ec269bc3943aea19/fd013/tank.jpg 200w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/74aad/tank.webp 25w,\n/static/4d172498d4a28786ec269bc3943aea19/e7b2c/tank.webp 50w,\n/static/4d172498d4a28786ec269bc3943aea19/66016/tank.webp 100w,\n/static/4d172498d4a28786ec269bc3943aea19/d9b14/tank.webp 150w,\n/static/4d172498d4a28786ec269bc3943aea19/6b183/tank.webp 200w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 100px) 100vw, 100px"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEA//EABYBAQEBAAAAAAAAAAAAAAAAAAIDAf/aAAwDAQACEAMQAAAB5U6ZuRRiMhO24KX/xAAaEAEBAQEAAwAAAAAAAAAAAAABAgADERIh/9oACAEBAAEFAlQualHS+rXQs3Zw+Mfd/8QAFxEBAAMAAAAAAAAAAAAAAAAAEAExQf/aAAgBAwEBPwHCKP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhAREiFh/9oACAEBAAY/AuhbLlF1pkX7SRqNP//EABkQAAMBAQEAAAAAAAAAAAAAAAABESExQf/aAAgBAQABPyH0BtxEuMHNQ6aaKRbp3yngSlHKPHoxqRoaK9P/2gAMAwEAAgADAAAAECPAvf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAECH/2gAIAQMBAT8QAVEeM//EABgRAQEAAwAAAAAAAAAAAAAAAAEAEBEx/9oACAECAQE/EFdyk9x//8QAGxABAQADAQEBAAAAAAAAAAAAAREAITFBYXH/2gAIAQEAAT8QEABAd7dWe4CLQUAjxh9M5LdwwcbTxgCpCGEOT9woT33AeQV9jluEUTEGFAsz/9k=","aspectRatio":1,"src":"/static/4d172498d4a28786ec269bc3943aea19/ec46e/tank.jpg","srcSet":"/static/4d172498d4a28786ec269bc3943aea19/a2637/tank.jpg 82w,\n/static/4d172498d4a28786ec269bc3943aea19/15203/tank.jpg 164w,\n/static/4d172498d4a28786ec269bc3943aea19/ec46e/tank.jpg 328w,\n/static/4d172498d4a28786ec269bc3943aea19/25252/tank.jpg 400w","srcWebp":"/static/4d172498d4a28786ec269bc3943aea19/5a48e/tank.webp","srcSetWebp":"/static/4d172498d4a28786ec269bc3943aea19/2d087/tank.webp 82w,\n/static/4d172498d4a28786ec269bc3943aea19/29d87/tank.webp 164w,\n/static/4d172498d4a28786ec269bc3943aea19/5a48e/tank.webp 328w,\n/static/4d172498d4a28786ec269bc3943aea19/fc32b/tank.webp 400w","sizes":"(max-width: 328px) 100vw, 328px"}}}],"basePath":"/","skip":6,"limit":6}}}}