5,547 讀數

如何使用 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 构建自己的博客

持有一款新浪博客来在车联在网上写和分亨各位的基本常识对待提高自己出名度和让各位在各位的业务领域中被誉为个别主题词的信赖至关关键。这篇将教您怎样才能勾勒一些最新原创文章，之中每章原创文章都gif动态窗口。

先决条件

顺利完成本教程视频都要以內项目：

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

入门

要开启，请打开浏览器华为设备并运转下面的强制性：

 npx create-nuxt-app blog-for-developers

上方的系统命令温馨提示符将开机系统命令温馨提示符行程序界面 (CLI) 温馨提示，能我门分配创业项目的有几个几个方面。

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

//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: //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: 2022-05-02T00:00:00    tags: ["learning", "platform"] ---    [ Egghead ]( //www.egghead.io ) is a great platform for developers to enhance their skills! <!-- more content -->

Markdown zip文件要的使用上的概念呢添加图片元统计资料，上的内部在开头好的开头和好的开头处用三破折号词法说道。元统计资料是向朋友显现的内部，比如发表时光和搜狐博客内部的摘录，是向朋友显现的内部。需要主要包括另一各式屬性。 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 >

此代码是什么块实施以內的操作：