Gridsome案例

目的：做一个博客，使用gridsome基础知识点的巩固

• gridsome create blog-with-gridsome
• npm run develop 启动项目

处理首页模板

使用一个bootstrap 开源项目作为基础
地址： https://https://github.com/StartBootstrap/startbootstrap-clean-blog
将项目下载下来，将模板套到本地项目

项目安装bootstrap npm i bootstrap
yarn add @fortawesome/fontawsome-free

在main.js中引入全局的样式
创建src/asstes/css/index.css静态资源文件夹

@import url("https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800");

main.js

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import './assets/css/index.css'
export default function (Vue, {
      router, head, isClient }) {
     
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

处理其他页面

提出公共导航底部放到Layout.vue
新建post.vue,contact.vue,about.vue 全部移到到项目中的vue文件下

<template>
  <Layout>
       <!-- Page Header -->
        <header class="masthead" style="background-image: url('img/contact-bg.jpg')">
            <div class="overlay"></div>
            <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-10 mx-auto">
                <div class="page-heading">
                    <h1>Contact Me</h1>
                    <span class="subheading">Have questions? I have answers.</span>
                </div>
                </div>
            </div>
            </div>
        </header>

        <!-- Main Content -->
        <div class="container">
            <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
                <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
                <!-- WARNING: Some web hosts do not allow emails to be sent through forms to common mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! -->
                <!-- To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
                <form name="sentMessage" id="contactForm" novalidate>
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                    <label>Name</label>
                    <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                    <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                    <label>Email Address</label>
                    <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                    <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                    <label>Phone Number</label>
                    <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                    <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                    <label>Message</label>
                    <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                    <p class="help-block text-danger"></p>
                    </div>
                </div>
                <br>
                <div id="success"></div>
                <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
                </form>
            </div>
            </div>
        </div>
  </Layout>
</template>

<script>
export default {
     
  metaInfo: {
     
    title: 'About us'
  }
}
</script>

使用本地md管理文档

gridsome中数据可以放到任何地方，可以是本地，或者后台

例子中使用markdown方式，对应的官网 import Data
通过插件导入,使用@gridsome/source-filesystem

安装 yarn add @gridsome/source-filesystem
或者 npm install @gridsome/source-filesystem
在对应的plugins中配置，
配置之后需要进行转换，需要使用@gridsome/transformer-remark

module.exports = {
     
  siteName: 'Gridsome',
  plugins: [
    {
     
      use: "@gridsome/source-filesystem",
      options: {
     
        typeName : "BlogPost",
        path: './content/blog/**/*.md'
      }
    }
  ]
}

Strapi 基本使用

除了通过本地的md文件管理博客内容方式之外
也可以通过网站后台管理
grisome本身是未提供后台功能，推荐使用strapi实现需求
地址： https://strapi.io
介绍：是一个内容管理后台
自定义管理结构

基本使用

1. 安装： npx create-strapi-app my-project --quickstart
2. 生成之后会自启动应用，需要注册账号
3. 使用插件，内容类型生成器
4. 新加字段和内容，然后使用strapi的接口数据

使用接口数据

1. 开放对应的角色权限
2. 编辑public角色，对应的设置接口给find，findone，count等
3. 进行测试，接口测试可以使用postman，访问对应的接口地址

gridsome使用文章列表

先在explore中写一个查询语句

<template>
   <div> 
      <Layout>
         <!-- Page Header -->
        <header class="masthead" style="background-image: url('img/home-bg.jpg')">
          <div class="overlay"></div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 col-md-10 mx-auto">
                <div class="site-heading">
                  <h1>Clean Blog</h1>
                  <span class="subheading">A Blog Theme by Start Bootstrap</span>
                </div>
              </div>
            </div>
          </div>
        </header>

        <!-- Main Content -->
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
              <div class="post-preview" v-for="edge in $page.posts.edges" :key="edge.node.id">
                <a href="post.html">
                  <h2 class="post-title">
                   {
     {
     edge.node.title}}
                  </h2>
                  
                </a>
                <p class="post-meta">Posted by
                  <a href="#">{
     {
     edge.node.created_by.firstname}}</a>
                  on September 24, 2019</p>
              </div>
              <hr>

              <div class="clearfix">
                <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    </div>  
</template>

<script>

<page-query>
  
  query {
     
    posts: allStrapiPost{
     
      edges{
     
      node{
     
        id
        path
        title
        created_by{
     
          id
          firstname
          lastname
        }
        tags{
     
          id
          title
        }
      } 
      }
    }
  }
</page-query>
export default {
     
  metaInfo: {
     
    title: 'Blog'
  },
  name: 'IndexPage'
}
</script>

<style>

</style>

设置分页

使用@paginate 是自带分页功能

query ($page: Int) {
     
  posts: allStrapiPost(perPage: 10, page: $page) @paginate {
     
      edges{
     
      node{
     
        id
        path
        title
        created_by{
     
          id
          firstname
          lastname
        }
        tags{
     
          id
          title
        }
      } 
      }
  }
}

页码使用

<template>
  <Layout>
    <ul>
      <li v-for="edge in $page.allBlogPost.edges" :key="edge.node.id">
        {
     {
      edge.node.title }}
      </li>
    </ul>
    <Pager :info="$page.allBlogPost.pageInfo"/>
  </Layout>
</template>

<script>
import {
      Pager } from 'gridsome'

export default {
     
  components: {
     
    Pager
  }
}
</script>

<page-query>
query ($page: Int) {
     
  allBlogPost(perPage: 10, page: $page) @paginate {
     
    pageInfo {
     
      totalPages
      currentPage
    }
    edges {
     
      node {
     
        id
        title
      }
    }
  }
}
</page-query>

详情组件

设置动态路由

博客部署

strapi需要部署到node平台的
gridsome支持任何服务端
需要有一个云端服务器，数据库
只部署gridsome
使用vercel ，官网地址 ：https://vercel.com

1. 推荐使用github集成，
2. 点击import Project按钮
3. 选择import git Repository，导入git仓库
4. 内置了很多框架，选择gridsome，选择对应的构建命令，默认输出的目录，配置对应的环境变量
5. 会进行下载代码，安装依赖，进行部署
6. 部署成功，会给出对应链接地址