1. 首页
  2. 文章中心
  3. 前端

8.4.2 静态站点生成什么是静态网站生成器好处常见的静态网站生成器JAMStack静态应用的使用场景Gridsome学习建议项目配置Pages加载外部数据在页面中使用外部数据使用模板创建项目使用本地md文件当做数据来源strapi介绍Gridsome用strapi的数据分页展示文章详情处理markdown文章标签strapi里使用single typesGridsome环境设置Vercel自动部署

157 阅读 0 评论
我是靠谱客的博主 土豪红牛，这篇文章主要介绍8.4.2 静态站点生成什么是静态网站生成器好处常见的静态网站生成器JAMStack静态应用的使用场景Gridsome学习建议项目配置Pages加载外部数据在页面中使用外部数据使用模板创建项目使用本地md文件当做数据来源strapi介绍Gridsome用strapi的数据分页展示文章详情处理markdown文章标签strapi里使用single typesGridsome环境设置Vercel自动部署，现在分享给大家，希望可以做个参考。

本文为拉勾网大前端高薪训练营第一期笔记

什么是静态网站生成器

  • 静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具
  • 这个功能也叫预渲染
  • 生成的网站不需要类似PHP这样的服务器
  • 只需要放到支持静态资源的Web Server或CDN上即可运行

好处

  • 省钱
    • 不需要专业服务器，只要能托管静态文件的空间即可
  • 快速
    • 不经过后端服务器的处理，只传输内容
  • 安全
    • 没有后端程序的执行，自然会更安全

常见的静态网站生成器

  • Jekyll (Ruby)
  • Hexo (Node)
  • Hugo (Golang)
  • Gatsby (Node/React)
  • Gridsome (Node/Vue)
  • 另外Next.js，Nuxt.js也能生成静态网站，但是它们更多被认为是SSR（服务端渲染）框架。

JAMStack

  • 这类静态网站生成器还有个漂亮的名字叫JAMStack
  • JAMStack的JAM是JavaScript、API和Markup的首字母组合
  • 本质上是一种胖前端，通过调用各种API来实现更多的功能
  • 其实也是一种前后端的模式，只不过离得比较开，甚至前后端来自多个不同的厂商

静态应用的使用场景

  • 不适合有大量路由页面的应用
    • 如果站点有成百上千条路由页面，那预渲染将非常缓慢，当然每次更新只需要做一次，但是可能要花一些时间，大多数人不会最终获得数千条静态路由页面，而只是以防万一
  • 不适合有大量动态内容的应用
    • 如果渲染路线中包含特定于用户查看其内容或者其他动态源的内容，则应确保您具有可以显示的占位符组件，直到动态内容加载到客户端为止，否则可能有点怪异

Gridsome学习建议

需要有一定的Vue基础

项目配置

gridsome.config.js

https://gridsome.org/docs/config/

复制代码
1
2
3
4
5
6
module.exports = {
siteName: '拉勾教育',
siteDescription: '大前端',
plugins: []
}

siteName是网页title "a - b"这里的b，同时也是header左上角的名称

siteDescription是网页meta description

Pages

https://gridsome.org/docs/pages/

两种选项创建页面，一种是文件系统

  • src/pages/Index.vue becomes /(The frontpage)
  • src/pages/AboutUs.vue becomes /about-us/
  • src/pages/about/Vision.vue becomes /about/vision/
  • src/pages/blog/Index.vue becomes /blog/

动态路由式

  • src/pages/user/[id].vue becomes /user/:id.
  • src/pages/user/[id]/settings.vue becomes /user/:id/settings.

一种是编程式

gridsome.server.js

复制代码
1
2
3
4
5
6
7
8
9
module.exports = function (api) {
api.createPages(({ createPage }) => {
createPage({
path: '/my-page',
component: './src/templates/MyPage.vue'
})
})
}

动态路由例子

复制代码
1
2
3
4
5
6
7
8
9
module.exports = function (api) {
api.createPages(({ createPage }) => {
createPage({
path: '/user/:id(\d+)',
component: './src/templates/User.vue'
})
})
}

另外可以配置动态路由

https://gridsome.org/docs/dynamic-routing/

每页的meta info，gridsome通过vue-meta配置的

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<h1>Hello, world!</h1>
</div>
</template>
<script>
export default {
metaInfo: {
title: 'Hello, world!',
meta: [
{ name: 'author', content: 'John Doe' }
]
}
}
</script>

