diff --git a/docs/.vitepress/config/fa.ts b/docs/.vitepress/config/fa.ts index 5257ce5e..5c91d0bc 100644 --- a/docs/.vitepress/config/fa.ts +++ b/docs/.vitepress/config/fa.ts @@ -5,13 +5,14 @@ const require = createRequire(import.meta.url) const pkg = require('vitepress/package.json') export const fa = defineConfig({ + title: 'ویت‌پرس', lang: 'fa-IR', description: 'Vite & Vue powered static site generator.', dir: 'rtl', markdown: { container: { tipLabel: 'نکته', - warningLabel: 'اخطار', + warningLabel: 'هشدار', dangerLabel: 'خطر', infoLabel: 'اطلاعات', detailsLabel: 'جزئیات' @@ -57,6 +58,14 @@ export const fa = defineConfig({ darkModeSwitchLabel: 'تم تاریک', lightModeSwitchTitle: 'رفتن به حالت روشن', darkModeSwitchTitle: 'رفتن به حالت تاریک', + notFound: { + linkLabel: 'بازگشت به خانه', + linkText: 'بازگشت به خانه', + title: 'صفحه مورد نظر یافت نشد', + code: '۴۰۴', + quote: + 'اما اگر جهت خود را تغییر ندهید و اگر ادامه دهید به دنبال چیزی که دنبال می‌کنید، ممکن است در نهایت به جایی که در حال رفتن به سمتش هستید، برسید.' + }, siteTitle: 'ویت‌پرس' } }) @@ -152,13 +161,13 @@ function sidebarReference(): DefaultTheme.SidebarItem[] { text: 'تم پیش‌فرض', base: 'fa/reference/default-theme-', items: [ - { text: 'Overview', link: 'config' }, // TODO: translate - { text: 'Nav', link: 'nav' }, // TODO: translate - { text: 'Sidebar', link: 'sidebar' }, // TODO: translate + { text: 'بررسی اجمالی', link: 'config' }, + { text: 'ناوبری', link: 'nav' }, + { text: 'نوار کنار صفحه', link: 'sidebar' }, { text: 'صفحه اصلی', link: 'home-page' }, - { text: 'فوتر', link: 'footer' }, - { text: 'Layout', link: 'layout' }, // TODO: translate - { text: 'Badge', link: 'badge' }, // TODO: translate + { text: 'پاورقی', link: 'footer' }, + { text: 'طرح', link: 'layout' }, + { text: 'نشان', link: 'badge' }, { text: 'صفحه تیم', link: 'team-page' }, { text: 'لینک‌های قبلی / بعدی', link: 'prev-next-links' }, { text: 'ویرایش لینک', link: 'edit-link' }, diff --git a/docs/fa/guide/asset-handling.md b/docs/fa/guide/asset-handling.md index 09749cb8..a990024f 100644 --- a/docs/fa/guide/asset-handling.md +++ b/docs/fa/guide/asset-handling.md @@ -1,6 +1,6 @@ -### مدیریت دارایی‌ها +# مدیریت منابع -## ارجاع به دارایی‌های ایستا +## ارجاع به منابع ایستا تمام فایل‌های Markdown به کامپوننت‌های Vue تبدیل و توسط [Vite](https://vitejs.dev/guide/assets.html) پردازش می‌شوند. شما می‌توانید، **و باید**، هر نوع دارایی را با استفاده از URL‌های نسبی مرجع قرار دهید: @@ -8,25 +8,25 @@ ![تصویر](./image.png) ``` -شما می‌توانید دارایی‌های ایستا را در فایل‌های Markdown خود، کامپوننت‌های `*.vue` در قالب، استایل‌ها و فایل‌های `.css` ساده، با استفاده از مسیرهای عمومی مطلق (براساس ریشه پروژه) یا مسیرهای نسبی (براساس سیستم فایل شما) ارجاع دهید. روش دوم مشابه رفتاری است که در صورت استفاده از Vite، Vue CLI یا `file-loader` webpack با آن آشنا هستید. +شما می‌توانید منابع ایستا را در فایل‌های Markdown خود، کامپوننت‌های `*.vue` در قالب، استایل‌ها و فایل‌های `.css` ساده، با استفاده از مسیرهای عمومی مطلق (براساس ریشه پروژه) یا مسیرهای نسبی (براساس سیستم فایل شما) ارجاع دهید. روش دوم مشابه رفتاری است که در صورت استفاده از Vite، Vue CLI یا `file-loader` webpack با آن آشنا هستید. -انواع شایع تصویر، رسانه و فایل فونت به طور خودکار شناسایی و به عنوان دارایی‌ها درج می‌شوند. +انواع شایع تصویر، رسانه و فایل فونت به طور خودکار شناسایی و به عنوان منابع درج می‌شوند. ::: tip فایل‌های لینک شده به عنوان دارایی محسوب نمی‌شوند PDFها یا سند‌های دیگر که از طریق پیوندها در فایل‌های Markdown ارجاع داده شده‌اند به طور خودکار به عنوان دارایی در نظر گرفته نمی‌شوند. برای دسترسی به فایل‌های لینک شده، باید آن‌ها را به صورت دستی در دایرکتوری [`public`](#the-public-directory) پروژه قرار دهید. ::: -تمام دارایی‌های ارجاع داده شده، شامل آن‌هایی که از مسیرهای مطلق استفاده می‌کنند، در مرحله تولید به دایرکتوری خروجی با نام فایلی بر اساس یک هش کپی خواهند شد. دارایی‌هایی که هرگز ارجاع نداده شوند، کپی نخواهند شد. دارایی‌های تصویر کوچک‌تر از 4 کیلوبایت به صورت base64 درون خطی می‌شوند - این می‌تواند از طریق گزینه پیکربندی [`vite`](../reference/site-config#vite) تنظیم شود. +تمام منابع ارجاع داده شده، شامل آن‌هایی که از مسیرهای مطلق استفاده می‌کنند، در مرحله تولید به دایرکتوری خروجی با نام فایلی بر اساس یک هش کپی خواهند شد. دارایی‌هایی که هرگز ارجاع نداده شوند، کپی نخواهند شد. منابع تصویر کوچک‌تر از 4 کیلوبایت به صورت base64 درون خطی می‌شوند - این می‌تواند از طریق گزینه پیکربندی [`vite`](../reference/site-config#vite) تنظیم شود. تمام ارجاع‌های مسیر **ایستا**، شامل مسیرهای مطلق، باید بر اساس ساختار دایرکتوری کاری شما تعیین شوند. ## دایرکتوری عمومی -گاهی اوقات ممکن است نیاز داشته باشید دارایی‌های ایستا را فراهم کنید که به صورت مستقیم در هیچ‌یک از Markdown یا کامپوننت‌های قالب شما ارجاع نشده‌اند، یا ممکن است بخواهید برخی فایل‌ها را با نام اصلی خود سرویس دهید. به عنوان مثال، فایل‌هایی مانند `robots.txt`، آیکون‌های fav، و آیکون‌های PWA. +گاهی اوقات ممکن است نیاز داشته باشید منابع ایستا را فراهم کنید که به صورت مستقیم در هیچ‌یک از Markdown یا کامپوننت‌های قالب شما ارجاع نشده‌اند، یا ممکن است بخواهید برخی فایل‌ها را با نام اصلی خود سرویس دهید. به عنوان مثال، فایل‌هایی مانند `robots.txt`، آیکون‌های fav، و آیکون‌های PWA. شما می‌توانید این فایل‌ها را در دایرکتوری `public` تحت [دایرکتوری منبع](./routing#source-directory) قرار دهید. به عنوان مثال، اگر ریشه پروژه شما `./docs` است و از محل پیش‌فرض دایرکتوری منبع استفاده می‌کنید، آنگاه دایرکتوری عمومی شما `./docs/public` خواهد بود. -دارایی‌های قرار داده شده در `public` به صورت اصلی در ریشه دایرکتوری خروجی کپی خواهند شد. +منابع قرار داده شده در `public` به صورت اصلی در ریشه دایرکتوری خروجی کپی خواهند شد. توجه داشته باشید که باید به فایل‌های قرار داده شده در `public` با استفاده از مسیر مطلق ریشه ارجاع دهید - به عنوان مثال، `public/icon.png` همیشه باید به عنوان `/icon.png` در کد منبع ارجاع داده شود. @@ -42,13 +42,13 @@ PDFها یا سند‌های دیگر که از طریق پیوندها در ف در این حالت، شما **نیازی ندارید** که آن را به روز کنید وقتی که مقدار پیکربندی `base` را تغییر می‌دهید. -اما، اگر شما در حال نویسندگی یک کامپوننت قالب هستید که به صورت پویا به دارایی‌ها لینک می‌دهد، به عنوان مثال یک تصویر که `src` آن براساس مقدار پیکربندی قالب است: +اما، اگر شما در حال نویسندگی یک کامپوننت قالب هستید که به صورت پویا به منابع لینک می‌دهد، به عنوان مثال یک تصویر که `src` آن براساس مقدار پیکربندی قالب است: ```vue ``` -در این حالت، توصیه می‌شود که مسیر را با استفاده از کمکی [`withBase`](../reference/runtime-api#withbase) ارائه شده توسط VitePress بپوشانید: +در این حالت، توصیه می‌شود که مسیر را با استفاده از کمکی [`withBase`](../reference/runtime-api#withbase) ارائه شده توسط ویت‌پرس بپوشانید: ```vue + + +``` \ No newline at end of file diff --git a/docs/fa/reference/default-theme-team-page.md b/docs/fa/reference/default-theme-team-page.md new file mode 100644 index 00000000..9d2ba344 --- /dev/null +++ b/docs/fa/reference/default-theme-team-page.md @@ -0,0 +1,257 @@ + + +# صفحه تیم + +اگر می‌خواهید تیم خود را معرفی کنید، می‌توانید از کامپوننت‌های تیم برای ساخت صفحه تیم استفاده کنید. دو راه برای استفاده از این کامپوننت‌ها وجود دارد. یکی اینکه آنها را در صفحه مستندات قرار دهید و دیگری اینکه یک صفحه کامل تیم ایجاد کنید. + +## نمایش اعضای تیم در یک صفحه + +می‌توانید از کامپوننت `` که از `vitepress/theme` قابل دسترسی است، برای نمایش لیست اعضای تیم در هر صفحه‌ای استفاده کنید. + +```html + + +# تیم ما + +با سلام به تیم فوق‌العاده‌ی ما خوش آمدید. + + +``` + +بالا به صورت عنصری با شکل کارتی اعضای تیم را نمایش می‌دهد. باید به شکل زیر نمایش داده شود. + + + +کامپوننت `` دارای دو اندازه مختلف، `small` و `medium` است. معمولاً اندازه `small` برای استفاده در صفحات مستندات مناسب‌تر است. همچنین می‌توانید ویژگی‌های بیشتری برای هر عضو اضافه کنید مانند "توضیحات" یا "دکمه حامی". جهت کسب اطلاعات بیشتر به [``](#vpteammembers) مراجعه کنید. + +قرار دادن اعضای تیم در صفحه مستندات برای تیم‌های کوچک مناسب است که ایجاد یک صفحه کامل تیم ممکن است بیش از حد باشد یا معرفی اعضا به عنوان مرجع در زمینه مستندات. + +اگر تعداد اعضا بسیار زیاد است یا به سادگی می‌خواهید بیشتر فضا برای نمایش اعضای تیم داشته باشید، در نظر بگیرید [ایجاد یک صفحه کامل تیم](#create-a-full-team-page). + +## ایجاد یک صفحه کامل تیم + +بجای اضافه کردن اعضای تیم به صفحه مستندات، می‌توانید یک صفحه کامل تیم را ایجاد کنید، مشابه اینکه چگونه می‌توانید یک [صفحه خانگی سفارشی](./default-theme-home-page) ایجاد کنید. + +برای ایجاد یک صفحه تیم، ابتدا یک فایل md جدید بسازید. نام فایل مهم نیست، اما در اینجا آن را `team.md` می‌نامیم. در این فایل، گزینه `layout: page` را در فرانت‌ماتر تنظیم کنید، سپس می‌توانید ساختار صفحه خود را با استفاده از کامپوننت‌های `TeamPage` ایجاد کنید. + +```html +--- +layout: page +--- + + + + + + + + + +``` + +در ایجاد یک صفحه کامل تیم، به یاد داشته باشید که همهٔ کامپوننت‌ها را با کامپوننت `` بپوشانید. این کامپوننت تضمین می‌کند که همهٔ کامپوننت‌های مرتبط با تیم در ساختار طراحی مناسبی مانند فضاهای خالی قرار می‌گیرند. + +کامپوننت `` بخش عنوان صفحه را اضافه می‌کند. عنوان به عنوان `

` نمایش داده می‌شود. از اسلات‌های `#title` و `#lead` برای مستندسازی در مورد تیم خود استفاده کنید. + +`` به عنوان زمانی که در یک صفحه مستند استفاده می‌شود، کار می‌کند. این لیست اعضا را نمایش می‌دهد. + +### اضافه کردن بخش‌ها برای تقسیم اعضای تیم + +می‌توانید "بخ + +ش‌ها" را به صفحه تیم اضافه کنید. به عنوان مثال، ممکن است اعضای مختلف تیمی مانند اعضای تیم اصلی و شرکای اجتماعی داشته باشید. شما می‌توانید این اعضا را به بخش‌ها تقسیم کنید تا نقش هر گروه بهتر توضیح داده شود. + +برای این کار، کامپوننت `` را به فایل `team.md` اضافه کنید که قبلاً ایجاد کردیم. + +```html +--- +layout: page +--- + + + + + + + + + + + + + + +``` + +کامپوننت `` می‌تواند همچون کامپوننت `VPTeamPageTitle` دارای اسلات‌های `#title` و `#lead` باشد و همچنین اسلات `#members` را برای نمایش اعضای تیم پذیرفته است. + +به یاد داشته باشید که کامپوننت `` را درون اسلات `#members` قرار دهید. + +## `` + +کامپوننت `` لیست داده‌شده از اعضا را نمایش می‌دهد. + +```html + +``` + +```ts +interface Props { + // اندازه هر عضو. پیش‌فرض به `medium`. + size?: 'small' | 'medium' + + // لیست اعضا برای نمایش. + members: TeamMember[] +} + +interface TeamMember { + // تصویر آواتار برای عضو. + avatar: string + + // نام عضو. + name: string + + // عنوانی که زیر نام عضو نمایش داده خواهد شد. + // برای مثال، توسعه‌دهنده، مهندس نرم‌افزار و غیره. + title?: string + + // سازمانی که عضو به آن تعلق دارد. + org?: string + + // پیوند URL برای سازمان. + orgLink?: string + + // توضیحات برای عضو. + desc?: string + + // پیوندهای اجتماعی. برای مثال، GitHub، Twitter و غیره. می‌توانید شیء پیوندهای اجتماعی را در اینجا ارسال کنید. + // مشاهده: https://vitepress.dev/reference/default-theme-config.html#sociallinks + links?: SocialLink[] + + // URL برای صفحه حامی برای عضو. + sponsor?: string + + // متن برای لینک حامی. پیش‌فرض به 'حمایت‌کننده'. + actionText?: string +} +``` + +## `` + +کامپوننت ریشه هنگام ایجاد یک صفحه کامل تیم. فقط یک اسلات را قبول می‌کند. این همه کامپوننت‌های مربوط به تیم را استایل می‌کند. + +## `` + +بخش "عنوان" صفحه را اضافه می‌کند. بهترین استفاده را در ابتدایی‌ترین جای زیر `` داشته باشد. این اسلات‌های `#title` و `#lead` را قبول می‌کند. + +```html + + + + + + +``` + +## `` + +یک "بخش" را درون صفحه تیم ایجاد می‌کند. اسلات‌های `#title`، `#lead` و `#members` را قبول می‌کند. می‌توانید هر تعداد بخش را درون `` اضافه کنید. + +```html + + ... + + + + + + +``` diff --git a/docs/fa/reference/frontmatter-config.md b/docs/fa/reference/frontmatter-config.md new file mode 100644 index 00000000..a7f7988a --- /dev/null +++ b/docs/fa/reference/frontmatter-config.md @@ -0,0 +1,222 @@ +--- +outline: deep +--- + +# تنظیمات Frontmatter + +Frontmatter امکان پیکربندی بر اساس صفحه را فراهم می‌کند. در هر فایل markdown، شما می‌توانید از تنظیمات frontmatter برای بازنویسی تنظیمات سطح سایت یا تم استفاده کنید. همچنین، تنظیماتی وجود دارند که فقط می‌توانید آن‌ها را در frontmatter تعریف کنید. + +نمونه استفاده: + +```md +--- +title: مستندات با ویت‌پرس +editLink: true +--- +``` + +شما می‌توانید به داده‌های frontmatter از طریق `$frontmatter` در بیانیه‌های Vue دسترسی داشته باشید: + +```md +{{ $frontmatter.title }} +``` + +## title + +- نوع: `string` + +عنوان صفحه. همانطور که در [config.title](./site-config#title) است، این تنظیمات سطح سایت را بازنویسی می‌کند. + +```yaml +--- +title: ویت‌پرس +--- +``` + +## titleTemplate + +- نوع: `string | boolean` + +پسوند برای عنوان. همانطور که در [config.titleTemplate](./site-config#titletemplate) است، این تنظیمات سطح سایت را بازنویسی می‌کند. + +```yaml +--- +title: ویت‌پرس +titleTemplate: Vite & Vue powered static site generator +--- +``` + +## description + +- نوع: `string` + +توضیحات صفحه. همانطور که در [config.description](./site-config#description) است، این تنظیمات سطح سایت را بازنویسی می‌کند. + +```yaml +--- +description: ویت‌پرس +--- +``` + +## head + +- نوع: `HeadConfig[]` + +تگ‌های head اضافی برای درج در صفحه فعلی. پس از تگ‌های head تزریق شده توسط تنظیمات سطح سایت، این تنظیمات درج می‌شوند. + +```yaml +--- +head: + - - meta + - name: description + content: hello + - - meta + - name: keywords + content: super duper SEO +--- +``` + +```ts +type HeadConfig = + | [string, Record] + | [string, Record, string] +``` + +## فقط برای تم پیش‌فرض + +گزینه‌های frontmatter زیر فقط زمانی قابل استفاده هستند که از تم پیش‌فرض استفاده می‌کنید. + +### layout + +- نوع: `doc | home | page` +- پیش‌فرض: `doc` + +تعیین چیدمان صفحه. + +- `doc` - این چیدمان استایل‌های مستندات پیش‌فرض را به محتوای markdown اعمال می‌کند. +- `home` - چیدمان ویژه برای "صفحه اصلی". شما می‌توانید گزینه‌های اضافی مانند `hero` و `features` را اضافه کنید تا به سرعت یک صفحه نخست زیبا ایجاد کنید. +- `page` - مشابه `doc` عمل می‌کند اما هیچ استایلی به محتوا اعمال نمی‌شود. مفید است زمانی که می‌خواهید یک صفحه کاملاً سفارشی ایجاد کنید. + +```yaml +--- +layout: doc +--- +``` + +### hero + +تعیین محتویات بخش hero صفحه اصلی هنگامی که `layout` به `home` تنظیم شده است. جزئیات بیشتر در [تم پیش‌فرض: صفحه اصلی](./default-theme-home-page). + +### features + +تعیین مواردی که در بخش ویژگی‌ها باید نمایش داده شوند هنگامی که `layout` به `home` تنظیم شده است. جزئیات بیشتر در [تم پیش‌فرض: صفحه اصلی](./default-theme-home-page). + +### navbar + +- نوع: `boolean` +- پیش‌فرض: `true` + +آیا باید [نوار ناوبری](./default-theme-nav) نمایش داده شود یا خیر؟ + +```yaml +--- +navbar: false +--- +``` + +### sidebar + +- نوع: `boolean` +- پیش‌فرض: `true` + +آیا باید [نوار کناری](./default-theme-sidebar) نمایش داده شود یا خیر؟ + +```yaml +--- +sidebar: false +--- +``` + +### aside + +- نوع: `boolean | 'left'` +- پیش‌فرض: `true` + +تعیین مکان کامپوننت aside در چیدمان `doc`. + +- اگر این مقدار را به `false` تنظیم کنید، اجرای کانتینر aside جلوگیری می‌کند. +- اگر این مقدار را به `true` تنظیم کنید، aside به راست اجرا می‌شود. +- اگر این مقدار را به `'left'` تنظیم کنید، aside به چپ اجرا می‌شود. + +```yaml +--- +aside: false +--- +``` + +### outline + +- نوع: `number | [number, number] | 'deep' | false` +- پیش‌فرض: `2` + +سطوح سرفصل‌های مورد نمایش برای صفحه. همانطور که در [config.themeConfig.outline.level](./default-theme-config#outline) است، این مقدار سطح مجموعه سایت را بازنویسی می‌کند. + +### lastUpdated + +- نوع: `boolean | Date` +- پیش‌فرض: `true` + +آیا متن [آخرین به‌روزرسانی](./default-theme-last-updated) را در پاورقی صفحه فعلی نمایش دهد یا خیر؟ اگر تاریخ و زمان مشخص شده باشد، به جای زمان اصلاح شده git نمایش داده می‌شود. + +```yaml +--- +lastUpdated: false +--- +``` + +### editLink + +- نوع: `boolean` +- پیش‌فرض: `true` + +آیا [پیوند ویرایش](./default-theme-edit-link) را در پاورقی صفحه فعلی نمایش دهد یا خیر؟ + +```yaml +--- +editLink: false +--- +``` + +### footer + +- نوع: `boolean` +- پیش‌فرض: `true` + +آیا [پاورقی](./default-theme-footer) را + +نمایش دهد یا خیر؟ + +```yaml +--- +footer: false +--- +``` + +### pageClass + +- نوع: `string` + +افزودن نام کلاس اضافی به یک صفحه خاص. + +```yaml +--- +pageClass: custom-page-class +--- +``` + +سپس می‌توانید استایل‌های این صفحه خاص را در فایل `.vitepress/theme/custom.css` سفارشی کنید: + +```css +.custom-page-class { + /* استایل‌های مخصوص صفحه */ +} diff --git a/docs/fa/reference/runtime-api.md b/docs/fa/reference/runtime-api.md new file mode 100644 index 00000000..7a33adc7 --- /dev/null +++ b/docs/fa/reference/runtime-api.md @@ -0,0 +1,168 @@ +# API زمان اجرا + +ویت‌پرس چندین API داخلی را ارائه می‌دهد تا به شما امکان دسترسی به داده‌های برنامه را بدهد. همچنین، ویت‌پرس با چندین کامپوننت داخلی همراه است که می‌توانید به صورت جهانی از آن‌ها استفاده کنید. + +متدهای کمکی به صورت جهانی از `vitepress` قابل وارد کردن هستند و معمولاً در کامپوننت‌های Vue سفارشی تم استفاده می‌شوند. با این حال، آن‌ها همچنین در صفحات `.md` قابل استفاده هستند زیرا فایل‌های markdown به [کامپوننت‌های فایل تکی](https://vuejs.org/guide/scaling-up/sfc.html) Vue ترجمه می‌شوند. + +متدهایی که با `use*` آغاز می‌شوند نشان می‌دهند که این یک تابع [API ترکیبی Vue 3](https://vuejs.org/guide/introduction.html#composition-api) ("Composable") است که فقط می‌تواند در `setup()` یا ` + + +``` + +## `useRoute` + +شیء مسیر فعلی را با این نوع برمی‌گرداند: + +```ts +interface Route { + path: string + data: PageData + component: Component | null +} +``` + +## `useRouter` + +نمونه راوتر ویت‌پرس را برمی‌گرداند تا بتوانید به صورت برنامه‌ریزی‌شده به صفحه دیگری ناوبری کنید. + +```ts +interface Router { + /** + * Route فعلی + */ + route: Route + /** + * به URL جدید ناوبری کنید. + */ + go: (to?: string) => Promise + /** + * قبل از تغییر مسیر فراخوانی می‌شود. برای لغو ناوبری `false` را برگردانید. + */ + onBeforeRouteChange?: (to: string) => Awaitable + /** + * قبل از بارگذاری مؤلفه صفحه فراخوانی می‌شود (پس از به‌روزرسانی وضعیت تاریخچه). برای لغو ناوبری `false` را برگردانید. + */ + onBeforePageLoad?: (to: string) => Awaitable + /** + * پس از تغییر مسیر فراخوانی می‌شود. + */ + onAfterRouteChanged?: (to: string) => Awaitable +} +``` + +## `withBase` + +- **نوع**: `(path: string) => string` + +پایه [پیکربندی‌شده](./site-config#base) را به یک مسیر URL داده شده اضافه می‌کند. همچنین به [آدرس پایه](../guide/asset-handling#base-url) مراجعه کنید. + +## `` + +کامپوننت `` محتوای markdown را نمایش می‌دهد. مفید است [هنگام ایجاد تم شخصی شما](../guide/custom-theme). + +```vue + +``` + +## `` + +کامپوننت `` فقط اسلات خود را در سمت مشتری رندر می‌کند. + +چون برنامه‌های ویت‌پرس هنگام ایجاد از سمت سرور در Node.js رندر می‌شوند، هر استفاده از Vue باید به الزامات کد یکپارچه دنیا پاسخ دهد. به طور خلاصه، اطمینان حاصل کنید که فقط در قالب hooks `beforeMount` یا `mounted` به API‌های Browser / DOM دسترسی دارید. + +اگر از کامپوننت‌هایی استفاده یا نمایش دهنده‌هایی که با SSR سازگار نیستند (مانند دستورالعمل‌های سفارشی) استفاده می‌کنید، می‌توانید آن‌ها را داخل کامپوننت `ClientOnly` قرار دهید. + +```vue-html + + + +``` + +- مرتبط: [سازگاری با SSR](../guide/ssr-compat) + +## `$frontmatter` + +در بیانیه‌های Vue، به صورت مستقیم به [داده‌های frontmatter](../guide/frontmatter) صفحه فعلی دسترسی پیدا کنید. + +```md +--- +title: سلام +--- + +# {{ $frontmatter.title }} +``` + +## `$params` + +در بیانیه‌های Vue، به صورت مستقیم به [پارامترهای مسیر دینامیک](../guide/routing#dynamic-routes) صفحه فعلی دسترسی پیدا کنید. + +```md +- نام بسته: {{ $params.pkg }} +- نسخه: {{ $params.version }} +``` \ No newline at end of file diff --git a/docs/fa/reference/site-config.md b/docs/fa/reference/site-config.md new file mode 100644 index 00000000..2c059d35 --- /dev/null +++ b/docs/fa/reference/site-config.md @@ -0,0 +1,726 @@ +--- +outline: deep +--- + +# تنظیمات سایت + +تنظیمات سایت جایی است که می‌توانید تنظیمات جهانی سایت را تعریف کنید. گزینه‌های تنظیمات برنامه شامل تنظیماتی است که برای هر سایت ویت‌پرس اعمال می‌شود، صرف نظر از اینکه از چه تمی استفاده می‌کند. برای مثال، دایرکتوری پایه یا عنوان سایت. + +## مروری کلی + +### رفع تنظیمات + +فایل تنظیمات همیشه از `/.vitepress/config.[ext]` رفع می‌شود، جایی که `` ریشه پروژه ویت‌پرس شما است و `[ext]` یکی از پسوندهای فایل پشتیبانی شده است. تایپ‌اسکریپت به طور پیش‌فرض پشتیبانی می‌شود. پسوندهای پشتیبانی شده شامل `.js`, `.ts`, `.mjs` و `.mts` هستند. + +توصیه می‌شود از سینتکس ماژول‌های ES در فایل‌های تنظیمات استفاده کنید. فایل تنظیمات باید به طور پیش‌فرض یک شیء صادر کند: + +```ts +export default { + // گزینه‌های تنظیمات سطح برنامه + lang: 'en-US', + title: 'ویت‌پرس', + description: 'مولد سایت استاتیک توسط Vite & Vue.', + ... +} +``` + +:::details تنظیمات پویا (غیرهمزمان) + +اگر نیاز دارید به طور پویا تنظیمات را تولید کنید، می‌توانید یک تابع صادر کنید. به عنوان مثال: + +```ts +import { defineConfig } from 'vitepress' + +export default async () => { + const posts = await (await fetch('https://my-cms.com/blog-posts')).json() + + return defineConfig({ + // گزینه‌های تنظیمات سطح برنامه + lang: 'en-US', + title: 'ویت‌پرس', + description: 'مولد سایت استاتیک توسط Vite & Vue.', + + // گزینه‌های تنظیمات سطح تم + themeConfig: { + sidebar: [ + ...posts.map((post) => ({ + text: post.name, + link: `/posts/${post.name}` + })) + ] + } + }) +} +``` + +همچنین می‌توانید از `await` سطح بالا استفاده کنید. به عنوان مثال: + +```ts +import { defineConfig } from 'vitepress' + +const posts = await (await fetch('https://my-cms.com/blog-posts')).json() + +export default defineConfig({ + // گزینه‌های تنظیمات سطح برنامه + lang: 'en-US', + title: 'ویت‌پرس', + description: 'مولد سایت استاتیک توسط Vite & Vue.', + + // گزینه‌های تنظیمات سطح تم + themeConfig: { + sidebar: [ + ...posts.map((post) => ({ + text: post.name, + link: `/posts/${post.name}` + })) + ] + } +}) +``` + +::: + +### هوشمندی تنظیمات + +استفاده از تابع `defineConfig` هوشمندی تایپ‌اسکریپت را برای گزینه‌های تنظیمات فراهم می‌کند. فرض کنید IDE شما از آن پشتیبانی می‌کند، این باید هم در جاوااسکریپت و هم تایپ‌اسکریپت کار کند. + +```js +import { defineConfig } from 'vitepress' + +export default defineConfig({ + // ... +}) +``` + +### تنظیمات تایپ‌شده تم + +به طور پیش‌فرض، تابع `defineConfig` انتظار دارد نوع تنظیمات تم از تم پیش‌فرض باشد: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + // نوع `DefaultTheme.Config` + } +}) +``` + +اگر از تم سفارشی استفاده می‌کنید و می‌خواهید بررسی نوع برای تنظیمات تم داشته باشید، باید به جای آن از `defineConfigWithTheme` استفاده کنید و نوع تنظیمات تم سفارشی خود را از طریق یک آرگومان جنریک منتقل کنید: + +```ts +import { defineConfigWithTheme } from 'vitepress' +import type { ThemeConfig } from 'your-theme' + +export default defineConfigWithTheme({ + themeConfig: { + // نوع `ThemeConfig` + } +}) +``` + +### تنظیمات Vite, Vue و Markdown + +- **Vite** + + شما می‌توانید نمونه پایه Vite را با استفاده از گزینه [vite](#vite) در تنظیمات ویت‌پرس خود پیکربندی کنید. نیازی به ایجاد فایل تنظیمات Vite جداگانه نیست. + +- **Vue** + + ویت‌پرس از قبل پلاگین رسمی Vue برای Vite ([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue)) را شامل می‌شود. شما می‌توانید گزینه‌های آن را با استفاده از گزینه [vue](#vue) در تنظیمات ویت‌پرس خود پیکربندی کنید. + +- **Markdown** + + شما می‌توانید نمونه پایه [Markdown-It](https://github.com/markdown-it/markdown-it) را با استفاده از گزینه [markdown](#markdown) در تنظیمات ویت‌پرس خود پیکربندی کنید. + +## متاداده‌های سایت + +### عنوان + +- نوع: `string` +- پیش‌فرض: `ویت‌پرس` +- می‌تواند به ازای هر صفحه از طریق [frontmatter](./frontmatter-config#title) جایگزین شود. + +عنوان سایت. هنگامی که از تم پیش‌فرض استفاده می‌کنید، این در نوار ناوبری نمایش داده می‌شود. + +همچنین به عنوان پسوند پیش‌فرض برای تمام عناوین صفحات فردی استفاده می‌شود، مگر اینکه [`titleTemplate`](#titletemplate) تعریف شده باشد. عنوان نهایی صفحه‌ای به محتوای متنی اولین هدر `

` آن صفحه ترکیب می‌شود با `title` جهانی به عنوان پسوند. به عنوان مثال با تنظیمات زیر و محتوای صفحه: + +```ts +export default { + title: 'سایت فوق‌العاده من' +} +``` + +```md +# سلام +``` + +عنوان صفحه خواهد بود `سلام | سایت فوق‌العاده من`. + +### قالب عنوان + +- نوع: `string | boolean` +- می‌تواند به ازای هر صفحه از طریق [frontmatter](./frontmatter-config#titletemplate) جایگزین شود. + +اجازه می‌دهد پسوند عنوان هر صفحه یا کل عنوان را سفارشی کنید. به عنوان مثال: + +```ts +export default { + title: 'سایت فوق‌العاده من', + titleTemplate: 'پسوند سفارشی' +} +``` + +```md +# سلام +``` + +عنوان صفحه خواهد بود `سلام | پسوند سفارشی`. + +برای سفارشی کردن کامل نحوه نمایش عنوان، می‌توانید از نماد `:title` در `titleTemplate` استفاده کنید: + +```ts +export default { + titleTemplate: ':title - پسوند سفارشی' +} +``` + +اینجا `:title` با متن استنباط شده از اولین هدر `

` صفحه جایگزین می‌شود. عنوان صفحه مثال قبلی خواهد بود `سلام - پسوند سفارشی`. + +این گزینه می‌تواند به `false` تنظیم شود تا پسوندهای عنوان غیرفعال شوند. + +### توضیحات + +- نوع: `string` +- پیش‌فرض: `یک سایت ویت‌پرس` +- می‌تواند به ازای هر صفحه از طریق [frontmatter](./frontmatter-config#description) جایگزین شود. + +توضیحات برای سایت. این به عنوان یک تگ `` در HTML صفحه رندر خواهد شد. + +```ts +export default { + description: 'یک سایت ویت‌پرس' +} +``` + +### head + +- نوع: `HeadConfig[]` +- پیش‌فرض: `[]` +- می‌تواند به ازای هر صفحه از طریق [frontmatter](./frontmatter-config#head) افزوده شود. + +عناصر اضافی برای رندر در تگ `` در HTML صفحه. تگ‌های افزوده شده توسط کاربر قبل از بسته شدن تگ `head`، پس از تگ‌های ویت‌پرس رندر می‌شوند. + +```ts +type HeadConfig = + | [string, Record] + | [string, Record, string] +``` + +#### مثال: اضافه کردن یک فاوآیکن + +```ts +export default { + head: [['link', { rel: 'icon', href: '/favicon.ico' }]] +} // favicon.ico را در دایرکتوری عمومی قرار دهید، اگر base تنظیم شده است، از /base/favicon.ico استفاده کنید. + +/* رندر خواهد شد: + +*/ +``` + +#### مثال: اضافه کردن فونت‌های گوگل + +```ts +export default { + head: [ + [ + 'link', + { rel: 'preconnect', href: 'https://fonts.googleapis.com' } + ], + [ + 'link', + { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' } + ], + [ + 'link', + { href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', rel: 'stylesheet' } + ] + ] +} + +/* رندر خواهد شد: + + + +*/ +``` + +#### مثال: ثبت یک سرویس ورکر + +```ts +export default { + head: [ + [ + 'script', + { id: 'register-sw' }, + `;(() => { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js') + } + })()` + ] + ] +} + +/* رندر خواهد شد + +: + +*/ +``` + +#### مثال: استفاده از گوگل آنالیتیکس + +```ts +export default { + head: [ + [ + 'script', + { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=TAG_ID' } + ], + [ + 'script', + {}, + `window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'TAG_ID');` + ] + ] +} + +/* رندر خواهد شد: + + +*/ +``` + +### زبان + +- نوع: `string` +- پیش‌فرض: `en-US` + +ویژگی زبان برای سایت. این به عنوان یک تگ `` در HTML صفحه رندر خواهد شد. + +```ts +export default { + lang: 'en-US' +} +``` + +### پایه + +- نوع: `string` +- پیش‌فرض: `/` + +آدرس پایه‌ای که سایت در آن مستقر خواهد شد. اگر قصد دارید سایت خود را در یک مسیر فرعی مستقر کنید، باید این تنظیم را انجام دهید، به عنوان مثال، صفحات GitHub. اگر قصد دارید سایت خود را در `https://foo.github.io/bar/` مستقر کنید، باید پایه را به `'/bar/'` تنظیم کنید. این باید همیشه با یک اسلش شروع و پایان یابد. + +پایه به طور خودکار به تمام آدرس‌های URL که با / شروع می‌شوند در سایر گزینه‌ها اضافه می‌شود، بنابراین فقط باید آن را یک بار مشخص کنید. + +```ts +export default { + base: '/base/' +} +``` + +## مسیریابی + +### تمیز کردن URL ها + +- نوع: `boolean` +- پیش‌فرض: `false` + +وقتی تنظیم شود به `true`، ویت‌پرس `.html` انتهایی را از URL ها حذف می‌کند. همچنین ببینید [تولید URL تمیز](../guide/routing#generating-clean-url). + +::: هشدار نیاز به پشتیبانی سرور +فعال کردن این ممکن است نیاز به پیکربندی اضافی در پلتفرم میزبان شما داشته باشد. برای اینکه کار کند، سرور شما باید بتواند `/foo.html` را زمانی که `/foo` بازدید می‌شود **بدون ریدایرکت** سرو کند. +::: + +### بازنویسی‌ها + +- نوع: `Record` + +تعریف نقشه‌برداری‌های سفارشی دایرکتوری <-> URL. جزئیات بیشتر را در [مسیریابی: بازنویسی مسیرها](../guide/routing#route-rewrites) ببینید. + +```ts +export default { + rewrites: { + 'source/:page': 'destination/:page' + } +} +``` + +## ساخت + +### srcDir + +- نوع: `string` +- پیش‌فرض: `.` + +دایرکتوری که صفحات مارک‌داون شما در آن ذخیره شده‌اند، نسبت به ریشه پروژه. همچنین ببینید [دایرکتوری ریشه و منبع](../guide/routing#root-and-source-directory). + +```ts +export default { + srcDir: './src' +} +``` + +### srcExclude + +- نوع: `string` +- پیش‌فرض: `undefined` + +یک [الگوی glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) برای تطبیق فایل‌های مارک‌داون که باید به عنوان محتوای منبع حذف شوند. + +```ts +export default { + srcExclude: ['**/README.md', '**/TODO.md'] +} +``` + +### outDir + +- نوع: `string` +- پیش‌فرض: `./.vitepress/dist` + +مکان خروجی ساخت برای سایت، نسبت به [ریشه پروژه](../guide/routing#root-and-source-directory). + +```ts +export default { + outDir: '../public' +} +``` + +### assetsDir + +- نوع: `string` +- پیش‌فرض: `assets` + +دایرکتوری برای قرار دادن دارایی‌های تولید شده را مشخص کنید. مسیر باید داخل [`outDir`](#outdir) باشد و نسبت به آن حل شود. + +```ts +export default { + assetsDir: 'static' +} +``` + +### cacheDir + +- نوع: `string` +- پیش‌فرض: `./.vitepress/cache` + +دایرکتوری برای فایل‌های کش، نسبت به [ریشه پروژه](../guide/routing#root-and-source-directory). همچنین ببینید: [cacheDir](https://vitejs.dev/config/shared-options.html#cachedir). + +```ts +export default { + cacheDir: './.vitepress/.vite' +} +``` + +### ignoreDeadLinks + +- نوع: `boolean | 'localhostLinks' | (string | RegExp | ((link: string) => boolean))[]` +- پیش‌فرض: `false` + +زمانی که به `true` تنظیم شود، ویت‌پرس به دلیل لینک‌های مرده ساخت‌ها را شکست نخواهد داد. + +وقتی به `'localhostLinks'` تنظیم شود، ساخت بر روی لینک‌های مرده شکست خواهد خورد، اما لینک‌های `localhost` بررسی نخواهند شد. + +```ts +export default { + ignoreDeadLinks: true +} +``` + +همچنین می‌تواند یک آرایه از رشته‌های URL دقیق، الگوهای رگکس، یا توابع فیلتر سفارشی باشد. + +```ts +export default { + ignoreDeadLinks: [ + // نادیده گرفتن URL دقیق "/playground" + '/playground', + // نادیده گرفتن همه لینک‌های localhost + /^https?:\/\/localhost/, + // نادیده گرفتن همه لینک‌های شامل "/repl/"" + /\/repl\//, + // تابع سفارشی، نادیده گرفتن همه لینک‌های شامل "ignore" + (url) => { + return url.toLowerCase().includes('ignore') + } + ] +} +``` + +### metaChunk + +- نوع: `boolean` +- پیش‌فرض: `false` + +زمانی که به `true` تنظیم شود، فراداده‌های صفحات را به یک قسمت جداگانه جاوااسکریپت استخراج می‌کند به جای درون‌گذاری آن در HTML اولیه. این کار باعث کاهش بار HTML هر صفحه می‌شود و فراداده‌های صفحات قابل کش شدن می‌شود، که منجر به کاهش پهنای باند سرور می‌شود وقتی که صفحات زیادی در سایت دارید. + +### mpa + +- نوع: `boolean` +- پیش‌فرض: `false` + +زمانی که به `true` تنظیم شود، اپلیکیشن تولید شده در [حالت MPA](../guide/mpa-mode) ساخته خواهد شد. حالت MPA به طور پیش‌فرض 0 کیلوبایت جاوااسکریپت ارسال می‌کند، به هزینه غیرفعال کردن ناوبری سمت کاربر و نیاز به opt-in صریح برای تعامل. + +## تم‌سازی + +### appearance + +- نوع: `boolean | 'dark' | 'force-dark' | 'force-auto' | import('@vueuse/core').UseDarkOptions` +- پیش‌فرض: `true` + +آیا حالت تاریک فعال شود یا نه (با اضافه کردن کلاس `.dark` به عنصر ``). + +- اگر گزینه به `true` تنظیم شود، تم پیش‌فرض با توجه به طرح رنگ مورد نظر کاربر تعیین می‌شود. +- اگر گزینه به `dark` تنظیم شود، تم به صورت پیش‌فرض تاریک خواهد بود، مگر اینکه کاربر آن را به صورت دستی تغییر دهد. +- اگر گزینه به `false` تنظیم شود، کاربران قادر به تغییر تم نخواهند بود. +- اگر گزینه به `force-dark` تنظیم شود، تم همیشه تاریک خواهد بود و کاربران نمی‌توانند آن را تغییر دهند. +- اگر گزینه به `force-auto` تنظیم شود، تم همیشه با توجه به طرح رنگ مورد نظر کاربر تعیین می‌شود و کاربران نمی‌توانند آن را تغییر دهند. + +این گزینه یک اسکریپت داخلی تزریق می‌کند که تنظیمات کاربران را از حافظه محلی با استفاده از کلید `vitepress-theme-appearance` بازیابی می‌کند. این اطمینان حاصل می‌شود که کلاس `.dark` قبل از رندر شدن صفحه اعمال می‌شود تا از پرش جلوگیری شود. + +`appearance.initialValue` فقط می‌تواند `dark` یا `undefined` باشد. Refs یا getters پشتیبانی نمی‌شوند. + +### lastUpdated + +- نوع: `boolean` +- پیش‌فرض: `false` + +آیا زمان آخرین به‌روزرسانی برای هر صفحه با استفاده از Git دریافت شود. این زمان در داده‌های هر صفحه گنجانده خواهد شد و از طریق [`useData`](./runtime-api#usedata) قابل دسترسی خواهد بود. + +وقتی از تم پیش‌فرض استفاده می‌کنید، فعال کردن این گزینه زمان آخرین به‌روزرسانی هر صفحه را نمایش می‌دهد. می‌توانید متن را از طریق گزینه [`themeConfig.lastUpdatedText`](./default-theme-config#lastupdatedtext) سفارشی کنید. + +## سفارشی‌سازی + +### markdown + +- نوع: `MarkdownOption` + +گزینه‌های پارسر مارک‌داون را تنظیم کنید. ویت‌پرس از [Markdown-it](https://github.com/markdown-it/markdown-it) به عنوان پارسر استفاده می‌کند و [Shiki](https://github.com/shikijs/shiki) را برای برجسته‌سازی نحو زبان استفاده می‌کند. در داخل این گزینه، می‌توانید گزینه‌های مختلف مرتبط با مارک‌داون را بر اساس نیازهای خود ارسال کنید. + +```js +export default { + markdown: {...} +} +``` + +برای مشاهده اعلامیه نوع و jsdocs برای همه گزینه‌های موجود، [type declaration and jsdocs](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts) را بررسی کنید. + +### vite + +- نوع: `import('vite').UserConfig` + +پیکربندی خام [Vite Config](https://vitejs.dev/config/) را به سرور توسعه داخلی / بسته‌بند Vite ارسال کنید. + +```js +export default { + vite: { + // گزینه‌های پیکربندی Vite + } +} +``` + +### vue + +- نوع: `import('@vitejs/plugin-vue').Options` + +گزینه‌های خام [`@vitejs/plugin-vue` options](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options) را به نمونه افزونه داخلی ارسال کنید. + +```js +export default { + vue: { + // گزینه‌های @vitejs/plugin-vue + } +} +``` + +## قلاب‌های ساخت + +قلاب‌های ساخت ویت‌پرس به شما امکان اضافه کردن عملکرد و رفتارهای جدید به وب‌سایت خود را می‌دهند: + +- نقشه سایت +- شاخص‌بندی جستجو +- PWA +- Teleports + +### buildEnd + +- نوع: `(siteConfig: SiteConfig) => Awaitable` + +`buildEnd` یک قلاب CLI ساخت است، که بعد از اتمام ساخت (SSG) اجرا می‌شود اما قبل از خروج از فرآیند CLI ویت‌پرس. + +```ts +export default { + async buildEnd(siteConfig) { + // ... + } +} +``` + +### postRender + +- نوع: `(context: SSGContext) => Awaitable` + +`postRender` یک قلاب ساخت است که زمانی که رندر SSG انجام شد، فراخوانی می‌شود. این امکان را به شما می‌دهد که محتوای teleports را در حین SSG مدیریت کنید. + +```ts +export default { + async postRender(context) { + // ... + } +} +``` + +```ts +interface SSGContext { + content: string + teleports?: Record + [key: string]: any +} +``` + +### transformHead + +- نوع: `(context: TransformContext) => Awaitable` + +`transformHead` یک قلاب ساخت است که برای تغییر head قبل از تولید هر صفحه استفاده می‌شود. این امکان را به شما می‌دهد که ورودی‌های head اضافه کنید که نمی‌توانند به صورت استاتیک به تنظیمات ویت‌پرس اضافه شوند. شما فقط باید ورودی‌های اضافی را برگردانید، آنها به صورت خودکار با موارد موجود ترکیب می‌شوند. + +::: warning هشدار +هیچ‌چیزی را در داخل `context` تغییر ندهید. +::: + +```ts +export default { + async transform + +Head(context) { + // ... + } +} +``` + +```ts +interface TransformContext { + page: string // به عنوان مثال index.md (نسبت به srcDir) + assets: string[] // همه دارایی‌های غیر js/css به عنوان URL عمومی کاملاً حل شده + siteConfig: SiteConfig + siteData: SiteData + pageData: PageData + title: string + description: string + head: HeadConfig[] + content: string +} +``` + +توجه داشته باشید که این قلاب فقط زمانی که سایت به صورت استاتیک تولید می‌شود فراخوانی می‌شود. در زمان توسعه فراخوانی نمی‌شود. اگر نیاز به اضافه کردن ورودی‌های head دینامیک در زمان توسعه دارید، می‌توانید به جای آن از قلاب [`transformPageData`](#transformpagedata) استفاده کنید: + +```ts +export default { + transformPageData(pageData) { + pageData.frontmatter.head ??= [] + pageData.frontmatter.head.push([ + 'meta', + { + name: 'og:title', + content: + pageData.frontmatter.layout === 'home' + ? `ویت‌پرس` + : `${pageData.title} | ویت‌پرس` + } + ]) + } +} +``` + +#### مثال: اضافه کردن یک URL قانونی `` + +```ts +export default { + transformPageData(pageData) { + const canonicalUrl = `https://example.com/${pageData.relativePath}` + .replace(/index\.md$/, '') + .replace(/\.md$/, '.html') + + pageData.frontmatter.head ??= [] + pageData.frontmatter.head.push([ + 'link', + { rel: 'canonical', href: canonicalUrl } + ]) + } +} +``` + +### transformHtml + +- نوع: `(code: string, id: string, context: TransformContext) => Awaitable` + +`transformHtml` یک قلاب ساخت است که برای تغییر محتوای هر صفحه قبل از ذخیره به دیسک استفاده می‌شود. + +::: warning هشدار +هیچ‌چیزی را در داخل `context` تغییر ندهید. همچنین، تغییر محتوای html ممکن است باعث مشکلات هیدراتاسیون در زمان اجرا شود. +::: + +```ts +export default { + async transformHtml(code, id, context) { + // ... + } +} +``` + +### transformPageData + +- نوع: `(pageData: PageData, context: TransformPageContext) => Awaitable | { [key: string]: any } | void>` + +`transformPageData` یک قلاب است که برای تغییر `pageData` هر صفحه استفاده می‌شود. شما می‌توانید `pageData` را به صورت مستقیم تغییر دهید یا مقادیر تغییر یافته را برگردانید که به داده‌های صفحه ادغام خواهند شد. + +::: warning هشدار +هیچ‌چیزی را در داخل `context` تغییر ندهید و دقت کنید که این ممکن است بر عملکرد سرور توسعه تاثیر بگذارد، به ویژه اگر در این قلاب درخواست‌های شبکه یا محاسبات سنگین (مانند تولید تصاویر) داشته باشید. می‌توانید برای منطق شرطی بررسی کنید `process.env.NODE_ENV === 'production'`. +::: + +```ts +export default { + async transformPageData(pageData, { siteConfig }) { + pageData.contributors = await getPageContributors(pageData.relativePath) + } + + // یا داده‌ها را برای ادغام برگردانید + async transformPageData(pageData, { siteConfig }) { + return { + contributors: await getPageContributors(pageData.relativePath) + } + } +} +``` + +```ts +interface TransformPageContext { + siteConfig: SiteConfig +} +``` \ No newline at end of file