5,557 讀數

如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

经过 Teri14m2022/05/21

太長; 讀書

本文将教您如何构建一个博客，其中每篇文章都有动态页面。它将使用 Nuxt 内容模块通过类似 API 的接口访问 markdown、YAML、XML 甚至 CSV 文件。借助 Cloudinary，我们可以跨任何浏览器和设备上传、创建和管理数字体验。完成本教程需要以下条件： Cloudinary 帐户、JavaScript 知识和熟悉 Vue 框架。使用 Nuxt 创建博客需要框架的基本知识和对 Vue 的熟悉。

People Mentioned

Companies Mentioned

Coin Mentioned

featured image - 如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

拥有一个博客来在互联网上撰写和分享我们的知识对于提高知名度和让我们在我们的领域中被称为某个主题的权威至关重要。

本文将教您如何构建一个博客，其中每篇文章都有动态页面。

先决条件

完成本教程需要以下内容：

云账户。注册是免费的
JavaScript 基础知识
熟悉Vue

入门

要开始，请打开终端并运行以下命令：

 npx create-nuxt-app blog-for-developers

上面的命令将启动命令行界面 (CLI) 提示，允许我们配置项目的各个方面。

现在样板文件已经设置了所有文件和文件夹，让我们运行可以访问的开发服务器

http://localhost:3000

项目内部。

 # change directory to project folder
 cd blog-for-developers

 # start the development environment
 npm run dev

什么是 Nuxt？
NuxtJS 是一个开源直观的 Vue 框架，它允许我们构建用户界面，使 Web 开发变得简单而强大。

什么是 Nuxt 内容？
在这个项目的初始设置过程中，我们选择了 Nuxt 内容模块。这个模块让我们可以将我们的代码库用作基于 Git 的无头 CMS，以通过类似 API 的接口访问 markdown、JSON、YAML、XML 甚至 CSV 文件。有了这个模块

@nuxt/content

，它会注入

$content

在我们的项目中全局实例以在项目中的任何位置访问它。

什么是云？
Cloudinary 是一个用于 Web 和移动应用程序的云服务图像和视频管理工具。借助 Cloudinary，我们可以跨任何浏览器和设备上传、创建和管理数字体验。

使用 Nuxt 创建博客

在我们使用 Nuxt 内容在 Markdown 中为博客创建内容之前，让我们首先为博客创建包含导航链接和一些文本的登录页面。

添加字体样式
在里面

nuxt.config.js file

，我们可以将我们最喜欢的字体添加到 head 部分并使用特定的字体系列，如下所示：

在我们编写将使用该字体的 CSS 之前，上面的代码块不会对页面产生任何影响。

现在，将以下代码添加到

pages/index.vue

这将包括导航链接和主页上的一些文本。移除组件，

 <Tutorial />

 <template>    <section class =" showcase ">      < header >        < h2 class =" logo ">          < nuxt - link to ="/"> ecosurf </ nuxt - link >        </ h2 >        < nav class =" nav desktop ">          < ul >            < li class =" nav__list ">              < nuxt - link to ="/ blogs "> Stories </ nuxt - link >            </ li >          </ ul >        </ nav >      </ header >      < video
        autoplay
        loop muted
        src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video >      < div class =" overlay "></ div >      < div class =" text ">        < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 >        < h3 data - type =" uppercase "> Exploring The World </ h3 >        < p >          View of the tropical island landscape, from a hill with houses, palm
          trees and many trees, and in the distance the hills that surround the
          sea, on a sunny day .        </ p >      </ div >      < ul class =" social ">        < li >          < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img
            alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a >        </ li >        < li >          < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img
            alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a >        </ li >      </ ul >    </ section > </ template >

在上面的代码块中，我们包含了一个

<video>

视频源存储在 Cloudinary 中，具有自动播放、循环和静音等属性，可在视频加载时静音。为了获取存储在 Cloudinary 中的媒体，我们将所需的视频上传到媒体库选项卡。之后，复制将附加到

src

的

<video>

此外，我们使用导航标题中的链接引用了

nuxt-link

家庭的组成部分

和

/blogs

我们将创建的路线来查看我们所有的博客。

为了确保我们的页面使用 CSS 进行样式设置，请在项目的根目录下创建一个文件夹，

 assets/styles/main.css

，并从这个要点中包括以下内容。

在里面

nuxt.config.js

文件，更新文件以包含创建的 CSS 文件，内容如下：

 export default {      ...      css : [ '@/assets/styles/main.css' ],      ... }

我们的页面应该是这样的：

创建博客笔记

要构建我们的博客站点，我们需要在

/blogs

页。首先，创建一个

content

目录，然后是包含所有降价文件的博客目录。用 markdown 编写所有内容支持许多 markdown 语法标准，例如标题、链接和代码块，以及针对不同编程语言的语法突出显示。

PS：Nuxt 内容利用内容文件夹来存储所有文件。

这是内容目录中的降价文件示例。将以下内容添加到文件中

