From 6853dae708c8714e748aaa58b7eb0596dceff101 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 16 Jul 2024 15:03:18 +0330 Subject: [PATCH] docs(fa): add writing contents --- docs/.vitepress/config/fa.ts | 57 +- docs/fa/guide/asset-handling.md | 63 ++ docs/fa/guide/deploy.md | 6 +- docs/fa/guide/frontmatter.md | 48 ++ docs/fa/guide/i18n.md | 113 ++++ docs/fa/guide/markdown.md | 922 +++++++++++++++++++++++++++++ docs/fa/guide/routing.md | 8 +- docs/fa/guide/using-vue.md | 259 ++++++++ docs/fa/guide/what-is-vitepress.md | 10 +- docs/fa/index.md | 7 +- 10 files changed, 1450 insertions(+), 43 deletions(-) create mode 100644 docs/fa/guide/asset-handling.md create mode 100644 docs/fa/guide/frontmatter.md create mode 100644 docs/fa/guide/i18n.md create mode 100644 docs/fa/guide/markdown.md create mode 100644 docs/fa/guide/using-vue.md diff --git a/docs/.vitepress/config/fa.ts b/docs/.vitepress/config/fa.ts index 4fc5cb1c..5257ce5e 100644 --- a/docs/.vitepress/config/fa.ts +++ b/docs/.vitepress/config/fa.ts @@ -5,9 +5,18 @@ const require = createRequire(import.meta.url) const pkg = require('vitepress/package.json') export const fa = defineConfig({ - lang: 'en-US', + lang: 'fa-IR', description: 'Vite & Vue powered static site generator.', dir: 'rtl', + markdown: { + container: { + tipLabel: 'نکته', + warningLabel: 'اخطار', + dangerLabel: 'خطر', + infoLabel: 'اطلاعات', + detailsLabel: 'جزئیات' + } + }, themeConfig: { nav: nav(), sidebar: { @@ -163,45 +172,41 @@ function sidebarReference(): DefaultTheme.SidebarItem[] { ] } -const search: DefaultTheme.AlgoliaSearchOptions['locales'] = { +export const search: DefaultTheme.AlgoliaSearchOptions['locales'] = { fa: { - placeholder: 'Pesquisar documentos', + placeholder: 'جستجوی مستندات', translations: { button: { - buttonText: 'Pesquisar', - buttonAriaLabel: 'Pesquisar' + buttonText: 'جستجو', + buttonAriaLabel: 'جستجو' }, modal: { searchBox: { - resetButtonTitle: 'Limpar pesquisa', - resetButtonAriaLabel: 'Limpar pesquisa', - cancelButtonText: 'Cancelar', - cancelButtonAriaLabel: 'Cancelar' + resetButtonTitle: 'آغاز مجدد جستجو', + resetButtonAriaLabel: 'آغاز مجدد جستجو', + cancelButtonText: 'لغو', + cancelButtonAriaLabel: 'لغو' }, startScreen: { - recentSearchesTitle: 'Histórico de Pesquisa', - noRecentSearchesText: 'Nenhuma pesquisa recente', - saveRecentSearchButtonTitle: 'Salvar no histórico de pesquisas', - removeRecentSearchButtonTitle: 'Remover do histórico de pesquisas', - favoriteSearchesTitle: 'Favoritos', - removeFavoriteSearchButtonTitle: 'Remover dos favoritos' + recentSearchesTitle: 'جستجو‌های اخیر', + noRecentSearchesText: 'تاریخچه جستجویی یافت نشد.', + saveRecentSearchButtonTitle: 'ذخیره تاریخچه جستجو', + removeRecentSearchButtonTitle: 'حذف تاریخچه جستجو', + favoriteSearchesTitle: 'موارد دلخواه', + removeFavoriteSearchButtonTitle: 'حذف مورد دلخواه' }, errorScreen: { - titleText: 'Não foi possível obter resultados', - helpText: 'Verifique a sua conexão de rede' + titleText: 'نتیجه‌ای یافت نشد برای', + helpText: 'اتصال شبکه خود را بررسی کنید' }, footer: { - selectText: 'Selecionar', - navigateText: 'Navegar', - closeText: 'Fechar', - searchByText: 'Pesquisa por' + selectText: 'انتخاب', + navigateText: 'رفتن', + closeText: 'بستن', + searchByText: ' جستجو با ' }, noResultsScreen: { - noResultsText: 'Não foi possível encontrar resultados', - suggestedQueryText: 'Você pode tentar uma nova consulta', - reportMissingResultsText: - 'Deveriam haver resultados para essa consulta?', - reportMissingResultsLinkText: 'Clique para enviar feedback' + noResultsText: 'نتیجه‌ای یافت نشد برای' } } } diff --git a/docs/fa/guide/asset-handling.md b/docs/fa/guide/asset-handling.md new file mode 100644 index 00000000..09749cb8 --- /dev/null +++ b/docs/fa/guide/asset-handling.md @@ -0,0 +1,63 @@ +### مدیریت دارایی‌ها + +## ارجاع به دارایی‌های ایستا + +تمام فایل‌های Markdown به کامپوننت‌های Vue تبدیل و توسط [Vite](https://vitejs.dev/guide/assets.html) پردازش می‌شوند. شما می‌توانید، **و باید**، هر نوع دارایی را با استفاده از URL‌های نسبی مرجع قرار دهید: + +```md +![تصویر](./image.png) +``` + +شما می‌توانید دارایی‌های ایستا را در فایل‌های Markdown خود، کامپوننت‌های `*.vue` در قالب، استایل‌ها و فایل‌های `.css` ساده، با استفاده از مسیرهای عمومی مطلق (براساس ریشه پروژه) یا مسیرهای نسبی (براساس سیستم فایل شما) ارجاع دهید. روش دوم مشابه رفتاری است که در صورت استفاده از Vite، Vue CLI یا `file-loader` webpack با آن آشنا هستید. + +انواع شایع تصویر، رسانه و فایل فونت به طور خودکار شناسایی و به عنوان دارایی‌ها درج می‌شوند. + +::: tip فایل‌های لینک شده به عنوان دارایی محسوب نمی‌شوند +PDFها یا سند‌های دیگر که از طریق پیوندها در فایل‌های Markdown ارجاع داده شده‌اند به طور خودکار به عنوان دارایی در نظر گرفته نمی‌شوند. برای دسترسی به فایل‌های لینک شده، باید آن‌ها را به صورت دستی در دایرکتوری [`public`](#the-public-directory) پروژه قرار دهید. +::: + +تمام دارایی‌های ارجاع داده شده، شامل آن‌هایی که از مسیرهای مطلق استفاده می‌کنند، در مرحله تولید به دایرکتوری خروجی با نام فایلی بر اساس یک هش کپی خواهند شد. دارایی‌هایی که هرگز ارجاع نداده شوند، کپی نخواهند شد. دارایی‌های تصویر کوچک‌تر از 4 کیلوبایت به صورت base64 درون خطی می‌شوند - این می‌تواند از طریق گزینه پیکربندی [`vite`](../reference/site-config#vite) تنظیم شود. + +تمام ارجاع‌های مسیر **ایستا**، شامل مسیرهای مطلق، باید بر اساس ساختار دایرکتوری کاری شما تعیین شوند. + +## دایرکتوری عمومی + +گاهی اوقات ممکن است نیاز داشته باشید دارایی‌های ایستا را فراهم کنید که به صورت مستقیم در هیچ‌یک از Markdown یا کامپوننت‌های قالب شما ارجاع نشده‌اند، یا ممکن است بخواهید برخی فایل‌ها را با نام اصلی خود سرویس دهید. به عنوان مثال، فایل‌هایی مانند `robots.txt`، آیکون‌های fav، و آیکون‌های PWA. + +شما می‌توانید این فایل‌ها را در دایرکتوری `public` تحت [دایرکتوری منبع](./routing#source-directory) قرار دهید. به عنوان مثال، اگر ریشه پروژه شما `./docs` است و از محل پیش‌فرض دایرکتوری منبع استفاده می‌کنید، آنگاه دایرکتوری عمومی شما `./docs/public` خواهد بود. + +دارایی‌های قرار داده شده در `public` به صورت اصلی در ریشه دایرکتوری خروجی کپی خواهند شد. + +توجه داشته باشید که باید به فایل‌های قرار داده شده در `public` با استفاده از مسیر مطلق ریشه ارجاع دهید - به عنوان مثال، `public/icon.png` همیشه باید به عنوان `/icon.png` در کد منبع ارجاع داده شود. + +## URL پایه + +اگر وب‌سایت شما به URL غیر ریشه استقرار می‌یابد، باید گزینه `base` را در `.vitepress/config.js` تنظیم کنید. به عنوان مثال، اگر قصد دارید وب‌سایت خود را به `https://foo.github.io/bar/` استقرار دهید، آنگاه `base` باید به `'/bar/'` تنظیم شود (همیشه باید با یک خط شروع و پایان یابد). + +تمام مسیرهای دارایی ایستا شما به صورت خودکار پردازش می‌شوند تا با ارزش‌های `base` مختلف تطبیق یابند. به عنوان مثال، اگر به یک ارجاع مطلق به یک دارایی زیر `public` در Markdown خود اشاره کرده‌اید: + +```md +![تصویر](/image-inside-public.png) +``` + +در این حالت، شما **نیازی ندارید** که آن را به روز کنید وقتی که مقدار پیکربندی `base` را تغییر می‌دهید. + +اما، اگر شما در حال نویسندگی یک کامپوننت قالب هستید که به صورت پویا به دارایی‌ها لینک می‌دهد، به عنوان مثال یک تصویر که `src` آن براساس مقدار پیکربندی قالب است: + +```vue + +``` + +در این حالت، توصیه می‌شود که مسیر را با استفاده از کمکی [`withBase`](../reference/runtime-api#withbase) ارائه شده توسط VitePress بپوشانید: + +```vue + + + +``` \ No newline at end of file diff --git a/docs/fa/guide/deploy.md b/docs/fa/guide/deploy.md index cf14fd5a..114b8bc8 100644 --- a/docs/fa/guide/deploy.md +++ b/docs/fa/guide/deploy.md @@ -33,7 +33,7 @@ outline: deep $ npm run docs:preview ``` - دستور `preview` یک سرور وب استاتیک محلی راه‌اندازی می‌کند که دایرکتوری خروجی `.vitepress/dist` را در آدرس `http://localhost:4173` ارائه می‌دهد. شما می‌توانید از این امکان استفاده کنید تا اطمینان حاصل کنید که همه چیز قبل از رفع به محیط تولیدی به‌درستی نمایش داده می‌شود. + دستور `preview` یک سرور وب ایستا محلی راه‌اندازی می‌کند که دایرکتوری خروجی `.vitepress/dist` را در آدرس `http://localhost:4173` ارائه می‌دهد. شما می‌توانید از این امکان استفاده کنید تا اطمینان حاصل کنید که همه چیز قبل از رفع به محیط تولیدی به‌درستی نمایش داده می‌شود. 3. می‌توانید پورت سرور را با انتقال `--port` به‌عنوان یک آرگمان پیکربندی کنید. @@ -57,7 +57,7 @@ outline: deep اگر شما کنترلی بر روی سربرگ‌های HTTP در سرور تولیدی خود دارید، می‌توانید سربرگ‌های `cache-control` را پیکربندی کنید تا بهبود عملکرد در بازدیدهای تکراری داشته باشید. -بسیاری از فایل‌های استاتیک (مانند JavaScript، CSS و سایر فایل‌های وارد شده که در `public` نیستند) از نام‌های فایل با هش استفاده می‌کنند. اگر پیش‌نمایش تولیدی را با استفاده از تب شبکه ابزارهای توسعه مرورگر خود بررسی کنید، فایل‌هایی مانند `app.4f283b18.js` را خواهید دید. +بسیاری از فایل‌های ایستا (مانند JavaScript، CSS و سایر فایل‌های وارد شده که در `public` نیستند) از نام‌های فایل با هش استفاده می‌کنند. اگر پیش‌نمایش تولیدی را با استفاده از تب شبکه ابزارهای توسعه مرورگر خود بررسی کنید، فایل‌هایی مانند `app.4f283b18.js` را خواهید دید. این هش `4f283b18` از محتوای این فایل تولید شده است. اگر محتوا تغییر کند، URL‌ها نیز تغییر می‌کنند. این به این معنی است که می‌توانید برای این فایل‌ها سربرگ‌های حافظه نهان قدرتمند را استفاده کنید. همه این فایل‌ها در زیردایرکتوری `assets/` در دایرکتوری خروجی قرار می‌گیرند، بنابراین می‌توانید برای آن‌ها سربرگ زیر را پیکربندی کنید: @@ -294,7 +294,7 @@ Cache-Control: max-age=31536000,immutable ### Nginx -اینجا یک مثال از پیکربندی بلوک سرور Nginx است. این تنظیم شامل فشرده‌سازی gzip برای فایل‌های متن معمولی، قوانین برای سرویس فایل‌های استاتیک سایت VitePress شما با هدرهای مناسب برای حافظه‌نگهداری مناسب است و همچنین مدیریت `cleanUrls: true` می‌کند. +اینجا یک مثال از پیکربندی بلوک سرور Nginx است. این تنظیم شامل فشرده‌سازی gzip برای فایل‌های متن معمولی، قوانین برای سرویس فایل‌های ایستا سایت VitePress شما با هدرهای مناسب برای حافظه‌نگهداری مناسب است و همچنین مدیریت `cleanUrls: true` می‌کند. ```nginx server { diff --git a/docs/fa/guide/frontmatter.md b/docs/fa/guide/frontmatter.md new file mode 100644 index 00000000..3d6035bb --- /dev/null +++ b/docs/fa/guide/frontmatter.md @@ -0,0 +1,48 @@ +# Frontmatter + +## استفاده + +VitePress پشتیبانی از frontmatter YAML در تمام فایل‌های Markdown را دارد و آن‌ها را با استفاده از [gray-matter](https://github.com/jonschlinkert/gray-matter) تجزیه می‌کند. Frontmatter باید در بالای فایل Markdown قرار داشته باشد (قبل از هر عنصر از جمله برچسب‌های ` + + +``` + +## پشتیبانی از RTL (آزمایشی) + +برای پشتیبانی از RTL، `dir: 'rtl'` را در پیکربندی مشخص کنید و از پلاگین‌های PostCSS RTLCSS مانند ، یا استفاده کنید. باید پلاگین PostCSS خود را به کارگیری `:where([dir="ltr"])` و `:where([dir="rtl"])` به عنوان پیشوندها جلوگیری از مشکلات اولویت CSS استفاده کنید. \ No newline at end of file diff --git a/docs/fa/guide/markdown.md b/docs/fa/guide/markdown.md new file mode 100644 index 00000000..d3ca4f29 --- /dev/null +++ b/docs/fa/guide/markdown.md @@ -0,0 +1,922 @@ +# افزونه‌های Markdown + +VitePress با افزونه‌های مارک‌داون داخلی ارائه شده است. + +## لینک‌های هدر + +هدرها به طور خودکار لینک‌های anchor دریافت می‌کنند. نمایش anchor ها با استفاده از گزینه `markdown.anchor` قابل پیکربندی است. + +### anchor های سفارشی + +برای مشخص کردن تگ anchor سفارشی برای یک هدینگ به جای استفاده از تگ خودکار، یک پسوند به هدینگ اضافه کنید: + +``` +# Using custom anchors {#my-anchor} +``` + +این به شما امکان می‌دهد که به جای استفاده از به جای استفاده از `#using-custom-anchors`، به هدینگ به عنوان `#my-anchor` لینک دهید. + +## لینک‌ها + +هم لینک‌های داخلی و هم خارجی با دستورالعمل‌های خاصی ارائه می‌شوند. + +### لینک‌های داخلی + +لینک‌های داخلی به لینک روتر برای ناوبری SPA تبدیل می‌شوند. همچنین، هر `index.md` موجود در هر زیرپوشه به طور خودکار به `index.html` تبدیل می‌شود، با URL متناظر `/`. + +به عنوان مثال، با توجه به ساختار پوشه زیر: + +``` +. +├─ index.md +├─ foo +│ ├─ index.md +│ ├─ one.md +│ └─ two.md +└─ bar + ├─ index.md + ├─ three.md + └─ four.md +``` + +و با فرض این که شما در `foo/one.md` هستید: + +```md +[Home](/) +[foo](/foo/) +[foo heading](./#heading) +[bar - three](../bar/three) +[bar - three](../bar/three.md) +[bar - four](../bar/four.html) +``` + +### پسوند صفحه + +صفحات و لینک‌های داخلی به طور پیش‌فرض با پسوند `.html` تولید می‌شوند. + +### لینک‌های خارجی + +لینک‌های خروجی به طور خودکار دارای `target="_blank" rel="noreferrer"` هستند: + +- [vuejs.org](https://vuejs.org) +- [VitePress در GitHub](https://github.com/vuejs/vitepress) + +## Frontmatter + +[YAML frontmatter](https://jekyllrb.com/docs/front-matter/) به طور پیش‌فرض پشتیبانی می‌شود: + +```yaml +--- +title: عنوان صفحه +lang: fa-IR +--- +``` + +این داده‌ها برای بقیه صفحه در دسترس خواهد بود، همراه با تمامی اجزاهای سفارشی و تم. + +برای اطلاعات بیشتر، به [Frontmatter](../reference/frontmatter-config) مراجعه کنید. + +## جداول مانند Github + +**ورودی** + +```md +| Tables | Are | Cool | +| ------------- | :-----------: | ----: | +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | +``` + +**خروجی** + +| Tables | Are | Cool | +| ------------- | :-----------: | ----: | +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +## اموجی :tada: + +**ورودی** + +``` +:tada: :100: +``` + +**خروجی** + +:tada: :100: + +یک [لیست از همه اموجی ها](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs) در دسترس است. + +## فهرست مطالب + +**ورودی** + +``` +[[toc]] +``` + +**خروجی** + +[[toc]] + +نحوه پردازش فهرست مطالب با استفاده از گزینه `markdown.toc` قابل پیکربندی است. + +## کانتینرهای سفارشی + +کانتینرهای سفارشی می‌توانند توسط انواع، عناوین و محتویات خود تعریف شوند. + +### عنوان پیش‌فرض + +**ورودی** + +```md +::: info +این یک جعبه اطلاعات است. +::: + +::: tip +این یک نکته است. +::: + +::: warning +این یک هشدار است. +::: + +::: danger +این یک هشدار خطرناک است. +::: + +::: details +این یک بلوک جزئیات است. +::: +``` + +**خروجی** + +::: info +این یک جعبه اطلاعات است. +::: + +::: tip +این یک نکته است. +::: + +::: warning +این یک هشدار است. +::: + +::: danger +این یک هشدار خطرناک است. +::: + +::: details +این یک بلوک جزئیات است. +::: + +### عنوان سفارشی + +می‌توانید عنوان سفارشی را با اضافه کردن متن به انتهای نوع کانتینر تنظیم کنید. + +**ورودی** + +````md +::: danger ایست! +منطقه خطرناک، ادامه ندهید +::: + +::: details برای مشاهده کد کلیک کنید +```js +console.log('Hello, VitePress!') +``` +::: +```` + +**خروجی** + +::: danger ایست! +منطقه خطرناک، ادامه ندهید +::: + +::: details برای مشاهده کد کلیک کنید +```js +console.log('Hello, VitePress!') +``` +::: + +این همچنین امکان دارد که شما عنوان‌های سفارشی را به صورت global تنظیم کنید با اضافه کردن محتوای زیر به تنظیمات سایت. این امکان خاصا اگر به زبان انگلیسی نوشته نمی‌شود، بسیار مفید است: + +```ts +// config.ts +export default defineConfig({ + // ... + markdown: { + container: { + tipLabel: 'نکته', + warningLabel: 'اخطار', + dangerLabel: 'خطر', + infoLabel: 'اطلاعات', + detailsLabel: 'جزئیات' + } + } + // ... +}) +``` + +### `raw` + +این یک کانتینر ویژه است که می‌تواند برای جلوگیری از تداخل استایل و روتر با VitePress استفاده شود. این به ویژه زمانی مفید است که شما کتابخانه‌های کامپوننت را مستند کنید. می‌توانید همچنین [whyframe](https://whyframe.dev/docs/integrations/vitepress) را برای ایزوله‌تر شدن بیشتر بررسی کنید. + +**نحوه استفاده** + +```md +::: raw +بسته‌بندی در یک
+::: +``` + +کلاس `vp-raw` می‌تواند به صورت مستقیم بر روی عناصر استفاده شود. ایزوله‌سازی استایل در حال حاضر انتخابی است: + +- `postcss` را با مدیر بسته‌های مورد علاقه‌تان نصب کنید: + + ```sh + $ npm add -D postcss + ``` + +- یک فایل با نام `docs/postcss.config.mjs` ایجاد کنید و کد زیر را به آن اضافه کنید: + + ```js + import { postcssIsolateStyles } from 'vitepress' + + export default { + plugins: [postcssIsolateStyles()] + } + ``` + + این از [`postcss-prefix-selector`](https://github.com/postcss/postcss-load-config) استفاده می‌کند. می‌توانید گزینه‌های آن را به این صورت پاس بدهید: + + ```js + postcssIsolateStyles({ + includeFiles: [/vp-doc\.css/] // به طور پیش‌فرض /base\.css/ + }) + ``` + +## هشدارهای GitHub + +VitePress همچنین [هشدارهای GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) را برای نمایش به عنوان تماس‌ها پشتیبانی می‌کند. آن‌ها به همان شکلی که [کانتینرهای سفارشی](#custom-containers) نمایش داده می‌شوند. + +```md +> [!NOTE] +> اطلاعاتی که کاربران باید به آن توجه کنند، حتی اگر سریع بخوانند. + +> [!TIP] +> اطلاعات اختیاری برای کمک به کاربر برای موفقیت بیشتر. + +> [!IMPORTANT] +> اطلاعات حیاتی برای موفقیت کاربران. + +> [!WARNING] +> محتوای بحرانی که نیاز به توجه فوری کاربر دارد به دلیل خطرات پتانسیلی. + +> [!CAUTION] +> پیامدهای منفی احتمالی یک عمل. +``` + +> [!NOTE] +> اطلاعاتی که کاربران باید به آن توجه کنند، حتی اگر سریع بخوانند. + +> [!TIP] +> اطلاعات اختیاری برای کمک به کاربر برای موفقیت بیشتر. + +> [!IMPORTANT] +> اطلاعات حیاتی برای موفقیت کاربران. + +> [!WARNING] +> محتوای بحرانی که نیاز به توجه فوری کاربر دارد به دلیل خطرات پتانسیلی. + +> [!CAUTION] +> پیامدهای منفی احتمالی یک عمل. + +## Syntax Highlighting در بلوک‌های کد + +VitePress از [Shiki](https://github.com/shikijs/shiki) برای syntax highlighting زبان در بلوک‌های کد Markdown با استفاده از متن رنگی استفاده می‌کند. Shiki از تنوع وسیعی از زبان‌های برنامه‌نویسی پشتیبانی می‌کند. تنها کافی است که یک نام مستعار زبان معتبر به بکتیک‌ها ابتدایی کد اضافه کنید: + +**ورودی** + +```` +```js +export default { + name: 'MyComponent', + // ... +} +``` +```` + +```` +```html +
    +
  • + {{ todo.text }} +
    • +
+``` +```` + +**خروجی** + +```js +export default { + name: 'MyComponent' + // ... +} +``` + +```html +
    +
  • + {{ todo.text }} +
    • +
+``` + +یک [لیست از زبان‌های معتبر](https://shiki.style/languages) در مخزن Shiki موجود است. + +همچنین می‌توانید تم syntax highlighting را در تنظیمات برنامه سفارشی کنید. لطفاً به [گزینه‌های Markdown](../reference/site-config#markdown) برای جزئیات بیشتر مراجعه کنید. + +## برجسته‌سازی خطوط در بلوک‌های کد + +**ورودی** + +```` +```js{4} +export default { + data () { + return { + msg: 'برجسته‌سازی شده!' + } + } +} +``` +```` + +**خروجی** + +```js{4} +export default { + data () { + return { + msg: 'برجسته‌سازی شده!' + } + } +} +``` + +علاوه بر یک خط، می‌توانید چندین خط تکی، محدوده‌ها یا هر دو را نیز مشخص کنید: + +- محدوده‌های خط: به عنوان مثال `{5-8}`, `{3-10}`, `{10-17}` +- چند خط تک: به عنوان مثال `{4,7,9}` +- محدوده‌های خط و خط‌های تک: به عنوان مثال `{4,7-13,16,23-27,40}` + +**ورودی** + +```` +```js{1,4-6} +const message = 'Hello, World!'; + +console.log(message); +``` +```` + +**خروجی** + +```js{1,4-6} +const message = 'Hello, World!'; + +console.log(message); +``` + +## فکوس در بلاک‌های کد + +افزودن کامنت `// [!code focus]` به یک خط، روی آن فکوس می‌کند و بخش‌های دیگر کد را مات می‌کند. + +به‌علاوه، می‌توانید با استفاده از `// [!code focus:]` تعدادی خط را برای فکوس تعیین کنید. + +**ورودی** + +```` +```js +export default { + data () { + return { + msg: 'Focused!' // [!!code focus] + } + } +} +``` +```` + +**خروجی** + +```js +export default { + data() { + return { + msg: 'Focused!' // [!code focus] + } + } +} +``` + +## تفاوت‌های رنگی در بلاک‌های کد + +افزودن کامنت `// [!code --]` یا `// [!code ++]` به یک خط، یک تفاوت را در آن خط ایجاد می‌کند، با حفظ رنگ‌های بلاک کد. + +**ورودی** + +```` +```js +export default { + data () { + return { + msg: 'Removed' // [!!code --] + msg: 'Added' // [!!code ++] + } + } +} +``` +```` + +**خروجی** + +```js +export default { + data () { + return { + msg: 'Removed' // [!code --] + msg: 'Added' // [!code ++] + } + } +} +``` + +## خطاها و هشدارها در بلاک‌های کد + +افزودن کامنت `// [!code warning]` یا `// [!code error]` به یک خط، آن را مطابق با نوع، رنگ می‌کند. + +**ورودی** + +```` +```js +export default { + data () { + return { + msg: 'Error', // [!!code error] + msg: 'Warning' // [!!code warning] + } + } +} +``` +```` + +**خروجی** + +```js +export default { + data() { + return { + msg: 'Error', // [!code error] + msg: 'Warning' // [!code warning] + } + } +} +``` + +## شماره‌گذاری خطوط + +می‌توانید با استفاده از تنظیمات، شماره‌گذاری خطوط را برای هر بلاک کد فعال کنید: + +```js +export default { + markdown: { + lineNumbers: true + } +} +``` + +لطفاً [گزینه‌های markdown](../reference/site-config#markdown) را برای جزئیات بیشتر ببینید. + +می‌توانید با استفاده از `:line-numbers` / `:no-line-numbers` در بلاک‌های کد شماره‌گذاری خطوط را نادیده بگیرید یا تنظیمات اصلی را با `=` پس از `:line-numbers` سفارشی کنید. به عنوان مثال، `:line-numbers=2` به معنای شروع شماره‌گذاری از خط `2` است. + +**ورودی** + +````md +```ts {1} +// شماره‌گذاری خطوط به طور پیش‌فرض غیرفعال است +const line2 = 'این خط ۲ است' +const line3 = 'این خط ۳ است' +``` + +```ts:line-numbers {1} +// شماره‌گذاری خطوط فعال است +const line2 = 'این خط ۲ است' +const line3 = 'این خط ۳ است' +``` + +```ts:line-numbers=2 {1} +// شماره‌گذاری خطوط فعال است و از خط ۲ شروع می‌شود +const line3 = 'این خط ۳ است' +const line4 = 'این خط ۴ است' +``` +```` + +**خروجی** + +```ts {1} +// شماره‌گذاری خطوط به طور پیش‌فرض غیرفعال است +const line2 = 'این خط ۲ است' +const line3 = 'این خط ۳ است' +``` + +```ts:line-numbers {1} +// شماره‌گذاری خطوط فعال است +const line2 = 'این خط ۲ است' +const line3 = 'این خط ۳ است' +``` + +```ts:line-numbers=2 {1} +// شماره‌گذاری خطوط فعال است و از خط ۲ شروع می‌شود +const line3 = 'این خط ۳ است' +const line4 = 'این خط ۴ است' +``` + +## وارد کردن Snippet کد + +می‌توانید snippet های کد را از فایل‌های موجود با استفاده از دستور زیر وارد کنید: + +```md +<<< @/filepath +``` + +این دستور [highlight کردن خط](#line-highlighting-in-code-blocks) را نیز پشتیبانی می‌کند: + +```md +<<< @/filepath{highlightLines} +``` + +**ورودی** + +```md +<<< @/snippets/snippet.js{2} +``` + +**فایل کد** + +<<< @/snippets/snippet.js + +**خروجی** + +<<< @/snippets/snippet.js{2} + +::: tip +مقدار `@` با ریشه منبع مطابقت دارد. به‌طور پیش‌فرض، این ریشه پروژه VitePress است، مگر اینکه `srcDir` پیکربندی شده باشد. به‌طور جایگزینی، می‌توانید از مسیرهای نسبی وارد کنید: + +```md +<<< ../snippets/snippet.js +``` + +::: + +همچنین می‌توانید [ناحیه VS Code](https://code.visualstudio.com/docs/editor/codebasics#_folding) را برای اضافه کردن قسمت مربوطه فایل کد استفاده کنید. می‌توانید نام ناحیه سفارشی را پس از `#` به دنبال مسیر فایل تعیین کنید: + +**ورودی** + +```md +<<< @/snippets/snippet-with-region.js#snippet{1} +``` + +**فایل کد** + +<<< @/snippets/snippet-with-region.js + +**خروجی** + +<<< @/snippets/snippet-with-region.js#snippet{1} + +همچنین می‌توانید زبان را داخل آکولادها (`{}`) مشخص کنید: + +```md +<<< @/snippets/snippet.cs{c#} + + + +<<< @/snippets/snippet.cs{1,2,4-6 c#} + + + +<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers} +``` + +این قابلیت مفید است اگر زبان منبع نمی‌تواند از پسوند فایل استنتاج شود. + + +### گروه‌های کد + +می‌توانید چندین بلوک کد را به این شکل گروه‌بندی کنید: + +**ورودی** + +````md +::: code-group + +```js [config.js] +/** + * @type {import('vitepress').UserConfig} + */ +const config = { + // ... +} + +export default config +``` + +```ts [config.ts] +import type { UserConfig } from 'vitepress' + +const config: UserConfig = { + // ... +} + +export default config +``` + +::: +```` + +**خروجی** + +::: code-group + +```js [config.js] +/** + * @type {import('vitepress').UserConfig} + */ +const config = { + // ... +} + +export default config +``` + +```ts [config.ts] +import type { UserConfig } from 'vitepress' + +const config: UserConfig = { + // ... +} + +export default config +``` + +::: + +همچنین می‌توانید [قطعات کد](#import-code-snippets) را در گروه‌های کد وارد کنید: + +**ورودی** + +```md +::: code-group + + + +<<< @/snippets/snippet.js + + + +<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [قطعه با منطقه] +::: +``` + +**خروجی** + +::: code-group + +<<< @/snippets/snippet.js + +<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [قطعه با منطقه] +::: + +## ادغام فایل‌های Markdown + +می‌توانید یک فایل Markdown را در یک فایل Markdown دیگر، حتی در صورت وجود تو در تو، وارد کنید. + +::: tip +می‌توانید مسیر Markdown را با `@` پیش‌فرض کنید. این به عنوان ریشه منبع عمل می‌کند. به طور پیش‌فرض، ریشه پروژه VitePress است، مگر اینکه `srcDir` پیکربندی شده باشد. +::: + +به عنوان مثال، می‌توانید یک فایل Markdown نسبی را با استفاده از این کد وارد کنید: + +**ورودی** + +```md +# مستندات + +## مبانی + + +``` + +**قسمت فایل** (`parts/basics.md`) + +```md +بعضی موارد مربوط به شروع کار. + +### پیکربندی + +می‌توان با استفاده از `.foorc.json` ایجاد شد. +``` + +**کد معادل** + +```md +# مستندات + +## مبانی + +بعضی موارد مربوط به شروع کار. + +### پیکربندی + +می‌توان با استفاده از `.foorc.json` ایجاد شد. +``` + +همچنین از انتخاب یک محدوده خطی پشتیبانی می‌کند: + +**ورودی** + +```md +# مستندات + +## مبانی + + +``` + +**قسمت فایل** (`parts/basics.md`) + +```md +بعضی موارد مربوط به شروع کار. + +### پیکربندی + +می‌توان با استفاده از `.foorc.json` ایجاد شد. +``` + +**کد معادل** + +```md +# مستندات + +## مبانی + +### پیکربندی + +می‌توان با استفاده از `.foorc.json` ایجاد شد. +``` + +قالب محدوده خطی می‌تواند شامل `{3,}`, `{,10}`, `{1,10}` باشد. + +همچنین می‌توانید از [ناحیه VS Code](https://code.visualstudio.com/docs/editor/codebasics#_folding) برای اضافه کردن بخش متناظر فایل کد استفاده کنید. می‌توانید پس از `#` نام ناحیه سفارشی را پس از مسیر فایل دنبال کنید: + +**ورودی** + +```md +# مستندات + +## مبانی + + + +``` + +**قسمت فایل** (`parts/basics.md`) + +```md + +## استفاده خط 1 + +## استفاده خط 2 + +## استفاده خط 3 + +``` + +**کد معادل** + +```md +# مستندات + +## مبانی + +## استفاده خط 1 + +## استفاده خط 3 +``` + +::: warning +توجه داشته باشید که این اقدام منجر به خطا نمی‌شود اگر فایل شما وجود نداشته باشد. بنابراین، در استفاده از این ویژگی، مطمئن شوید که محتوا به درستی نمایش داده می‌شود. +::: + +## معادلات ریاضی + +در حال حاضر این گزینه اختیاری است. برای فعال‌سازی آن، باید `markdown-it-mathjax3` را نصب کرده و `markdown.math` را در فایل پیکربندی خود به `true` تنظیم کنید: + +```sh +npm add -D markdown-it-mathjax3 +``` + +```ts +// .vitepress/config.ts +export default { + markdown: { + math: true + } +} +``` + +**ورودی** + +```md +وقتی $a \ne 0$ است، دو حل برای $(ax^2 + bx + c = 0)$ وجود دارد و آن‌ها عبارتند از +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +**معادلات مکسول** + +| equation | description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| $\nabla \cdot \vec{\mathbf{B}} = 0$ | تنوع $\vec{\mathbf{B}}$ صفر است | +| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl $\vec{\mathbf{E}}$ نسبت به نرخ تغییر $\vec{\mathbf{B}}$ نسبی است | +| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _چیست؟_ | +``` + +**خروجی** + +وقتی $a \ne 0$ است، دو حل برای $(ax^2 + bx + c = 0)$ + +وجود دارد و آن‌ها عبارتند از +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +**معادلات مکسول** + +| equation | description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| $\nabla \cdot \vec{\mathbf{B}} = 0$ | تنوع $\vec{\mathbf{B}}$ صفر است | +| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl $\vec{\mathbf{E}}$ نسبت به نرخ تغییر $\vec{\mathbf{B}}$ نسبی است | +| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _چیست؟_ | + +## بارگذاری تنبلی تصویر + +می‌توانید بارگذاری تنبلی را برای هر تصویر اضافه شده از طریق Markdown با تنظیم `lazyLoading` به `true` در فایل پیکربندی فعال کنید: + +```js +export default { + markdown: { + image: { + // بارگذاری تنبلی تصویر به طور پیش‌فرض غیرفعال است + lazyLoading: true + } + } +} +``` + +## پیکربندی پیشرفته + +VitePress از [markdown-it](https://github.com/markdown-it/markdown-it) به عنوان نمایشگر Markdown استفاده می‌کند. اکثر افزونه‌های فوق را با استفاده از افزونه‌های سفارشی پیاده‌سازی کرده‌ایم. می‌توانید نمونه‌ای بیشتر از نمونه `markdown-it` را با استفاده از گزینه `markdown` در `.vitepress/config.js` سفارشی‌سازی کنید: + +```js +import { defineConfig } from 'vitepress' +import markdownItAnchor from 'markdown-it-anchor' +import markdownItFoo from 'markdown-it-foo' + +export default defineConfig({ + markdown: { + // گزینه‌های markdown-it-anchor + // https://github.com/valeriangalliat/markdown-it-anchor#usage + anchor: { + permalink: markdownItAnchor.permalink.headerLink() + }, + + // گزینه‌های @mdit-vue/plugin-toc + // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options + toc: { level: [1, 2] }, + + config: (md) => { + // استفاده از افزونه‌های markdown-it بیشتر! + md.use(markdownItFoo) + } + } +}) +``` + +برای دیدن لیست کامل خصوصیات قابل تنظیم، به [مرجع تنظیمات: پیکربندی برنامه](../reference/site-config#markdown) مراجعه کنید. \ No newline at end of file diff --git a/docs/fa/guide/routing.md b/docs/fa/guide/routing.md index 975d8b62..a61d1f53 100644 --- a/docs/fa/guide/routing.md +++ b/docs/fa/guide/routing.md @@ -26,7 +26,7 @@ guide/index.md --> /guide/index.html (قابل دسترس به عن guide/getting-started.md --> /guide/getting-started.html ``` -این صفحات HTML نهایی می‌توانند بر روی هر سرور وبی که قادر به ارائه فایل‌های استاتیک است، میزبانی شوند. +این صفحات HTML نهایی می‌توانند بر روی هر سرور وبی که قادر به ارائه فایل‌های ایستا است، میزبانی شوند. ## ریشه و دایرکتوری منبع @@ -139,7 +139,7 @@ src/getting-started.md --> /getting-started.html اگر این ویژگی برای شما در دسترس است، می‌توانید از گزینه پیکربندی خود VitePress به نام [`cleanUrls`](../reference/site-config#cleanurls) استفاده کنید تا: - لینک‌های ورودی بین صفحات بدون پسوند `.html` تولید شوند. -- اگر مسیر کنونی با `.html` ختم شود، مسیریاب به صورت تغییر مسیر مشتری به مسیر بدون پسوند انجام می‌دهد. +- اگر مسیر کنونی با `.html` ختم شود، مسیریاب به صورت تغییر مسیر کلاینت به مسیر بدون پسوند انجام می‌دهد. اگر امکان پیکربندی سرور شما برای این پشتیبانی وجود نداشته باشد، شما باید به صورت دستی به ساختار دایرکتوری زیر رجوع کنید: @@ -215,7 +215,7 @@ export default { ### فایل بارگیری مسیرها -از آنجایی که VitePress یک موتور سایت استاتیک است، مسیرهای ممکن باید در زمان ساخت تعیین شوند. بنابراین، یک صفحه مسیر پویا باید همراه با یک **فایل بارگیری مسیرها** همراه باشد. برای `packages/[pkg].md`، به `packages/[pkg].paths.js` (همچنین `.ts` پشتیبانی می‌شود) نیاز داریم: +از آنجایی که VitePress یک موتور سایت ایستا است، مسیرهای ممکن باید در زمان ساخت تعیین شوند. بنابراین، یک صفحه مسیر پویا باید همراه با یک **فایل بارگیری مسیرها** همراه باشد. برای `packages/[pkg].md`، به `packages/[pkg].paths.js` (همچنین `.ts` پشتیبانی می‌شود) نیاز داریم: ``` . @@ -329,7 +329,7 @@ export default { ### دسترسی به پارامترها در صفحه -شما می‌توانید از پارامترها برای انتقال داده‌های اضافی به هر صفحه استفاده کنید. فایل مسیر Markdown می‌تواند از پارامترهای صفحه کنونی در عبارات Vue با استفاده از خاصیت `$params` جهانی استفاده کند: +شما می‌توانید از پارامترها برای انتقال داده‌های اضافی به هر صفحه استفاده کنید. فایل مسیر Markdown می‌تواند از پارامترهای صفحه کنونی در عبارات Vue با استفاده از خاصیت `$params` global استفاده کند: ```md - نام بسته: {{ $params.pkg }} diff --git a/docs/fa/guide/using-vue.md b/docs/fa/guide/using-vue.md new file mode 100644 index 00000000..42fcb5cd --- /dev/null +++ b/docs/fa/guide/using-vue.md @@ -0,0 +1,259 @@ +# استفاده از Vue در Markdown + +در VitePress، هر فایل Markdown به HTML تبدیل شده و سپس به عنوان یک [کامپوننت فایل تکی Vue](https://vuejs.org/guide/scaling-up/sfc.html) پردازش می‌شود. این بدان معنی است که شما می‌توانید از هر ویژگی Vue در داخل Markdown استفاده کنید، شامل قالب‌بندی پویا، استفاده از کامپوننت‌های Vue، یا منطق کامپوننت Vue دلخواه در داخل صفحه با افزودن تگ ` + +## محتوای Markdown + +تعداد: {{ count }} + + + + +``` + +::: warning اجتناب از ` +``` + +## استفاده از Teleport + +در حال حاضر VitePress پشتیبانی از SSG برای teleport به body را دارد. برای اهداف دیگر، می‌توانید آنها را درون کامپوننت `` یا نشانه تله‌پورت به مکان مناسب در HTML صفحه نهایی خود از طریق [هوک postRender](../reference/site-config#postrender) درج کنید. + + + +::: details +<<< @/components/ModalDemo.vue +::: + +```md + + +
+ // ... +
+ + +``` + + + + \ No newline at end of file diff --git a/docs/fa/guide/what-is-vitepress.md b/docs/fa/guide/what-is-vitepress.md index 151dfd23..374f4713 100644 --- a/docs/fa/guide/what-is-vitepress.md +++ b/docs/fa/guide/what-is-vitepress.md @@ -1,6 +1,6 @@ # ویت‌پرس چیست؟ -ویت‌پرس یک [تولید کننده سایت استاتیک](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML استاتیک تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند. +ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند.
@@ -30,15 +30,15 @@ - **[افزونه‌های داخلی Markdown:](./markdown)** استفاده از Frontmatter، جداول، syntax highlighting... هرچه که بخواهید. ویت‌پرس به ویژه ویژگی‌های پیشرفته زیادی برای کار با بلوک‌های کد فراهم می‌کند، که آن را برای مستندات فنی بسیار مناسب می‌کند. -- **[Markdown بهبود یافته با Vue:](./using-vue)** هر صفحه Markdown نیز یک [کامپوننت تک فایل Vue](https://vuejs.org/guide/scaling-up/sfc.html) است، به لطف سازگاری 100٪ نحوی قالب Vue با HTML. شما می‌توانید از ویژگی‌های قالب‌بندی Vue یا کامپوننت‌های وارد شده Vue برای ایجاد تعامل در محتوای استاتیک خود استفاده کنید. +- **[Markdown بهبود یافته با Vue:](./using-vue)** هر صفحه Markdown نیز یک [کامپوننت تک فایل Vue](https://vuejs.org/guide/scaling-up/sfc.html) است، به لطف سازگاری 100٪ نحوی قالب Vue با HTML. شما می‌توانید از ویژگی‌های قالب‌بندی Vue یا کامپوننت‌های وارد شده Vue برای ایجاد تعامل در محتوای ایستا خود استفاده کنید. ## عملکرد -بر خلاف بسیاری از SSG‌های سنتی که هر ناوبری منجر به بارگذاری کامل صفحه می‌شود، یک وب‌سایت تولید شده توسط ویت‌پرس در بازدید اولیه HTML استاتیک را سرو می‌کند، اما برای ناوبری‌های بعدی در سایت به یک [برنامه تک صفحه‌ای](https://en.wikipedia.org/wiki/Single-page_application) (SPA) تبدیل می‌شود. به نظر ما، این مدل برای عملکرد بهترین تعادل را فراهم می‌کند: +بر خلاف بسیاری از SSG‌های سنتی که هر ناوبری منجر به بارگذاری کامل صفحه می‌شود، یک وب‌سایت تولید شده توسط ویت‌پرس در بازدید اولیه HTML ایستا را سرو می‌کند، اما برای ناوبری‌های بعدی در سایت به یک [برنامه تک صفحه‌ای](https://en.wikipedia.org/wiki/Single-page_application) (SPA) تبدیل می‌شود. به نظر ما، این مدل برای عملکرد بهترین تعادل را فراهم می‌کند: - **بارگذاری اولیه سریع** - بازدید اولیه از هر صفحه، HTML پیش‌پردازش شده استاتیک را برای سرعت بارگذاری سریع و بهینه‌سازی SEO سرو می‌کند. سپس صفحه یک بسته جاوااسکریپت را بارگذاری می‌کند که صفحه را به یک SPA Vue تبدیل می‌کند ("hydration"). بر خلاف فرضیات رایج که hydration برای SPA کند است، این فرآیند در واقع بسیار سریع است به لطف عملکرد خام Vue 3 و بهینه‌سازی‌های کامپایلر. در [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)، سایت‌های معمولی ویت‌پرس حتی در دستگاه‌های موبایل پایین‌رده با شبکه کند به امتیازهای عملکردی تقریباً کامل دست می‌یابند. + بازدید اولیه از هر صفحه، HTML پیش‌پردازش شده ایستا را برای سرعت بارگذاری سریع و بهینه‌سازی SEO سرو می‌کند. سپس صفحه یک بسته JavaScript را بارگذاری می‌کند که صفحه را به یک SPA Vue تبدیل می‌کند ("hydration"). بر خلاف فرضیات رایج که hydration برای SPA کند است، این فرآیند در واقع بسیار سریع است به لطف عملکرد خام Vue 3 و بهینه‌سازی‌های کامپایلر. در [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)، سایت‌های معمولی ویت‌پرس حتی در دستگاه‌های موبایل پایین‌رده با شبکه کند به امتیازهای عملکردی تقریباً کامل دست می‌یابند. - **ناوبری سریع پس از بارگذاری** @@ -46,7 +46,7 @@ - **تعامل بدون جریمه** - برای اینکه بتوانید بخش‌های پویا Vue جاسازی شده در داخل Markdown استاتیک را hydrated کنید، هر صفحه Markdown به عنوان یک کامپوننت Vue پردازش و به جاوااسکریپت کامپایل می‌شود. این ممکن است غیر بهینه به نظر برسد، اما کامپایلر Vue به اندازه کافی هوشمند است که بخش‌های استاتیک و پویا را جدا کند، هزینه hydration و اندازه محموله را به حداقل برساند. برای بارگذاری اولیه صفحه، بخش‌های استاتیک به صورت خودکار از محموله جاوااسکریپت حذف می‌شوند و در حین hydration نادیده گرفته می‌شوند. + برای اینکه بتوانید بخش‌های پویا Vue جاسازی شده در داخل Markdown ایستا را hydrated کنید، هر صفحه Markdown به عنوان یک کامپوننت Vue پردازش و به JavaScript کامپایل می‌شود. این ممکن است غیر بهینه به نظر برسد، اما کامپایلر Vue به اندازه کافی هوشمند است که بخش‌های ایستا و پویا را جدا کند، هزینه hydration و اندازه محموله را به حداقل برساند. برای بارگذاری اولیه صفحه، بخش‌های ایستا به صورت خودکار از محموله JavaScript حذف می‌شوند و در حین hydration نادیده گرفته می‌شوند. ## درباره VuePress چه؟ diff --git a/docs/fa/index.md b/docs/fa/index.md index 870a2f3f..3b0fabd7 100644 --- a/docs/fa/index.md +++ b/docs/fa/index.md @@ -34,15 +34,12 @@ features: details: استفاده مستقیم از syntax و کامپوننت‌های Vue در Markdown، یا ایجاد تم‌های شخصی به کمک Vue - icon: 🚀 title: ارسال سایت های سریع - details: بارگذاری اولیه سریع با HTML ایستا، ناوبری سریع پس از بارگیری با مسیریابی سمت مشتری + details: بارگذاری اولیه سریع با HTML ایستا، ناوبری سریع پس از بارگیری با مسیریابی سمت کلاینت ---