Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary by@terieyenike
2,947 lượt đọc

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

2022/05/21
14 phút
từ tác giả @terieyenike 2,947 lượt đọc
tldt arrow
VI
Read on Terminal Reader

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

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. Nó sẽ sử dụng mô-đun nội dung Nuxt để truy cập các tệp markdown, YAML, XML và thậm chí cả CSV thông qua giao diện giống API. 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ị. 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 Cloudinary, kiến thức về JavaScript và quen thuộc với khung Vue. Tạo blog với Nuxt yêu cầu kiến thức cơ bản về framework và quen thuộc với Vue.

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary
Teri Eyenike HackerNoon profile picture

@terieyenike

Teri Eyenike

I am a frontend developer with a particular interest in...

Tìm hiểu thêm
LEARN MORE ABOUT @TERIEYENIKE'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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 GitHubdemo để tham khảo.

Đ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. Đăng ký miễn phí
  • 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.

image

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

 http://localhost:3000
bên trong dự án.

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

# start the development environment
npm run dev

Nuxt là gì?
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ẽ.

Nội dung 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

 @nuxt/content
, nó sẽ tiêm
 $content
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.

Cloudinary là gì?
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ị.

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.

Thêm kiểu phông chữ
bên trong

 nuxt.config.js file
, 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:

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

 pages/index.vue
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,
 <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

 <video>
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
 src
sau đó
 <video>
.

image

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

 nuxt-link
thành phần cho cả nhà
 /
 /blogs
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,
 assets/styles/main.css
và bao gồm những điều sau từ chính này.

bên trong
 nuxt.config.js
, cập nhật tệp để bao gồm tệp CSS đã tạo với các nội dung sau:

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

Đây là trang của chúng tôi sẽ trông như thế nào:

image

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

 /blogs
trang. Đầu tiên, hãy tạo một
 content
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
 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 -->

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
Để tìm nạp các bài đăng cho trang blog, hãy tạo một lộ trình mới trong

 pages
. Tạo một thư mục, được gọi là blog và trong đó tạo
 index.vue
tập tin cho thư mục, blog.

Tiếp theo, sao chép và thêm mã sau vào
 pages/blogs/index.vue
để hiển thị các tệp đánh dấu đã kết xuất.

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

Khối mã trên thực hiện những việc sau:

  •  asyncData
    : đượ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
     $content
    phương pháp lưu trữ các ghi chú blog,
     sortBy()
    chức năng và
     fetch
    phương pháp.
  •  sortBy()
    : có hai tham số,
     publishOn
    (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
  • Để 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ó
     /blogs/
    nút blog trên nút Đọc thêm bằng cách sử dụng
     <nuxt-link>
    thành phần.

Kết xuất các bài đăng
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ẻ.

Đây là trang blog bây giờ sẽ trông như thế nào:

image

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

 _slug.vue
tệp trong thư mục blog và thêm mã sau:

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

Khối mã này thực hiện những việc sau:

  •  ${route.params.slug}
    : 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
  • Để 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
     document
    với toàn bộ
     note
    sự vật
  •  scoped
    : 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ể

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

Dùng thử bản demo trực tiếp

NHỮNG BÀI VIẾT LIÊN QUAN

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa