mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
mahdiarghyani
5f28eaa179
- Add comprehensive blog content CSS with RTL support - Implement responsive typography and layout improvements - Create dedicated CSS for blog prose and content styling - Optimize code blocks, headings, and typography for better readability - Add scroll padding and responsive design considerations - Improve dark mode color contrast and styling - Enhance code and blockquote styling with better visual hierarchy
112 lines
3.6 KiB
Markdown
112 lines
3.6 KiB
Markdown
---
|
|
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 آن را جستجو کنید.
|
|
|
|
::blog-callout{type="info"}
|
|
این مقاله یک راهنمای جامع برای شروع کار با Nuxt Content است. اگر تازه شروع کردهاید، این مقاله برای شما مناسب است!
|
|
::
|
|
|
|
## چرا 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، برای وبلاگها، سایتهای مستندات و برنامههای محتوا-محور عالی است.
|
|
|
|
کدنویسی خوشحالی! 🚀
|