美文网首页
Gatsby入门指南—支持Markdown(1)

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

作者: 前端大彬哥 | 来源:发表于2019-05-24 11:53 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Gatsby入门指南—支持Markdown(1)

          本文链接:https://www.haomeiwen.com/subject/hbhgzqtx.html