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

Book a call with @terieyenike

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

Making security fun one episode at a time

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

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

People Mentioned

Companies Mentioned

Coin Mentioned

Teri Eyenike

About Author

chuyên mục

Languages

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

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

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

People Mentioned

Companies Mentioned

Coin Mentioned

About Author

chuyên mục

Languages

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

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