Gridsome获取markdown数据

获取markdown文件内容

1.在src同级目录下添加文件夹 mydata/index.md

markdown文件里面可以写源数据

---
title: Blogging Like a Hacker
lang: en-US
date: 2019-03-13
slug: girdsome-create
---

2.配置gridsome.config.js文件

//这个文件是放配置参数和插件的，基本配置如下
module.exports = {
  siteName: 'Gridsome',
  siteUrl: 'https://www.gridsome.org',
  plugins: []
}

详细配置参考官方文档https://gridsome.org/docs/config
我的文章路由格式

//我的配置
module.exports = {
  siteUrl: '',
  port: '80',
  pathPrefix: '',
  titleTemplate: '',
  siteName: '个人技术日志',
  siteDescription: '',
  transformers: {
    //Add markdown support to all file-system sources
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
        '@gridsome/remark-prismjs'
      ]
    }
  },
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug',
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: 'Tag',
            route: '/tag/:id',
            create: true
          }
        },
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    }
  ]
}

/blog/:year/:month/:day/:slug中的:year/:month/:day来自date: 2019-03-13
slug 来自slug: girdsome-create
所以这个路由就是/blog/2019/03/13/girdsome-create

$注意:$

• path 表示的是你的markdown的相对路径，一层文件夹/.md；两层文件夹：/**/.md
• typeName 将是GraphQL集合的名称，并且必须是唯一的

3.在/template目录下建立与gridsome.config.js文件中typeName值对应模版

/template目录是能够使用GraphQL schema数据的

gridsome.config.js
/template/MyData.vue

<template>
    <Layout>
        <div>
            <hd style='color:res'>{{$pages.count.title}}</hd>
        </div>
    </Layout>
</template>
<page-query>
query BlogPost ($path: String!) {
  post: myData (path: $path) {
    title
    path
    date (format: "YYYY-MM-DD")
    description
  }
}
</page-query>
<script>
export default {
    
}
</script>

4…在/pages目录下新建文件mydata.vue

<template>
  <Layout>
   
    <div v-for="edge in $page.posts.edges" :key="edge.node.id">
      <h2>{{ edge.node.title }}</h2>
      <p>{{ edge.node.description }}</p>
      <p>{{ edge.node.date}}</p>
    </div>
  </Layout>
</template>
<page-query>
query Posts {
  posts: allMyData {
    edges {
      node {
        id
        title
        description
        date
      }
    }
  }
}
</page-query>

<script>
export default {};
</script>

5.gridsome develop运行项目，在浏览器中打开，访问（https://gridsome.org/docs/querying-data/）

获取YAML, JSON文件内容

1.在/src/data 创建文件，users.json

[
    {
        "name":"Linda",
        "age":23,
        "sex":"女",
        "籍贯":"陕西榆林"
    },
    {
        "name":"Annie",
        "age":22,
        "sex":"女",
        "籍贯":"甘肃酒泉"
    },
    {
        "name":"Anna",
        "age":22,
        "sex":"女",
        "籍贯":"甘肃白银"
    },
    {
        "name":"Zander",
        "age":23,
        "sex":"男",
        "籍贯":"陕西蓝田"
    },
    {
        "name":"John",
        "age":23,
        "sex":"男",
        "籍贯":"陕西宝鸡"
    },
    {
        "name":"Censek",
        "age":23,
        "sex":"女",
        "籍贯":"河北石家庄"
    },
    {
        "name":"Doris",
        "age":23,
        "sex":"女",
        "籍贯":"陕西宝鸡"
    }
]

2./pages下创建users.vue

-<script></script>引入json文件

<template>
  <div class="count">
    <ul v-for="(user,index) in users" :key="index">
      <li v-html="user.name"></li>
    </ul>
  </div>
</template>
<script>
import users from "@/data/count.json";
export default {
  data() {
    return {
      users
    };
  }
};
</script>
<style scoped>
.count {
  color: red;
}
ul {
  list-style-type: none;
}
</style>

gridsome组件获取值

gridsome 中static query

建立templates，在compoents中使用

<static-query>
query{
	count(id:""){
		title
		}
	}	
</static-query>