content/blogs/egghead.md

 ---    title: Egghead    cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg    author: Teri Eyenike    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.    date: May 2, 2021    publishOn: 2021-05-02T00:00:00    tags: ["learning", "platform"] ---    [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills! <!-- more content -->

Markdown 文件能够使用前面的概念添加元数据，前面的内容在开头和结尾处用三破折号语法表示。元数据是向读者显示的内容，例如发布时间和博客内容的摘录，是向读者显示的内容。可以包括其他各种属性。

PS：在前面的内容中，它使用了 YAML 语法。

获取帖子
要获取博客页面的帖子，让我们在下面创建一个新路由

pages

.创建一个名为 blogs 的文件夹，并在其中创建

index.vue

目录的文件，博客。

接下来，复制以下代码并将其添加到

pages/blogs/index.vue

文件以显示渲染的降价文件。

 // pages/blogs/index.vue
    <template>      < main >
        < header >
          < h2 class = "logo" >
            < nuxt-link to = "/" > ecosurf </ nuxt-link >
          </ h2 >
          < nav class = "nav desktop" >
            < ul >
              < li class = "nav__list" >
                < nuxt-link to = "/blogs" > Stories </ nuxt-link >
              </ li >
            </ ul >
          </ nav >
        </ header >
        < div class = "container section" >
          < div class = "container__grid" >
            < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" >
              < img :src = "blog.cover_image"
                   alt = "blog photographs" />
              < div class = "pad__card" >
                < div class = "author" >
                  < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span >
                  < p > {{ blog.date }} </ p >
                </ div >
                < h2 class = "title" > {{ blog.title }} </ h2 >
                < p > {{                    blog.description.substring(0, 150)                  }}... </ p >
                < button >
                  < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link >
                </ button >
              </ div >
            </ div >
          </ div >
        </ div >
      </ main >
    </template>    < script >
    export default {      async asyncData ( {$content} ) {        const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch()        return {          blogs        }      },      head ( ) {        return {          title : "Read interesting stories as a nomad" ,          meta : [            {              hid : 'description' ,              name : 'description' ,              content : 'Daily and juicy content as you learn, work, and relax. WFH'
            }          ]        }      }    }    </ script >
    < style scoped >
    header {      background : #111111 ;      position : unset;    }    .container {      width : 85% ;      max-width : 75rem ;      margin -inline: auto;    }    .section {      padding : 3em 0 ;    }    .container__grid {      display : grid;      gap: 2em ;      grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr));    }    .card {      background : #f0f7f4 ;      box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 );      border-radius : 5px ;    }    .card img {      object-fit : cover;      border-top-left-radius : 5px ;      border-top-right-radius : 5px ;      width : 100%
    }    .pad__card {      padding : 2em ;    }    .author {      display : flex;      align-items : center;    }    .author , .title {      margin-bottom : 1em ;    }    .author span {      margin : 0 0.3em ;    }    .author__name {      text-transform : capitalize;    }    button {      border : unset;      padding : 1em 2em ;      margin-top : 2em ;      background : #0D5159 ;      font-weight : 700 ;      cursor : pointer;    }    button a {      color : #fff ;    }    </ style >

上面的代码块执行以下操作：

```
 asyncData
```
：用于从 Nuxt 生成我们的页面，因为它会静态地为用户生成单个文件。我们通过
```
$content
```
存储博客笔记的方法，
```
 sortBy()
```
函数，以及
```
fetch
```
方法。

```
 sortBy()
```
: 接受两个参数，
```
 publishOn
```
（按日期排序）和 desc 属性关于您希望内容如何显示基于最近发布的内容

为了使每篇博客文章动态化，我们将把它分配给一个 URL，它的位置
```
/blogs/
```
阅读更多按钮上的博客标签使用
```
<nuxt-link>
```
零件。

渲染帖子
从内容目录查看呈现的帖子片段的最后一步是使用 v-for 指令并遍历博客并将每篇文章呈现在卡片中。

这是博客页面现在的样子：

创建动态页面

现在让我们为每篇博客文章创建页面以具有动态 URL 路由。在 Nuxt 中，为了创建动态页面，我们在 .vue 文件名前附加下划线，以免使 URL 硬编码。

然后我们创建

_slug.vue

blogs 目录下的文件并添加以下代码：

 // pages/blogs/_slug.vue
    <template>      < main >
        < header >
          < h2 class = "logo" >
            < nuxt-link to = "/" > ecosurf </ nuxt-link >
          </ h2 >
          < nav class = "nav desktop" >
            < ul >
              < li class = "nav__list" >
                < nuxt-link to = "/blogs" > Stories </ nuxt-link >
              </ li >
            </ ul >
          </ nav >
        </ header >
        < div class = "container" >
          < div class = "return" >
            < nuxt-link to = "/" >
              < img alt = "back to home" src = "/home.png" />
            </ nuxt-link >
            < span > / </ span >
            < nuxt-link to = "/blogs" > Blog </ nuxt-link >
            < span > / </ span >
            < p > {{ note.title.substring(0, 15) }}... </ p >
          </ div >
          < section >
            < h1 > {{ note.title }} </ h1 >
            < nuxt-content :document = "note" cla />
          </ section >
        </ div >
      </ main >
    </template>    < script >
    export default {      async asyncData ( {$content, route} ) {        const note = await $content( `blogs/ ${route.params.slug} ` ).fetch()        return {          note        }      }    }    </ script >
    < style scoped >
    header {      background : #111111 ;      position : unset;    }    .container {      width : 85% ;      max-width : 75rem ;      margin -inline: auto;    }    section {      padding-bottom : 2em ;    }    .return {      display : flex;      margin : 1.5em 0 ;    }    .return img {      width : 20px ;      height : 20px ;    }    .return span {      margin : 0 1em ;    }    h1 {      margin-bottom : 1em
    }    </ style >