Gatsby入门指南—支持Markdown(1)

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"

完整代码如图所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券