1.安装插件
我用Gatsby就是因为它支持Markdown.所以不墨迹,直接整Md支持。
<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="c10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display: block; break-inside: avoid; text-align: left; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">yarn add gatsby-source-filesystem
yarn add gatsby-transformer-remark</pre>
2.添加格式化文章
在src>pages下面,添加三篇文章,头部格式如下:
> path : "/blog/my-first-post"date : "2019-05-01"title : "Hello world"tags : ['教程','Gatsby']
>
> excerpt : "Gatsby hello word post"
完整代码如图所示:
1557044977591.png
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=10mg9rlds9jpo
网友评论