add blog to project

content/fa/blog/nuxt-content-introduction.md

@@ -0,0 +1,108 @@
+---
+title: "آشنایی با Nuxt Content"
+description: "یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارک‌داون، هایلایت کد و کامپوننت‌های Vue پشتیبانی می‌کند."
+date: "2024-11-09"
+tags: ["nuxt", "vue", "آموزش", "فارسی"]
+image: "/img/blog/nuxt-content-cover.jpg"
+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، برای وبلاگ‌ها، سایت‌های مستندات و برنامه‌های محتوا-محور عالی است.
+
+کدنویسی خوشحالی! 🚀