自己定义的404页面放这个路径

src/pages/404.vue

模拟数据接口 jsonplaceholder.typicode.com

加载外部数据

Data Store API添加集合

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// gridsome.server.js
const axios = require('axios')
module.exports = function (api) {
api.loadSource(async actions => {
const collection = actions.addCollection('Post')
const { data } = await axios.get('<https://api.example.com/posts>')
for (const item of data) {
collection.addNode({
id: item.id,
title: item.title,
content: item.content
})
}
})
}

然后检查的方式是打开

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//localhost:8080/___explore
//左边输入
query {
post (id: 1) {
id
title
content
}
}
//或者查看所有文字
query {
allPost {
edges {
node {
id
title
}
}
}
}
//具体结构可以看右侧的docs

在页面中使用外部数据

https://gridsome.org/docs/querying-data/

举例

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
<div v-for="edge in $page.posts.edges" :key="edge.node.id">
<g-link :to="edge.node.path">{{ edge.node.title }}</g-link>
</div>
</div>
</template>
<page-query>
query {
posts: allWordPressPost {
edges {
node {
id
title
path
}
}
}
}
</page-query>

想看静态外部数据的话，得npm run build看index.html才能看出效果

使用模板

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//gridsome.config.js
module.exports = {
templates: {
Post: {
path: '/posts/:id',
components: './src/templates/Post.vue'
}
}
}
//templates/Post.vue
// ID!表示不能为空
<template>
<layout>
<div>
<h1>{{ $page.post.title}}</h1>
<div>{{$page.post.content}}
</div>
</layout>
</template>
<page-query>
query ($id: ID!) {
post (id: $id) {
id
title
content
}
}
</page-query>
<script>
export default {
name: '',
metaInfo() {
return {
title: this.$page.post.title
}
}
}
</script>
<style>
</style>

创建项目

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
gridsome create blog-with-gridsome
npm run develop
fork https://github.com/StartBootstrap/startbootstrap-clean-blog
git clone https://github.com/<name>/startbootstrap-clean-blog --depth=1
npm i bootstrap @fortawesome/fontawesome-free
/src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import './assets/css/index.css'
/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");
copy startbootstrap-clean-blog/css/clean-blog.css content to /src/assets/css/index.css
copy startbootstrap-clean-blog/index.html
page-header/main-content
to src/pages/index.vue template
copy startbootstrap-clean-blog/img to static
add leading / to "/img/home-bg.jpg" in index.vue
copy src/pages/index.vue navigation/footer to src/layouts/Default.vue template
navigation 和 footer 中继加<slot/>
给pages/index.vue 加<template><Layout></Layout></template>
Layout
删除page-query和styles
add pages/Post.vue
copy startbootstrap-clean-blog/post.html page-header/post-content to Post.vue
copy startbootstrap-clean-blog/about.html page-header/about-content to About.vue
add pages/Contact.vue
copy startbootstrap-clean-blog/contact.html page-header/main-content to About.vue

使用本地md文件当做数据来源

https://gridsome.org/docs/fetching-data/#markdown

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
//gridsome.config.js
module.exports = {
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'blog/**/*.md',
typeName: 'Post',
},
},
],
};

strapi介绍

strapi CMS系统

https://strapi.io

跑起来可以通过页面上的内容类型生成器来添加类型

可以创建用户，设置权限，并且登陆后获取jwt token，header里放Authorization: Bearer

可以设置role，然后给用户关联role，这样做权限控制可以方便控制哪种role可以创建更新，权限控制很自由。

通过graphQL访问Strapi

https://strapi.io/documentation/3.0.0-beta.x/plugins/graphql.html

复制代码
1
2
yarn strapi install graphql

可以创建tag这种数据类型，然后和post多对多关联

Gridsome用strapi的数据

安装@gridsome/source-strapi插件

分页

https://gridsome.org/docs/pagination/

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//gridsome built-in pager component example usage
<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>

展示文章详情

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//gridsome.config.js
module.exports = {
siteName: '拉勾教育',
siteDescription: '大前端',
plugins: [
{
use: 'gridsome-source-strapi',
options: {
apiURL: `http://localhost:1337`,
queryLimit: 1000, // Defaults to 100
contentTypes: [`post`],
// typeName: 'Strapi',
// plural: true, // pluralizes names of Content Types in API
// Possibility to login with a Strapi user, when content types are not publicly available (optional).
// loginData: {
// identifier: '',
// password: '',
// },
}
}
],
templates: {
StrapiPost: [ //因为typeName+contentTypes
{
path: '/posts/:id',
component: './src/templates/Post.vue'
}
]
}
}

