任务二:静态站点生成

167 阅读1分钟

Gridsome

image.png

静态网站生成器

image.png

image.png

image.png

JAMStack

image.png

静态应用使用场景

image.png

@gridsome/source-filesystem插件

用于读取本地md文件,来生成文章的插件,相当于查后端的数据用于渲染到页面上,区别就是这个
数据是写在本地文件里的,需要用这个插件来读取

image.png

Strapi介绍

地址 https://strapi.io/
Strapi是一个通用的内容管理系统,内容相当于是你自己需要的借口数据,这个工具用来写接口
创建项目 npx create-strapi-app my-project --quickstart 成功后会自动打开一个创建用户的页面

image.png

GraphQL(用于查询数据的插件)

下载插件 npm run strapi install graphql
需要在Strapi项目里下载,安装好后运行项目,打开一下链接 http://localhost:1337/graphql

image.png

将Strapi数据预存到Gridsome项目

下载插件 npm install @gridsome/source-strapi
在项目中配置插件,就能想数据预存到项目中

image.png

使用Pager Component完成分页功能

image.png

image.png