Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法

 <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 >

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

 ---    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 -->

 // 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 >

 // 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 >