Gridsome(五)：UI框架 Buefy 的使用

官方文档：https://buefy.org/documentation/customization/

1. 安装

cnpm install buefy

2. 配置

// 在 main.js 中添加：
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

3. 使用

• ：顶部导航栏

<template>
  <b-navbar>
    <template slot="brand">
      <b-navbar-item tag="router-link" :to="{ path: '/' }">
        <img src="../assets/images/belstar-logo.png">
      </b-navbar-item>
    </template>
    <template slot="start">
      <b-navbar-item href="/">
        Home
      </b-navbar-item>
      <b-navbar-item href="https://gridsome.org/">
        Documentation
      </b-navbar-item>
      <b-navbar-dropdown label="Blog">
        <b-navbar-item :href="edge.node.path" v-for="edge in $page.posts.edges" :key="edge.node.id">
          {{edge.node.title}}
        </b-navbar-item>
      </b-navbar-dropdown>
    </template>
  </b-navbar>
</template>

<page-query>
query {
  posts: allPost(filter: { published: { eq: true }}) {
    edges {
      node {
        id
        title
        description
        cover_image (width: 770, height: 380, blur: 10)
        path
        tags {
          id
          title
          path
        }
      }
    }
  }
}
</page-query>

---

如果要部署的话，推荐使用 Netlify 。

优势

• Simply Push to Deploy
  • 支持热部署，只需要将代码 push 到 Git 远程仓库即可自动构建及更新。
• Free automatic HTTPS
  • 支持自定义域名，提供免费 HTTPS ，可上传域名证书。
• Never have to leave Terminal
  • 可在终端中操作 Netlify。

---

：

• GridSome(一)：介绍
• Gridsome(二)：起步
• Gridsome(三)：搭建简易博客网站
• Gridsome(四)：完善简易博客网站