Gridsome 案例

_当里个当_
1,461 阅读4分钟

创建项目

gridsome create blog-with-gridsome

yarn dev

启动项目:

image.png

使用github中的 开源模板，最好是将其fork到自己的账户当中，防止模板文件被作者删除或者做一些其他的修改。

处理首页模板

  • 根据模板中的package.json，安装依赖 npm i bootstrap @fortawesome/fontawesome-free
  • 将其余样式文件，写入到项目 src/assets/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")

// 将模板中的css样式复制到此处
// ...
  • 在项目中的main.js import以上样式文件
import 'bootstrap/dist/css/bootstrap.min.css'
import '@fortawesome/fontawesome-free/css/all.min.css'

import './assets/css/index.css'

处理其他页面模板

在模板中，其实每个页面的头部导航和尾部都是相同的，可以将其放在默认的布局组件中，中间的内容部分可以分别放在不同的组件中。

layouts

默认为 Default.vue 文件， 可在 main.js 中修改

// Default.vue
<template>
    <header></header>
    <slot />
    <footer></footer>
</template>
// 其它 .vue 文件
<template>
    <Layout>
    <!-- 主体内容 -->
  </Layout>
</template>

将 Post、About、Contact页面的内容拷贝到项目中。相关的模板完成之后，接下来会使用gridsome的方式来构建纯静态的博客网站。

使用本地md文件管理文章内容

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

通过插件导入,使用@gridsome/source-filesystem

yarn add @gridsome/source-filesystem

在对应的plugins中配置，配置之后需要进行转换，需要使用@gridsome/transformer-remark

yarn add @gridsome/transformer-remark

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

可在content/blog目录下新增md文件

content
--blog
    --article1.mg
    --article2.md

重启后，打开 http://localhost:8080/___explore 可查询到新增的经过转换的md文件数据

image.png

Strapi 基本使用

除了通过本地的md文件管理博客内容方式之外，也可以通过网站后台管理

grisome本身是未提供后台功能，推荐使用strapi实现需求

地址： strapi.io

介绍：是一个内容管理后台，可自定义管理结构

  1. 基本使用 安装:
npx create-strapi-app blog-project --quickstart

启动之后，需要注册账号

使用插件，内容类型生成器

新加字段和内容，然后使用strapi的接口数据

  1. 使用GraphQL查看数据

安装

cd blog-project
npm run strapi install graphql

打开 http://localhost:1337/graphql 查看graphql的数据

image.png

  1. 将Strapi数据预取到Gridsome应用中 要将strapi集成到gridsome中，需要使用@gridsome/source-strapi的一个插件

之后在gridsome的配置文件gridsome.config.js的plugins中添加如下代码：

{
  use: '@gridsome/source-strapi',
    options: {
    apiURL: 'http://localhost:1337',
    queryLimit: 1000,
    contentTypes: ['post'],
    // loginData: {
    //   identifier: '',
    //   password: ''
    // }
}

打开 http://localhost:8080/___explore 查看graphql的数据

image.png

如果此时在strapi的后台添加一条数据，在gridsome中是查不到的，若要解决这个问题，重启下gridsome服务就好了。

  1. 文章列表分页 Gridsome提供了@paginate的api来实现分页的功能。可以自定义页数和每页条数。
<page-query>
query ($page: Int) {
  posts: allStrapiPost (perPage: 2, page: $page) @paginate {
    edges {
      node {
        id
        title
        content
        tags {
          id
          title
        }
      }
    }
  }
}
</page-query>

Gridsome还提供了分页组件Pager，需要像正常组件一样先注册再使用，还需要在page-query中添加查询语句：

<pager :info="$page.posts.pageInfo"></pager>

query ($page: Int) {
    posts: allStrapiPost (perPage: 1, page: $page) @paginate {
        pageInfo {
            totalPages
            currentPage
        }
        ...
    }
}

部署 Strapi

gridsome项目即博客应用本身可以部署任何支持静态文件的web服务里，而strapi应用需要部署在支持Node.js的环境中。因为gridsome项目在启动时需要请求strapi的服务来获取预渲染的数据，所以要先部署strapi的应用。

strapi默认是使用的sqlite来做数据存储，也可以使用诸如mysql mongodb等其他的数据库，在官网都有相应的配置项，这里使用mysql实现。

要想使用mysql，首先要在服务器里面有mysql的环境，其次修改strapi项目的配置文件config\database.js。配置文件修改如下：

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
      default: {
          connector: 'bookshelf',
          settings: {
              client: 'mysql',
              host: env('DATABASE_HOST', 'localhost'),
              port: env.int('DATABASE_PORT', 3306),
              database: env('DATABASE_NAME', 'blog'),
              username: env('DATABASE_USERNAME', 'root'),
              password: env('DATABASE_PASSWORD', ''),
          },
          options: {},
      },
  },
});

这里host使用的是本机地址，是因为我这里的mysql和strapi是在同一台服务器上，如果在不同的服务器的话，这里要写成其他服务器的地址，其次要有一个名字为blog的数据库，否则部署时会报错找不到对应数据库的。

部署的过程也很简单，直接在云服务器上把源码clone下来，然后运行npm install npm run build等命令，直接打包就好，但是这种方式有个缺点，就是当前用npm start连接断掉之后，服务也就挂了，所以这里使用pm2(npm i -g pm2)进程守护来执行npm命令。

npm i -g pm2
pm2 start npm --run start --name blog-backend

把本地服务联通远程Strapi

配置环境变量，开发模式、生产模式，将gridsome.config.js修改 apiURL 为部署的远程地址/本地地址

.env.devlopment 在开发模式下运行 .env.production 在生产模式下运行

apiURL: process.env.GRIDSOME_API_URL,

在main.js中 混入GRIDSOME_API_URL，这样在全局都可以使用到这个变量。方便后续更改.vue文件中的图片资源等...

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.mixin({
    data() {
        return {
        GRIDSOME_API_URL: process.env.GRIDSOME_API_URL
      }
    }
  })
  Vue.component('Layout', DefaultLayout)
}

部署 Gridsome 应用

Develop. Preview. Ship. For the best frontend teams – Vercel

image.png

当Strapi后端数据每次更新时，我们需要再次重新部署vercel，很麻烦。所以自动化！

image.png

avatar
文章
阅读
粉丝