项目结构1.初始化项目gridsomecreatemy-blogcdmy-bloggridsomedevelop如果第一步create报错或者安装依赖时耗时较长，可以中断安装和删除node_modules。通过cnpm手动安装。cdmy-blogrm-rfnode_modulescnpminstall现在可以在http://localhost:8080/看到项目的主页了。2.安装文件解析插件@gridsome/source-filesystem：将文件转换为GraphQL数据层可访问的内容。@gridsome/transformer-remark：Gridsome的Markdown转换器。安装cnpminstall@gridsome/source-filesystem@gridsome/transformer-remark-S在gridsome.config.js中配置插件plugins:[{use:"@gridsome/source-filesystem",options:{path:"blog/*.md",typeName:"Post"}}]@gridsome/source-filesystem插件的作用是将文件转换成组件中使用GraphQL可以获取的内容，转换时需要转换器解析文件.所以需要安装@gridsome/transformer-remark依赖。只要Gridsome在package.json中找到支持该文件的转换器，它就会自动转换该文件。@gridsome/source-filesystem的配置参数：path：文件的路径。typeName：GraphQL类型和模板名称。src/templates中的.vue文件必须匹配typeName才能拥有它的模板。3.为markdown文件创建模板在templates文件夹下新建一个Post.vue文件。这个文件是所有markdown文件的模板页面，所有markdown文件都会按照这个文件的布局渲染页面。query($id:ID!){post(id:$id){titlecontent}}4.创建blog文件夹根据@gridsome/source-filesystem插件中路径定义的路径新建blog文件夹。本例安装目录与src同级。在blog文件夹中新建一个test.md文件。---title:Testauthor:Dora---##一个测试页这是**markdown**文件的内容区，请在这里分享你的优秀想法！您现在可以在localhost:8080/blog/test看到该页面。5.在index.vue中添加跳转链接在index.vue中，可以添加一个跳转到博客页面的入口链接。query{posts:allPost{edges{node{id标题路径}}}}至此，你就可以愉快的在博客中编写markdown文件了。但是gridsome默认的markdown文件是没有样式的，所以如果想让页面有自己的特色，就需要在markdown中自定义不同语法的样式。自定义的个性化博客全局样式表和资源一般放在src/assets文件夹下，导入到src/main.js中。importglobalstylesheets安装SASSnpminstall-Dsass-loadernode-sassimportstylesheets//main.jsimport'~/assets/style/index.scss';在Gridsome中，您可以使用别名~或@链接到文件夹中的/srcfiles文件。DefinestyleMarkdown是Web上使用的文本到HTML的转换工具，可以生成结构化的HTML文档，格式简单，易读易写。1.#-######标题转换为

-

标签h3{color:darkgoldenrod;}h4{color:cadetblue;}2.Blockquotes>转换为

标签blockquote{border-左：4px实心黑金棒；填充：1px10px；颜色：#666；background-color:rgba(184,134,11,0.1);}3.将有序列表转换为

标签4.将无序列表转换为
标签5.代码块将转换为

和标签pre[class*="language-"]{padding:20px;背景色：rgba(95,158,160,0.2);border:1pxsolidrgba(95,158,160,0.3);边界半径：5px;}6.行内代码会被转换为标签pcode{padding:2px4px;字体大小：14px；颜色：RGB（95、158、160）；背景色：rgba(95,158,160,0.2);边界半径：3px；}7。由*或_组成的斜体将被转换为标签8。两个**或__组成的粗体会转化为一个标签9.超链接是标签，图片是标签a{color:#6b17e6;过渡：不透明度0.2s；文字修饰：无；&:hover{不透明度：0.8;文本修饰：下划线；}}代码块语法高亮安装remark-prismjs插件cnpmstall@gridsome/remark-prismjs-Simportinmain.jsimportcssimport'prismjs/themes/prism.css'configurepluginingridsome.config.jsapplysyntaxhighlightingtoasinglemarkdownfoldermodule.exports={插件：[{use:'@gridsome/source-filesystem',options:{path:'blog/*.md',typeName:'Post'remark:{plugins:['@gridsome/remark-prismjs']}}}]}应用所有降价文件的语法突出显示。module.exports={transformers:{remark:{plugins:['@gridsome/remark-prismjs']}}}如果你想禁用内联代码块的高亮，你可以在插件选项中配置transformInlineCode:false选项.module.exports={transformers:{remark:{plugins:[['@gridsome/remark-prismjs',{transformInlineCode:false}]]}}}从现在开始，一个基于Markdown的博客完全可以通过gridsome实现。