拥有一个博客来在互联网上撰写和分享我们的知识对于提高知名度和让我们在我们的领域中被称为某个主题的权威至关重要。 本文将教您如何构建一个博客，其中每篇文章都有动态页面。 目录 先决条件 入门 什么是 Nuxt？ 什么是 Nuxt 内容？ 什么是云？ 使用 Nuxt 创建博客 创建博客笔记 获取帖子 创建动态页面 最后的想法 学到更多 接下来，请查看 的代码库及其存储库和 以供参考。 GitHub 上 演示 先决条件 完成本教程需要以下内容： 云账户。 是免费的 注册 JavaScript 基础知识 熟悉Vue 入门 要开始，请打开终端并运行以下命令： npx create-nuxt-app blog-for-developers 上面的命令将启动命令行界面 (CLI) 提示，允许我们配置项目的各个方面。 现在样板文件已经设置了所有文件和文件夹，让我们运行可以访问的开发服务器 项目内部。 http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS 是一个开源直观的 Vue 框架，它允许我们构建用户界面，使 Web 开发变得简单而强大。 什么是 Nuxt？ 在这个项目的初始设置过程中，我们选择了 Nuxt 内容模块。这个模块让我们可以将我们的代码库用作基于 Git 的无头 CMS，以通过类似 API 的接口访问 markdown、JSON、YAML、XML 甚至 CSV 文件。有了这个模块 ，它会注入 在我们的项目中全局实例以在项目中的任何位置访问它。 什么是 Nuxt 内容？ @nuxt/content $content Cloudinary 是一个用于 Web 和移动应用程序的云服务图像和视频管理工具。借助 Cloudinary，我们可以跨任何浏览器和设备上传、创建和管理数字体验。 什么是云？ 使用 Nuxt 创建博客 在我们使用 Nuxt 内容在 Markdown 中为博客创建内容之前，让我们首先为博客创建包含导航链接和一些文本的登录页面。 在里面 ，我们可以将我们最喜欢的字体添加到 head 部分并使用特定的字体系列，如下所示： 添加字体样式 nuxt.config.js file 在我们编写将使用该字体的 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 > 在上面的代码块中，我们包含了一个 视频源存储在 Cloudinary 中，具有自动播放、循环和静音等属性，可在视频加载时静音。为了获取存储在 Cloudinary 中的媒体，我们将所需的视频上传到媒体库选项卡。之后，复制将附加到 的 . <video> src <video> 此外，我们使用导航标题中的链接引用了 家庭的组成部分 和 我们将创建的路线来查看我们所有的博客。 为了确保我们的页面使用 CSS 进行样式设置，请在项目的根目录下创建一个文件夹， ，并从这个 中包括以下内容。 在里面 文件，更新文件以包含创建的 CSS 文件，内容如下： nuxt-link / /blogs assets/styles/main.css 要点 nuxt.config.js ... ... } export default { css : [ '@/assets/styles/main.css' ], 我们的页面应该是这样的： 创建博客笔记 要构建我们的博客站点，我们需要在 页。首先，创建一个 目录，然后是包含所有降价文件的博客目录。用 markdown 编写所有内容支持许多 markdown 语法标准，例如标题、链接和代码块，以及针对不同编程语言的语法突出显示。 PS：Nuxt 内容利用内容文件夹来存储所有文件。 这是内容目录中的降价文件示例。将以下内容添加到文件中 . /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!  Markdown 文件能够使用前面的概念添加元数据，前面的内容在开头和结尾处用三破折号语法表示。元数据是向读者显示的内容，例如发布时间和博客内容的摘录，是向读者显示的内容。可以包括其他各种属性。 PS：在前面的内容中，它使用了 YAML 语法。 要获取博客页面的帖子，让我们在下面创建一个新路由 .创建一个名为 blogs 的文件夹，并在其中创建 目录的文件，博客。 接下来，复制以下代码并将其添加到 文件以显示渲染的降价文件。 获取帖子 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 > 上面的代码块执行以下操作： ：用于从 Nuxt 生成我们的页面，因为它会静态地为用户生成单个文件。我们通过 存储博客笔记的方法， 函数，以及 方法。 asyncData $content sortBy() fetch : 接受两个参数， （按日期排序）和 desc 属性关于您希望内容如何显示基于最近发布的内容 sortBy() publishOn 为了使每篇博客文章动态化，我们将把它分配给一个 URL，它的位置 阅读更多按钮上的博客标签使用 零件。 /blogs/ <nuxt-link> 从内容目录查看呈现的帖子片段的最后一步是使用 v-for 指令并遍历博客并将每篇文章呈现在卡片中。 渲染帖子 这是博客页面现在的样子： 创建动态页面 现在让我们为每篇博客文章创建页面以具有动态 URL 路由。在 Nuxt 中，为了创建动态页面，我们在 .vue 文件名前附加下划线，以免使 URL 硬编码。 然后我们创建 blogs 目录下的文件并添加以下代码： _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 > 此代码块执行以下操作： ：我们使用内容从目录 blogs 中获取特定文件，使用 route 参数和 slug 将映射到我们的实际文件名 ${route.params.slug} 要将 markdown 渲染为 markdown 文件中定义的实际内容，我们使用 nuxt-content 组件并传递 与整个 目的 document note : 定义样式元素的作用域确保样式仅适用于特定页面 scoped 最后的想法 当您想与更广泛的受众分享您的想法时，创建博客非常棒，而 Nuxt 在本文中为我们提供了一种实现方式。我们仍然可以探索其他功能，以确保我们拥有一个强大的博客网站。 学到更多 Nuxt 内容 Nuxt 文档 试用现场 演示

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

該音頻是用故事的原始語言製作的！

太長; 讀書

Join to Learn About Storytelling for Startups

如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

HackerNoon Mobile

如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

太長; 讀書

People Mentioned

Companies Mentioned

Coin Mentioned

@terieyenike

相關故事