处理markdown

读来数据以后用markdown-it处理一下，methods里增加一个mdToHtml的方法，最后v-html的时候调用一下

文章标签

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//gridsome.config.js
templates: {
StrapiTag: [
{
path: '/tags/:id',
component: './src/templates/Tag.vue'
}
]
}
//Tag.vue
//取数据部分
<page-query>
query ($id: ID!){
strapiTag (id: $id){
id
title
posts {
id
title
}
}
}
</page-query>

strapi里使用single types

唯一的数据类型，比如网站的主标题、副标题、封面

内容类型生成器里single type → create new single type

gridsome.config.js里plugins source-strapi singleTypes里设置你创建的类型

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
query {
allStrapiGeneral {
edges {
node {
id
title
subtitle
cover {
url
}
}
}
}
}
computed : {
general () {
return this.$page.general.edges[0].node
}
}

Gridsome环境设置

https://gridsome.org/docs/environment-variables/

创建两个文件

.env.development

.env.production

复制代码
1
2
3
4
GRIDSOME_API_URL=https://api.example.com
DB_USER=root
DB_PASS=s1mpl3

使用的时候

process.env.DB_USER

另外css里的url可以通过以下方式拿到

复制代码
1
2
3
4
5
6
7
8
9
10
11
//src/main.js
export default function (Vue, {router, head, isClient}) {
Vue.mixin({
data() {
return {
GRIDSOME_API_URL: ProcessingInstruction.env.GRIDSOME_API_URL
}
}
})
}

Vercel自动部署

https://vercel.com/

hook设置

在settings/git integration里

deploy hooks/create hook

hook name: deploy

git branch name: master

复制生成的钩子链接

然后去strapi设置里webhooks里添加

名称:deploy

请求地址:刚才复制的链接

事件挑需要的选

最后

以上就是土豪红牛最近收集整理的关于8.4.2 静态站点生成什么是静态网站生成器好处常见的静态网站生成器JAMStack静态应用的使用场景Gridsome学习建议项目配置Pages加载外部数据在页面中使用外部数据使用模板创建项目使用本地md文件当做数据来源strapi介绍Gridsome用strapi的数据分页展示文章详情处理markdown文章标签strapi里使用single typesGridsome环境设置Vercel自动部署的全部内容，更多相关8.4.2内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(104)

相关文章

大数据「偏见」会让我们变蠢吗
大数据「偏见」会让我们变蠢吗
godaddy 域名供应商的 _domainconnect 默认记录
godaddy 域名供应商的 _domainconnect 默认记录
哈佛商业评论文章－－让用户自愿为你做贡献
哈佛商业评论文章－－让用户自愿为你做贡献
大数据“偏见”会让我们变蠢吗
大数据“偏见”会让我们变蠢吗
8.4.2 静态站点生成什么是静态网站生成器好处常见的静态网站生成器JAMStack静态应用的使用场景Gridsome学习建议项目配置Pages加载外部数据在页面中使用外部数据使用模板创建项目使用本地md文件当做数据来源strapi介绍Gridsome用strapi的数据分页展示文章详情处理markdown文章标签strapi里使用single typesGridsome环境设置Vercel自动部署
8.4.2 静态站点生成什么是静态网站生成器好处常见的静态网站生成器JAMStack静态应用的使用场景Gridsome学习建议项目配置Pages加载外部数据在页面中使用外部数据使用模板创建项目使用本地md文件当做数据来源strapi介绍Gridsome用strapi的数据分页展示文章详情处理markdown文章标签strapi里使用single typesGridsome环境设置Vercel自动部署
Nuxtjs 学习笔记 --- 01 安装Nuxtjs 学习笔记 — 01 安装
Nuxtjs 学习笔记 --- 01 安装Nuxtjs 学习笔记 — 01 安装
程序员的电子书下载一个IT电子书下载的网站
程序员的电子书下载一个IT电子书下载的网站
Vue中的父组件和子组件，以及两者通信
Vue中的父组件和子组件，以及两者通信

评论列表共有 0 条评论

立即
投稿
返回
顶部