---
title: "آشنایی با Nuxt Content"
description: "یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارک‌داون، هایلایت کد و کامپوننت‌های Vue پشتیبانی می‌کند."
date: "2024-11-09"
tags: ["nuxt", "vue", "آموزش", "فارسی"]
author: "علی ارغیانی"
draft: false
---

# آشنایی با Nuxt Content

Nuxt Content یک سیستم مدیریت محتوای فایل‌محور قدرتمند است که به شما امکان می‌دهد محتوای خود را به صورت Markdown، YAML، CSV یا JSON بنویسید و با یک API شبیه MongoDB آن را جستجو کنید.

## چرا Nuxt Content؟

Nuxt Content مزایای متعددی برای برنامه‌های محتوا-محور ارائه می‌دهد:

- **فایل-محور**: محتوا را در فایل‌های Markdown با کنترل نسخه Git بنویسید
- **Type-safe**: پشتیبانی کامل از TypeScript با تایپ‌های خودکار
- **جستجوی قدرتمند**: API شبیه MongoDB برای فیلتر و مرتب‌سازی
- **هایلایت کد**: هایلایت خودکار کد با Shiki
- **سینتکس MDC**: استفاده از کامپوننت‌های Vue مستقیماً در Markdown

## نصب

نصب Nuxt Content بسیار ساده است:

```bash
pnpm add @nuxt/content
```

سپس آن را به `nuxt.config.ts` اضافه کنید:

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})
```

## ایجاد محتوا

یک دایرکتوری `content/` در ریشه پروژه خود ایجاد کنید و شروع به نوشتن فایل‌های Markdown کنید:

```markdown
---
title: "اولین پست من"
description: "این اولین پست وبلاگ من است"
date: "2024-11-09"
---

# سلام دنیا

این اولین پست من با استفاده از Nuxt Content است!
```

## جستجوی محتوا

از composable `queryContent()` برای دریافت محتوا استفاده کنید:

```vue
<script setup>
const { data: posts } = await useAsyncData('posts', () =>
  queryContent('blog')
    .sort({ date: -1 })
    .find()
)
</script>
```

## رندر کردن محتوا

از کامپوننت `ContentRenderer` برای رندر Markdown استفاده کنید:

```vue
<template>
  <ContentRenderer :value="post" />
</template>
```

## ویژگی‌های پیشرفته

### هایلایت کد

Nuxt Content از Shiki برای هایلایت زیبای کد استفاده می‌کند:

```javascript
// این کد به صورت خودکار هایلایت می‌شود
const greeting = (name) => {
  console.log(`سلام، ${name}!`)
}
```

### کامپوننت‌های MDC

می‌توانید از کامپوننت‌های Vue در Markdown خود استفاده کنید:

```markdown
::alert{type="info"}
این یک هشدار اطلاعاتی است!
::
```

## نتیجه‌گیری

Nuxt Content یک راه قدرتمند و انعطاف‌پذیر برای مدیریت محتوا در برنامه‌های Nuxt شما فراهم می‌کند. با رویکرد فایل-محور، قابلیت‌های جستجوی قدرتمند و یکپارچگی یکپارچه با Vue، برای وبلاگ‌ها، سایت‌های مستندات و برنامه‌های محتوا-محور عالی است.

کدنویسی خوشحالی! 🚀