Có một blog để viết và chia sẻ kiến thức của chúng tôi trên internet là điều cần thiết để hiển thị và làm cho chúng tôi được biết đến trong lĩnh vực của chúng tôi như một cơ quan có thẩm quyền về một chủ đề.  Bài viết này sẽ hướng dẫn bạn cách xây dựng một blog có các trang động cho mỗi bài viết.   Mục lục  Điều kiện tiên quyết  Bắt đầu  Nuxt là gì?  Nội dung Nuxt là gì?  Cloudinary là gì?  Tạo Blog bằng Nuxt  Tạo Ghi chú Blog  Tìm nạp các bài đăng  Tạo các trang động  Lời kết  Tìm hiểu thêm  Để làm theo, hãy xem codebase và repo của nó trên   và   để tham khảo. GitHub demo   Điều kiện tiên quyết  Những điều sau đây là bắt buộc để hoàn thành hướng dẫn này:  Tài khoản đám mây.   miễn phí Đăng ký  Kiến thức cơ bản về JavaScript  Quen thuộc với Vue  Bắt đầu  Để bắt đầu, hãy mở thiết bị đầu cuối và chạy lệnh:   npx create-nuxt-app blog-for-developers  Lệnh trên sẽ bắt đầu một dấu nhắc giao diện dòng lệnh (CLI) cho phép chúng ta định cấu hình các khía cạnh khác nhau của dự án của mình.   Bây giờ bảng soạn sẵn đã được thiết lập với tất cả các tệp và thư mục, hãy chạy máy chủ phát triển có thể truy cập trên  bên trong dự án.   http://localhost:3000   # change directory to project folder  cd blog-for-developers  # start the development environment  npm run dev    NuxtJS là một khung công tác Vue trực quan mã nguồn mở cho phép chúng tôi xây dựng giao diện người dùng, giúp cho việc phát triển web trở nên đơn giản và mạnh mẽ. Nuxt là gì?    Trong quá trình thiết lập ban đầu của dự án này, chúng tôi đã chọn mô-đun nội dung Nuxt. Mô-đun này cho phép chúng tôi sử dụng cơ sở mã của mình như một CMS không đầu dựa trên Git để truy cập các tệp markdown, JSON, YAML, XML và thậm chí cả CSV thông qua giao diện giống API. Với mô-đun này  , nó sẽ tiêm  ví dụ trên toàn cầu trong dự án của chúng tôi để truy cập nó ở bất kỳ đâu trong dự án. Nội dung Nuxt là gì?   @nuxt/content   $content    Cloudinary là một công cụ quản lý hình ảnh và video dịch vụ đám mây cho các ứng dụng web và di động. Với Cloudinary, chúng tôi có thể tải lên, tạo và quản lý trải nghiệm kỹ thuật số trên mọi trình duyệt và thiết bị. Cloudinary là gì?   Tạo Blog bằng Nuxt  Trước khi chúng tôi tạo nội dung cho blog trong phần đánh dấu bằng cách sử dụng nội dung Nuxt, trước tiên hãy tạo trang đích cho blog sẽ bao gồm các liên kết điều hướng và một số văn bản.    bên trong  , chúng ta có thể thêm phông chữ yêu thích của mình vào phần đầu và sử dụng một họ phông chữ cụ thể như bên dưới: Thêm kiểu phông chữ   nuxt.config.js file  Khối mã trên sẽ không có hiệu lực trên trang cho đến khi chúng ta viết CSS sẽ sử dụng phông chữ.  Bây giờ, hãy thêm mã sau vào  sẽ bao gồm các liên kết điều hướng và một số văn bản trên trang chủ. Xóa thành phần,  .    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 >  Trong khối mã trên, chúng tôi đã bao gồm một  với nguồn video được lưu trữ trong Cloudinary với các thuộc tính như tự động phát, vòng lặp và tắt tiếng giúp tắt tiếng video khi tải. Để có được phương tiện được lưu trữ trong Cloudinary, chúng tôi tải video mong muốn của mình lên tab thư viện phương tiện. Sau đó, sao chép URL sẽ được đính kèm với  sau đó  .    <video>   src   <video>  Ngoài ra, chúng tôi đã tham chiếu các liên kết trong tiêu đề điều hướng với  thành phần cho cả nhà  và  các tuyến đường mà chúng tôi sẽ tạo để xem tất cả các blog của chúng tôi.  Để đảm bảo trang của chúng tôi được tạo kiểu bằng CSS, hãy tạo một thư mục ở gốc của dự án,  và bao gồm những điều sau từ   chính này.  bên trong  , cập nhật tệp để bao gồm tệp CSS đã tạo với các nội dung sau:    nuxt-link   /   /blogs   assets/styles/main.css ý   nuxt.config.js         ...             ... } export   default  {        css : [ '@/assets/styles/main.css' ],  Đây là trang của chúng tôi sẽ trông như thế nào:   Tạo Ghi chú Blog  Để xây dựng trang blog của chúng tôi, chúng tôi cần có nội dung để hiển thị và hiển thị trên  trang. Đầu tiên, hãy tạo một  và sau đó là thư mục blog sẽ chứa tất cả các tệp đánh dấu. Viết tất cả nội dung trong markdown hỗ trợ rất nhiều tiêu chuẩn cú pháp markdown như tiêu đề, liên kết và khối mã với các cú pháp tô sáng cho các ngôn ngữ lập trình khác nhau.  Tái bút: Nội dung Nuxt sử dụng thư mục nội dung để lưu trữ tất cả các tệp.  Đây là một ví dụ về tệp đánh dấu trong thư mục nội dung. Thêm phần sau vào tệp  .    /blogs   content   content/blogs/egghead.md       title: Egghead         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"] ---         ---     cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg     [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!    Các tệp Markdown có khả năng thêm siêu dữ liệu bằng cách sử dụng khái niệm vấn đề chính được biểu thị bằng cú pháp ba dấu gạch ngang ở điểm bắt đầu và điểm dừng của vấn đề chính. Siêu dữ liệu, là những gì được hiển thị cho độc giả giống như thời gian xuất bản và trích đoạn nội dung blog, là những gì được hiển thị cho độc giả. Các tài sản khác nhau có thể được bao gồm.  Tái bút: Bên trong vấn đề, nó sử dụng cú pháp YAML.    Để tìm nạp các bài đăng cho trang blog, hãy tạo một lộ trình mới trong  . Tạo một thư mục, được gọi là blog và trong đó tạo  tập tin cho thư mục, blog.  Tiếp theo, sao chép và thêm mã sau vào  để hiển thị các tệp đánh dấu đã kết xuất.  Tìm nạp các bài đăng   pages   index.vue   pages/blogs/index.vue       <template>                                                                                                                                                                                                                                                                             </template>                                                                                                                                                                                                                                         // pages/blogs/index.vue 
        < 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 > 
      < 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 >  Khối mã trên thực hiện những việc sau:  : được sử dụng để tạo trang của chúng tôi từ Nuxt vì nó tạo các tệp riêng lẻ một cách tĩnh cho người dùng. Chúng tôi vượt qua trong  phương pháp lưu trữ các ghi chú blog,  chức năng và  phương pháp.   asyncData   $content   sortBy()   fetch  : có hai tham số,  (sắp xếp theo ngày) và các thuộc tính mô tả về cách bạn muốn nội dung xuất hiện dựa trên nội dung được xuất bản gần đây nhất   sortBy()   publishOn  Để làm cho mỗi bài viết blog trở nên động, chúng tôi sẽ gán nó cho một URL, nơi nó  nút blog trên nút Đọc thêm bằng cách sử dụng  thành phần.   /blogs/   <nuxt-link>    Bước cuối cùng để xem đoạn mã của các bài đăng được hiển thị từ thư mục nội dung là sử dụng lệnh v-for và lặp qua các blog và hiển thị từng bài viết trong một thẻ. Kết xuất các bài đăng  Đây là trang blog bây giờ sẽ trông như thế nào:   Tạo các trang động  Bây giờ chúng ta hãy tạo các trang cho mỗi bài đăng trên blog để có các tuyến URL động. Trong Nuxt, để tạo các trang động, chúng tôi thêm dấu gạch dưới trước tên tệp .vue để không làm cho URL bị mã hóa cứng.  Sau đó, chúng tôi tạo ra  tệp trong thư mục blog và thêm mã sau:    _slug.vue       <template>                                                                                                                                                                                                                               </template>                                                                                           // pages/blogs/_slug.vue 
        < 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 > 
      < 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 >  Khối mã này thực hiện những việc sau:  : Chúng tôi sử dụng nội dung để tìm nạp một tệp cụ thể từ các blog thư mục bằng cách sử dụng tham số route và slug sẽ ánh xạ đến tên tệp thực của chúng tôi   ${route.params.slug}  Để hiển thị đánh dấu dưới dạng nội dung thực tế được xác định trong tệp đánh dấu, chúng tôi sử dụng thành phần nội dung nuxt và chuyển phần hỗ trợ của  với toàn bộ  sự vật   document   note  : Xác định phạm vi cho phần tử kiểu đảm bảo rằng kiểu chỉ áp dụng cho một trang cụ thể   scoped  Lời kết  Việc tạo blog là một điều tuyệt vời khi bạn muốn chia sẻ suy nghĩ của mình với nhiều đối tượng hơn và Nuxt đã cung cấp cho chúng tôi một cách để làm điều đó trong bài viết này. Vẫn còn những tính năng khác mà chúng tôi vẫn có thể khám phá để đảm bảo rằng chúng tôi có một trang web blog mạnh mẽ.   Tìm hiểu thêm   Nội dung Nuxt   Tài liệu Nuxt  Dùng thử   trực tiếp bản demo

Dash

Fetch

Instagram

NuxtJS

Target

Twitter

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary

Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

581 Stories To Learn About Non Fiction

287 Stories To Learn About Blockchain Development

72 Stories To Learn About The Essays Of Adam Smith

72 Stories To Learn About Adam Smith

581 Stories To Learn About Non Fiction

287 Stories To Learn About Blockchain Development

72 Stories To Learn About The Essays Of Adam Smith

72 Stories To Learn About Adam Smith

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps