L3F.WIN

Github及Hexo的使用

0%

使用Nuxt.js与Contentful创建简单的可数据库管理博客

发表于 更新于

使用Nuxt.js与Contentful创建简单的可数据库管理博客

让我们体验一下时下较流行的框架 Nuxt.js + Contentful的组合方式来创建个人博客。
本文将向您展示如何设置Contentful及Nuxt.js项目，以及Contentful对内容的管理方法

涉及环境

Node V11.0.0
Npm V6.4.1
Nuxt V2.3.4
Contentful V0.17.1

Nuxt.js入门

利用npm进行安装Vue

1
npm install -g vue-cli

安装好后，你就可以使用 nuxt/starter模板来初始化新项目

1
vue init nuxt/starter <project-name>

完成后输入 npm install，等其结束后，可以输入npm run dev来运行Nuxt的默认项目了。
查看http://localhost:3000

安装Contentful模型

你可以利用npm进行安装

1
npm i -g contentful-cli

安装完毕后，你就可以去申请一个Contentful的账号了，网址
你完全可以使用自己的Github账号直接登陆，非常方便
使用以下命令连接你的Contentful账号，期间会叫你粘贴你的access token

1
contentful login

好了，现在开始创建我们的第一个Contentful的数据空间吧

1
contentful space create --name 'My Blog'

执行完成后，你会在你的Contentful管理面板里看见新创建的空间，注意免费版最多创建两个数据空间
在自己的环境下选择相应的空间

1
2
3
4
5
6
7
8
$ contentful space use
? Please select a space:
  ...
❯ My Blog (xxxxxxxxx)
$ contentful space seed --template blog

$ contentful space accesstoken create --name my-blog
✨  Successfully created access token nuxt (1234567890xxxxxxxxxxx)

这样就将Contentful和你的Nuxt.js关联在了一起。

整合Contentful到Nuxt.js

安装Contentful CDA Javascript SDK

1
npm install --save contentful

Nuxt.js提供了插件功能，可以在服务器（静态预渲染）和客户端（动态重新渲染）上使用自定义代码。 幸运的是，JavaScript SDK基于axios，可以在Node.js和浏览器上下文中使用它。
要使用它，请在plugins目录中创建一个名为contentful.js的新文件。 此文件的目标是创建具有预定义环境变量的SDK客户端，我们将在引导过程中设置这些变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ./plugins/contentful.js

const contentful = require('contentful')
// use default environment config for convenience
// these will be set via `env` property in nuxt.config.js
const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

// export `createClient` to use it in page components
module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

接着我们在根目录还要创建一个.contentful.json文件
你需要准备的是你的Contentful的space ID(CTF_SPACE_ID) 和 access token(CTF_CDA_ACCESS_TOKEN)
其他默认即可

1
2
3
4
5
6
7
//.contentful.json
{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
}

并修改nuxt.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
// ./nuxt.config.js
const config = require('./.contentful.json')

module.exports = {
  // ...
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ...
}

不像深究的可以直接照抄以上内容。

获取数据并渲染页面

修改pages/index.vue

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
42
<template>
  <div>
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.fields.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()

  export default {
    // `env` is available in the context object
    asyncData ({env}) {
      return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          'sys.id': env.CTF_PERSON_ID
        }),
        // fetch all blog posts sorted by creation date
        client.getEntries({
          'content_type': env.CTF_BLOG_POST_TYPE_ID,
          order: '-sys.createdAt'
        })
      ]).then(([entries, posts]) => {
        // return data that should be available
        // in the template
        return {
          person: entries.items[0],
          posts: posts.items
        }
      }).catch(console.error)
    }
  }
</script>

这样我们就完成了全部的过程，快试试看到Contentful下创建自己的内容。不用重启Nuxt你就可以看到新内容了

需要金泰页面的，输入以下命令，默认的情况，这些页面会写入根目录下的dist文件夹内

1
npm run generate

创建自定义页面

在pages目录下创建test.vue文件

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
42
43
44
45
46
<template>
  <div>
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the JavaScript SSR Blog.
          </h1>
          <h2 class="subtitle">
            Hope you find something you like.
          </h2>
        </div>
      </div>
    </section>
    <Test :pageCont="pageCont"></Test>
  </div>
</template>

<script>
  import Test from '~/components/Test.vue'  //引入Test.vue文件
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()
  export default {
    head: {
      title: 'Test'
    },
    components: {
      Test
    },
    data () {
      return {
        pageCont: []
      }
    },
    asyncData ({ env }) {
      return client.getEntries({
        'content_type': env.CTF_BLOG_POST_TYPE_ID[1]
      }).then(entries => {
        return {
          pageCont: entries.items
        }
      }).catch(console.error)
    }
  }
</script>

在components目录下创建Test.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <section class="section container">
    <div class="columns is-multiline">
      <p>{{pageCont}}</p><!--可以产看所有节点内容，便于选择。完成后此处删除-->
      <div v-for="p in pageCont">
        <b>{{p.fields.id}}</b>
        {{p.fields.content_t}}
      </div>
    </div>
  </section>
</template>
<script>
  export default {
    props: ['pageCont']
  }
</script>

修改.contentful.json文件

1
2
3
4
5
6
{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": ["blogPost", "pageCont"],
  "CTF_SPACE_ID": "YOUR SPACE ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR ACCESS KEY"
}

其他页面注意修改Javascript中的

1
'content_type': env.CTF_BLOG_POST_TYPE_ID

这个部分，因为追加了Content Type，所以此处变为数组形式。

如果还想修改头部导航的话，可以添加相应的模板文件

Contentful 管理

  1. 以github账户登录Contentful
  2. Content model下我们可以创建新的Content Type
    a. Add Content type 输入相应的 name， Api Identifier, Description
    b. 创建相应的Fields，根据自己的需求选择相应的Text或者数字等等。
  3. Content选项卡下，我们可以创建我们响应的内容
    a. Add entry会弹出下拉菜单，选择我们刚才制作的Content Type
    b. 文本编辑状态，按照我们指定的规则，输入相应的内容。
    c. 在Content列表下，我们可以看到刚才制作的内容。