前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Gatsby入门指南—支持Markdown(1)

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

作者头像
前端大彬哥
修改2019-05-29 11:21:29
5530
修改2019-05-29 11:21:29
举报
文章被收录于专栏:大前端666大前端666

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"

完整代码如图所示:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.05.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.安装插件
  • 2.添加格式化文章
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档