使用 Nuxt 4 构建现代博客

在这篇文章中，我们将探索如何使用 Nuxt 4 构建一个功能完整的现代博客系统。

为什么选择 Nuxt 4？

Nuxt 4 带来了许多令人兴奋的新特性：

• 更好的性能 - 更快的冷启动和热重载
• 改进的 DX - 更直观的配置和 API
• 原生 TypeScript - 完整的类型支持
• SSR/SSG 灵活切换 - 根据需求选择渲染模式

核心功能

1. Markdown 内容管理

使用 @nuxt/content 模块，我们可以轻松地管理 Markdown 格式的文章：

const articles = await queryContent('/blog')
  .where({ published: { $eq: true } })
  .sort({ date: -1 })
  .find()

2. 响应式设计

结合 TailwindCSS，我们可以快速构建响应式布局：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <ArticleCard v-for="article in articles" :key="article._id" :article="article" />
</div>

3. 暗色模式

通过 @nuxtjs/color-mode 模块实现暗色模式切换：

const colorMode = useColorMode()
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'

总结

Nuxt 4 为现代博客开发提供了强大的基础设施，让我们可以专注于内容创作本身。