Gridsome(二)：起步

用 GraphQL 查询数据

使用 Gridsome 可以将数据导入网页。Gridsome 利用 GraphQL 进行数据管理。

运行 Gridsome：

gridsome develop

在 GraphQL Playground 中查看我们可以访问的查询。

在 gridsome.config.js 中配置插件：

plugins: [
  {
    use: "@gridsome/source-filesystem",
    options: {
      path: "faker/*.md",
      typeName: "Faker"
    }
  }
]

可以看到 Faker 和所有 AllFaker 查询已经被添加，这些数据将用于填充我们正在构建的站点。

显示布局组件

我们要建立的网站，肯定需要创建页面。可以看到 Default.vue 文件中默认生成的代码：

<template>
  <div class="layout">
    <header class="header">
      <strong>
        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
      </strong>
      <nav class="nav">
        <g-link class="nav__link" to="/">Home</g-link>
        <g-link class="nav__link" to="/about/">About</g-link>
      </nav>
    </header>
    <slot />
  </div>
</template>

可以使用 static-query 从布局组件中的 GraphQL 查询数据：

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

在 Default.Vue 文件中， static-query 可以使我们能够将从 GraphQL 中获取到的数据在布局组件中使用。现在，我们正在从 metadata 查询中获取站点名，并在模板 $static.metaData.siteName 中使用它。此外，通过 <slot />，显示页面组件的内容。

官方

🔧 插件：

• @gridsome/source-filesystem：将文件转换为可以在组件中使用 GraphQL 获取的内容，而转换的时候需要转换器才能解析文件。
• @gridsome/transformer-remark：Gridsome 用于转换 Markdown 的转换器。
• @gridsome/remark-prismjs：markdown 语法高亮显示。
  使用方法：
  • 在 main.js 文件中导入一个 Prism CSS 主题:

    import 'prismjs/themes/prism.css'
    

  • 在 gridsome.config.js 中添加配置：

    module.exports = {
      plugins: [
        {
          use: '@gridsome/source-filesystem',
          options: {
            path: 'blog/**/*.md',
            route: '/blog/:year/:month/:day/:slug',
            remark: {
              plugins: [
                '@gridsome/remark-prismjs'
              ]
            }
          }
        }
      ]
    }
    

• ……

🌰 网站欣赏：

• Markdown
  https://gridsome-starter-blog.netlify.com/
  

• WordPress
  https://wonderful-montalcini-a601bf.netlify.com/
  

• Shopify
  https://gridsome-shopify-starter.netlify.com/
  

• ……

---

🔗：

• GridSome(一)：介绍
• Gridsome(三)：搭建简易博客网站
• Gridsome(四)：完善简易博客网站
• Gridsome(五)：UI框架 Buetfy 的使用