官方文檔：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。
🔗：