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
3.6 KiB
title, description, date, tags, author, draft
| title | description | date | tags | author | draft | ||||
|---|---|---|---|---|---|---|---|---|---|
| آشنایی با Nuxt Content | یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارکداون، هایلایت کد و کامپوننتهای Vue پشتیبانی میکند. | 2024-11-09 |
|
علی ارغیانی | 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 بسیار ساده است:
pnpm add @nuxt/content
سپس آن را به nuxt.config.ts اضافه کنید:
export default defineNuxtConfig({
modules: ['@nuxt/content']
})
ایجاد محتوا
یک دایرکتوری content/ در ریشه پروژه خود ایجاد کنید و شروع به نوشتن فایلهای Markdown کنید:
---
title: "اولین پست من"
description: "این اولین پست وبلاگ من است"
date: "2024-11-09"
---
# سلام دنیا
این اولین پست من با استفاده از Nuxt Content است!
جستجوی محتوا
از composable queryContent() برای دریافت محتوا استفاده کنید:
<script setup>
const { data: posts } = await useAsyncData('posts', () =>
queryContent('blog')
.sort({ date: -1 })
.find()
)
</script>
رندر کردن محتوا
از کامپوننت ContentRenderer برای رندر Markdown استفاده کنید:
<template>
<ContentRenderer :value="post" />
</template>
ویژگیهای پیشرفته
هایلایت کد
Nuxt Content از Shiki برای هایلایت زیبای کد استفاده میکند:
// این کد به صورت خودکار هایلایت میشود
const greeting = (name) => {
console.log(`سلام، ${name}!`)
}
کامپوننتهای MDC
میتوانید از کامپوننتهای Vue در Markdown خود استفاده کنید:
::alert{type="info"}
این یک هشدار اطلاعاتی است!
::
نتیجهگیری
Nuxt Content یک راه قدرتمند و انعطافپذیر برای مدیریت محتوا در برنامههای Nuxt شما فراهم میکند. با رویکرد فایل-محور، قابلیتهای جستجوی قدرتمند و یکپارچگی یکپارچه با Vue، برای وبلاگها، سایتهای مستندات و برنامههای محتوا-محور عالی است.
کدنویسی خوشحالی! 🚀