mirror of https://github.com/vuejs/vitepress
Amirhossein Alibakhshi
1 year ago
parent
18bc675c55
commit
a5b2e01d3a
@ -0,0 +1,23 @@
|
||||
# مهاجرت از ویت‌پرس 0.x
|
||||
|
||||
اگر از نسخه 0.x ویت‌پرس می‌آیید، تغییرات قابل توجهی به دلیل ویژگی‌ها و بهبودهای جدید وجود دارد. لطفاً این راهنما را دنبال کنید تا ببینید چگونه برنامه خود را به ویت‌پرس جدیدتر منتقل کنید.
|
||||
|
||||
## پیکربندی برنامه
|
||||
|
||||
- ویژگی بین‌المللی‌سازی هنوز اجرا نشده است.
|
||||
|
||||
## پیکربندی تم
|
||||
|
||||
- گزینه `sidebar` ساختار خود را تغییر داده است.
|
||||
- کلید `children` حالا به نام `items` نامیده می‌شود.
|
||||
- در حال حاضر ممکن است مورد بالادستی حاوی `link` نباشد. ما قصد داریم این گزینه را بازگردانیم.
|
||||
- `repo`، `repoLabel`، `docsDir`، `docsBranch`، `editLinks`، `editLinkText` به منظور API انعطاف‌پذیرتر حذف شده‌اند.
|
||||
- برای اضافه کردن لینک GitHub با آیکون به نوار ناوبری، از ویژگی [پیوندهای اجتماعی](../reference/default-theme-nav#navigation-links) استفاده کنید.
|
||||
- برای اضافه کردن ویژگی "ویرایش این صفحه"، از ویژگی [پیوند ویرایش](../reference/default-theme-edit-link) استفاده کنید.
|
||||
- گزینه `lastUpdated` حالا به `config.lastUpdated` و `themeConfig.lastUpdatedText` تقسیم شده است.
|
||||
- `carbonAds.carbon` به `carbonAds.code` تغییر کرده است.
|
||||
|
||||
## پیکربندی Frontmatter
|
||||
|
||||
- گزینه `home: true` به `layout: home` تغییر کرده است. همچنین، تنظیمات مربوط به صفحه اصلی بسیار تغییر کرده‌اند تا ویژگی‌های اضافی را ارائه دهند. برای جزئیات بیشتر، [راهنمای صفحه اصلی](../reference/default-theme-home-page) را ببینید.
|
||||
- گزینه `footer` به [`themeConfig.footer`](../reference/default-theme-config#footer) منتقل شده است.
|
||||
@ -0,0 +1,30 @@
|
||||
# مهاجرت از VuePress
|
||||
|
||||
## پیکربندی
|
||||
|
||||
### نوار کناری
|
||||
|
||||
نوار کناری دیگر به طور خودکار از frontmatter پر نمی‌شود. شما می‌توانید [frontmatter را خودتان بخوانید](https://github.com/vuejs/vitepress/issues/572#issuecomment-1170116225) تا نوار کناری به طور پویا پر شود. ابزارهای [اضافی برای این منظور](https://github.com/vuejs/vitepress/issues/96) ممکن است در آینده ارائه شود.
|
||||
|
||||
## Markdown
|
||||
|
||||
### تصاویر
|
||||
|
||||
برخلاف VuePress، ویت‌پرس وقتی شما از تصویر استاتیک استفاده می‌کنید، [`base`](./asset-handling#base-url) پیکربندی شما را به طور خودکار مدیریت می‌کند.
|
||||
|
||||
بنابراین، اکنون می‌توانید تصاویر را بدون استفاده از تگ `img` نمایش دهید.
|
||||
|
||||
```diff
|
||||
- <img :src="$withBase('/foo.png')" alt="foo">
|
||||
+ 
|
||||
```
|
||||
|
||||
::: هشدار
|
||||
برای تصاویر پویا، همچنان نیاز به استفاده از `withBase` به طوری که در [راهنمای Base URL](./asset-handling#base-url) نشان داده شده است، دارید.
|
||||
:::
|
||||
|
||||
از عبارت `!<img.*withBase\('(.*)'\).*alt="([^"]*)".*>` برای جستجو و جایگزینی با `` استفاده کنید تا تمام تصاویر را با سینتکس `` جایگزین کنید.
|
||||
|
||||
---
|
||||
|
||||
ادامه دارد...
|
||||
@ -0,0 +1,74 @@
|
||||
# رابط خط فرمان
|
||||
|
||||
## `vitepress dev`
|
||||
|
||||
شروع سرور توسعه ویت‌پرس با استفاده از دایرکتوری مشخص به عنوان ریشه. به طور پیش‌فرض از دایرکتوری فعلی استفاده می‌شود. دستور `dev` همچنین می‌تواند حذف شود زمانی که در دایرکتوری فعلی اجرا می‌شود.
|
||||
|
||||
### استفاده
|
||||
|
||||
```sh
|
||||
# شروع در دایرکتوری فعلی، بدون `dev`
|
||||
vitepress
|
||||
|
||||
# شروع در زیردایرکتوری
|
||||
vitepress dev [root]
|
||||
```
|
||||
|
||||
### گزینه‌ها
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| --------------- | ----------------------------------------------------------------- |
|
||||
| `--open [path]` | باز کردن مرورگر در زمان راه‌اندازی (`boolean \| string`) |
|
||||
| `--port <port>` | تعیین پورت (`number`) |
|
||||
| `--base <path>` | مسیر پایه عمومی (پیش‌فرض: `/`) (`string`) |
|
||||
| `--cors` | فعال‌سازی CORS |
|
||||
| `--strictPort` | خروج در صورت استفاده از پورت مشخص شده (`boolean`) |
|
||||
| `--force` | اجبار به نادیده گرفتن حافظه پنهان و بازسازی (`boolean`) |
|
||||
|
||||
## `vitepress build`
|
||||
|
||||
ساخت سایت ویت‌پرس برای تولید نهایی.
|
||||
|
||||
### استفاده
|
||||
|
||||
```sh
|
||||
vitepress build [root]
|
||||
```
|
||||
|
||||
### گزینه‌ها
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--mpa` (آزمایشی) | ساخت در حالت [MPA](../guide/mpa-mode) بدون هیدراسیون سمت مشتری (`boolean`) |
|
||||
| `--base <path>` | مسیر پایه عمومی (پیش‌فرض: `/`) (`string`) |
|
||||
| `--target <target>` | هدف ترنسپایل (پیش‌فرض: `"modules"`) (`string`) |
|
||||
| `--outDir <dir>` | دایرکتوری خروجی نسبت به **cwd** (پیش‌فرض: `<root>/.vitepress/dist`) (`string`) |
|
||||
| `--minify [minifier]` | فعال یا غیرفعال کردن فشرده‌سازی، یا تعیین فشرده‌سازی برای استفاده (پیش‌فرض: `"esbuild"`) (`boolean \| "terser" \| "esbuild"`) |
|
||||
| `--assetsInlineLimit <number>` | آستانه تبدیل پایه ۶۴ استاتیک به بایت (پیش‌فرض: `4096`) (`number`) |
|
||||
|
||||
## `vitepress preview`
|
||||
|
||||
پیش‌نمایش محلی برای ساخت تولیدی را نمایش دهید.
|
||||
|
||||
### استفاده
|
||||
|
||||
```sh
|
||||
vitepress preview [root]
|
||||
```
|
||||
|
||||
### گزینه‌ها
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| --------------- | ---------------------------------------- |
|
||||
| `--base <path>` | مسیر پایه عمومی (پیش‌فرض: `/`) (`string`) |
|
||||
| `--port <port>` | تعیین پورت (`number`) |
|
||||
|
||||
## `vitepress init`
|
||||
|
||||
شروع [جادوگر راه‌اندازی](../guide/getting-started#setup-wizard) در دایرکتوری فعلی.
|
||||
|
||||
### استفاده
|
||||
|
||||
```sh
|
||||
vitepress init
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
# نشان
|
||||
|
||||
برچسب به شما امکان می‌دهد وضعیت‌های مختلفی را به سربرگ‌های خود اضافه کنید. به عنوان مثال، می‌تواند مفید باشد تا نوع بخش را مشخص کنید یا نسخه‌های پشتیبانی شده را نشان دهید.
|
||||
|
||||
## استفاده
|
||||
|
||||
شما می‌توانید از کامپوننت `Badge` که به صورت جهانی در دسترس است، استفاده کنید.
|
||||
|
||||
```html
|
||||
### عنوان <Badge type="info" text="پیش‌فرض" />
|
||||
### عنوان <Badge type="tip" text="^1.9.0" />
|
||||
### عنوان <Badge type="warning" text="بتا" />
|
||||
### عنوان <Badge type="danger" text="هشدار" />
|
||||
```
|
||||
|
||||
کد بالا به صورت زیر نمایش داده می‌شود:
|
||||
|
||||
### عنوان <Badge type="info" text="پیش‌فرض" />
|
||||
### عنوان <Badge type="tip" text="^1.9.0" />
|
||||
### عنوان <Badge type="warning" text="بتا" />
|
||||
### عنوان <Badge type="danger" text="هشدار" />
|
||||
|
||||
## ارائه دادن محتوای دلخواه
|
||||
|
||||
`<Badge>` می‌پذیرد `children` که در برچسب نمایش داده خواهد شد.
|
||||
|
||||
```html
|
||||
### عنوان <Badge type="info">عنصر سفارشی</Badge>
|
||||
```
|
||||
|
||||
### عنوان <Badge type="info">عنصر سفارشی</Badge>
|
||||
|
||||
## سفارشی‌سازی رنگ نوع
|
||||
|
||||
شما می‌توانید استایل برچسب‌ها را با دوباره‌نویسی متغیرهای css سفارشی کنید. مقادیر پیش‌فرض به شرح زیر هستند:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-badge-info-border: transparent;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-badge-tip-border: transparent;
|
||||
--vp-badge-tip-text: var(--vp-c-brand-1);
|
||||
--vp-badge-tip-bg: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-badge-warning-border: transparent;
|
||||
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-badge-danger-border: transparent;
|
||||
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||
}
|
||||
```
|
||||
|
||||
## `<Badge>`
|
||||
|
||||
کامپوننت `<Badge>` پراپ‌های زیر را می‌پذیرد:
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
// وقتی `<slot>` ارسال می‌شود، این مقدار نادیده گرفته می‌شود.
|
||||
text?: string
|
||||
|
||||
// پیش‌فرض به `tip`.
|
||||
type?: 'info' | 'tip' | 'warning' | 'danger'
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
# تبلیغات Carbon
|
||||
|
||||
ویت‌پرس پشتیبانی داخلی برای [Carbon Ads](https://www.carbonads.net/) را دارد. با تعریف مشخصات تبلیغات Carbon در تنظیمات، ویت‌پرس تبلیغات را در صفحه نمایش می‌دهد.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
carbonAds: {
|
||||
code: 'your-carbon-code',
|
||||
placement: 'your-carbon-placement'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
این مقادیر برای فراخوانی اسکریپت CDN Carbon به شکل زیر استفاده می‌شوند.
|
||||
|
||||
```js
|
||||
`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
|
||||
```
|
||||
|
||||
برای یادگیری بیشتر درباره پیکربندی تبلیغات Carbon، لطفاً به [وب‌سایت Carbon Ads](https://www.carbonads.net/) مراجعه کنید.
|
||||
@ -0,0 +1,469 @@
|
||||
# پیکربندی پیش‌فرض تم
|
||||
|
||||
پیکربندی تم به شما امکان می‌دهد تا تم خود را سفارشی کنید. شما می‌توانید پیکربندی تم را از طریق گزینه `themeConfig` در فایل پیکربندی تعریف کنید:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
lang: 'en-US',
|
||||
title: 'ویت‌پرس',
|
||||
description: 'Vite & Vue powered static site generator.',
|
||||
|
||||
// پیکربندی‌های مربوط به تم.
|
||||
themeConfig: {
|
||||
logo: '/logo.svg',
|
||||
nav: [...],
|
||||
sidebar: { ... }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**گزینه‌های مستند شده در این صفحه تنها برای تم پیش‌فرض اعمال می‌شوند.** تم‌های مختلف انتظار دارند که پیکربندی تم متفاوتی داشته باشند. در هنگام استفاده از یک تم سفارشی، شیء پیکربندی تم به تم منتقل می‌شود تا تم بتواند بر اساس آن رفتار شرطی را تعریف کند.
|
||||
|
||||
## i18nRouting
|
||||
|
||||
- نوع: `boolean`
|
||||
|
||||
تغییر زبان به `zh` باعث تغییر URL از `/foo` (یا `/en/foo/`) به `/zh/foo` می‌شود. شما می‌توانید این رفتار را با تنظیم `themeConfig.i18nRouting` به `false` غیرفعال کنید.
|
||||
|
||||
## logo
|
||||
|
||||
- نوع: `ThemeableImage`
|
||||
|
||||
فایل لوگو برای نمایش در نوار ناوبری، به سمت راست قبل از عنوان سایت. یک رشته مسیر یا یک شیء برای تنظیم لوگو متفاوت برای حالت نوری/تاریک قبول می‌کند.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/logo.svg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
type ThemeableImage =
|
||||
| string
|
||||
| { src: string; alt?: string }
|
||||
| { light: string; dark: string; alt?: string }
|
||||
```
|
||||
|
||||
## siteTitle
|
||||
|
||||
- نوع: `string | false`
|
||||
|
||||
شما می‌توانید این مورد را سفارشی کنید تا عنوان سایت پیش‌فرض (`title` در پیکربندی برنامه) را در ناوبری جایگزین کنید. هنگامی که به `false` تنظیم می‌شود، عنوان در ناوبری غیرفعال می‌شود. این قابلیت مفید است زمانی که شما لوگو دارید که حاوی متن عنوان سایت است.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
siteTitle: 'Hello World'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## nav
|
||||
|
||||
- نوع: `NavItem`
|
||||
|
||||
پیکربندی برای موارد منوی ناوبری. جزئیات بیشتر در [تم پیش‌فرض: ناوبری](./default-theme-nav#navigation-links).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'راهنما', link: '/guide' },
|
||||
{
|
||||
text: 'منوی کشویی',
|
||||
items: [
|
||||
{ text: 'مورد الف', link: '/item-1' },
|
||||
{ text: 'مورد ب', link: '/item-2' },
|
||||
{ text: 'مورد ج', link: '/item-3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
type NavItem = NavItemWithLink | NavItemWithChildren
|
||||
|
||||
interface NavItemWithLink {
|
||||
text: string
|
||||
link: string
|
||||
activeMatch?: string
|
||||
target?: string
|
||||
rel?: string
|
||||
noIcon?: boolean
|
||||
}
|
||||
|
||||
interface NavItemChildren {
|
||||
text?: string
|
||||
items: NavItemWithLink[]
|
||||
}
|
||||
|
||||
interface NavItemWithChildren {
|
||||
text?: string
|
||||
items: (NavItemChildren | NavItemWithLink)[]
|
||||
activeMatch?: string
|
||||
}
|
||||
```
|
||||
|
||||
## sidebar
|
||||
|
||||
- نوع: `Sidebar`
|
||||
|
||||
پیکربندی برای موارد منوی نوار کناری. جزئیات بیشتر در [تم پیش‌فرض: نوار کناری](./default-theme-sidebar).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
sidebar: [
|
||||
{
|
||||
text: 'راهنما',
|
||||
items: [
|
||||
{ text: 'معرفی', link: '/introduction' },
|
||||
{ text: 'شروع کار', link: '/getting-started' },
|
||||
...
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export type Sidebar = SidebarItem[] | SidebarMulti
|
||||
|
||||
export interface SidebarMulti {
|
||||
[path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
|
||||
}
|
||||
|
||||
export type SidebarItem = {
|
||||
/**
|
||||
* برچسب متنی مورد.
|
||||
*/
|
||||
text?: string
|
||||
|
||||
/**
|
||||
* لینک مورد.
|
||||
*/
|
||||
link?: string
|
||||
|
||||
/**
|
||||
* فرزندان مورد.
|
||||
*/
|
||||
items?: SidebarItem[]
|
||||
|
||||
/**
|
||||
* اگر مشخص نشده باشد، گروه قابل جمع‌شدن نیست.
|
||||
*
|
||||
* اگر `true` باشد، گروه قابل جمع‌شدن است و به طور پیش‌فرض جمع شده است
|
||||
*
|
||||
* اگر `false` باشد، گروه قابل جمع‌شدن است اما به طور پیش‌فرض باز شده است
|
||||
*/
|
||||
collapsed?: boolean
|
||||
|
||||
/**
|
||||
* مسیر پایه برای موارد فرزند.
|
||||
*/
|
||||
base?: string
|
||||
|
||||
/**
|
||||
* سفارشی‌سازی متنی که در پا صفحه قبلی/بعدی نمایش داده می‌شود.
|
||||
*/
|
||||
docFooterText?: string
|
||||
|
||||
rel?: string
|
||||
target?: string
|
||||
}
|
||||
```
|
||||
|
||||
## aside
|
||||
|
||||
- نوع: `boolean | 'left'`
|
||||
- پیش‌فرض: `true`
|
||||
- می‌تواند به صورت خودکار برای هر صفحه از طریق [frontmatter](./frontmatter-config#aside) بازنویسی شود.
|
||||
|
||||
تنظیم این مقدار به `false` از رندر کردن کانتینر اطراف خودداری می‌کند.\
|
||||
تنظیم این مقدار به `true` کانتینر اطراف را به راست رندر می‌کند.\
|
||||
تنظیم این مقدار به `left` کانتینر اطراف را به چپ رندر می‌کند.
|
||||
|
||||
اگر می‌خواهید آن را برای تمام نمایه‌گرها غیرفعال کنید، به جای آن باید از `outline: false` استفاده کنید.
|
||||
|
||||
## outline
|
||||
|
||||
- نوع: `Outline | Outline['level'] | false`
|
||||
- می‌تواند به صورت خودکار برای هر صفحه از طریق [frontmatter](./frontmatter-config#outline) بازنویسی شود.
|
||||
|
||||
تنظیم این مقدار به `false` از
|
||||
|
||||
رندر کردن کانتینر آوند خودداری می‌کند. به این رابط مراجعه کنید تا جزئیات بیشتری را بدانید:
|
||||
|
||||
```ts
|
||||
interface Outline {
|
||||
/**
|
||||
* سطوح سرفصل‌هایی که در آوند نمایش داده خواهند شد.
|
||||
* یک عدد تک را به این معنا است که تنها سرفصل‌های آن سطح نمایش داده می‌شوند.
|
||||
* اگر یک دوتایی گذر داده شود، عدد اول سطح حداقل و عدد دوم سطح حداکثر است.
|
||||
* `'deep'` مانند `[2، 6]` است، که به معنای همه سرفصل‌ها از `<h2>` تا `<h6>` است.
|
||||
*
|
||||
* @default 2
|
||||
*/
|
||||
level?: number | [number، number] | 'deep'
|
||||
|
||||
/**
|
||||
* عنوانی که باید در آوند نمایش داده شود.
|
||||
*
|
||||
* @default 'On this page'
|
||||
*/
|
||||
label?: string
|
||||
}
|
||||
```
|
||||
|
||||
## socialLinks
|
||||
|
||||
- نوع: `SocialLink[]`
|
||||
|
||||
می‌توانید این گزینه را تعریف کنید تا لینک‌های حساب اجتماعی خود را با آیکون‌ها در ناوبری نمایش دهید.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
|
||||
{ icon: 'twitter', link: '...' },
|
||||
// شما همچنین می‌توانید آیکون‌های سفارشی را با ارسال SVG به عنوان رشته اضافه کنید:
|
||||
{
|
||||
icon: {
|
||||
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
|
||||
},
|
||||
link: '...',
|
||||
// شما همچنین می‌توانید برچسب سفارشی را برای دسترسی (اختیاری اما توصیه می‌شود) شامل کنید:
|
||||
ariaLabel: 'لینک جذاب'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
interface SocialLink {
|
||||
icon: SocialLinkIcon
|
||||
link: string
|
||||
ariaLabel?: string
|
||||
}
|
||||
|
||||
type SocialLinkIcon =
|
||||
| 'discord'
|
||||
| 'facebook'
|
||||
| 'github'
|
||||
| 'instagram'
|
||||
| 'linkedin'
|
||||
| 'mastodon'
|
||||
| 'npm'
|
||||
| 'slack'
|
||||
| 'twitter'
|
||||
| 'x'
|
||||
| 'youtube'
|
||||
| { svg: string }
|
||||
```
|
||||
|
||||
## footer
|
||||
|
||||
- نوع: `Footer`
|
||||
- می‌تواند به صورت خودکار برای هر صفحه از طریق [frontmatter](./frontmatter-config#footer) بازنویسی شود.
|
||||
|
||||
پیکربندی پا. شما می‌توانید پیام یا متن حق کپی را در پا اضافه کنید، با این حال، فقط زمانی نمایش داده می‌شود که صفحه شامل نوار کناری نباشد. این به دلایل طراحی است.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'منتشر شده تحت مجوز MIT.',
|
||||
copyright: 'حق نشر © 2019-present Evan You'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface Footer {
|
||||
message?: string
|
||||
copyright?: string
|
||||
}
|
||||
```
|
||||
|
||||
## editLink
|
||||
|
||||
- نوع: `EditLink`
|
||||
- می‌تواند به صورت خودکار برای هر صفحه از طریق [frontmatter](./frontmatter-config#editlink) بازنویسی شود.
|
||||
|
||||
پیوند ویرایش به شما امکان می‌دهد که یک لینک به ویرایش صفحه را در خدمات مدیریت گیت مانند GitHub یا GitLab نمایش دهید. برای جزئیات بیشتر به [تم پیش‌فرض: لینک ویرایش](./default-theme-edit-link) مراجعه کنید.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||
text: 'ویرایش این صفحه در GitHub'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface EditLink {
|
||||
pattern: string
|
||||
text?: string
|
||||
}
|
||||
```
|
||||
|
||||
## lastUpdated
|
||||
|
||||
- نوع: `LastUpdatedOptions`
|
||||
|
||||
امکانات سفارشی‌سازی برای متن به‌روز شده و فرمت تاریخ.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
lastUpdated: {
|
||||
text: 'به‌روزرسانی شده در',
|
||||
formatOptions: {
|
||||
dateStyle: 'full',
|
||||
timeStyle: 'medium'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface LastUpdatedOptions {
|
||||
/**
|
||||
* @default 'آخرین به‌روزرسانی'
|
||||
*/
|
||||
text?: string
|
||||
|
||||
/**
|
||||
* @default
|
||||
* { dateStyle: 'short', timeStyle: 'short' }
|
||||
*/
|
||||
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
|
||||
}
|
||||
```
|
||||
|
||||
## algolia
|
||||
|
||||
- نوع: `AlgoliaSearch`
|
||||
|
||||
یک گزینه برای پشتیبانی از جستجو در سایت مستندات خود با استفاده از [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). بیشتر در [تم پیش‌فرض: جستجو](./default-theme-search) بیاموزید.
|
||||
|
||||
```ts
|
||||
export interface AlgoliaSearchOptions extends DocSearchProps {
|
||||
locales?: Record<string, Partial<DocSearchProps>>
|
||||
}
|
||||
```
|
||||
|
||||
گزینه‌های کامل را [اینجا](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts) مشاهده کنید.
|
||||
|
||||
## carbonAds {#carbon-ads}
|
||||
|
||||
- نوع: `CarbonAdsOptions`
|
||||
|
||||
یک گزینه برای نمایش [Carbon Ads](https://www.carbonads.net/).
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
carbonAds: {
|
||||
code: 'your-carbon-code',
|
||||
placement: 'your-carbon-placement'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface CarbonAdsOptions {
|
||||
code: string
|
||||
placement: string
|
||||
}
|
||||
```
|
||||
|
||||
بیشتر در [تم پیش‌فرض: Carbon Ads](./default-theme-carbon-ads) بیاموزید.
|
||||
|
||||
## docFooter
|
||||
|
||||
- نوع: `DocFooter`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی متنی که در بالای لینک‌های قبلی و بعدی نمایش داده می‌شود استفاده شود. مفید است اگر مستندات خود را به زبانی غیر از انگلیسی نوشته باشید. همچنین می‌تواند برای غیرفعال کردن لینک‌های قبلی/بعدی به صورت جهانی استفاده شود. اگر می‌خواهید لینک‌های قبلی/بعدی را به صورت انتخابی فعال
|
||||
|
||||
/غیرفعال کنید، می‌توانید از [frontmatter](./default-theme-prev-next-links) استفاده کنید.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
docFooter: {
|
||||
prev: 'صفحه قبلی',
|
||||
next: 'صفحه بعدی'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface DocFooter {
|
||||
prev?: string | false
|
||||
next?: string | false
|
||||
}
|
||||
```
|
||||
|
||||
## darkModeSwitchLabel
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `ظاهر`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی برچسب سوئیچ حالت تاریک استفاده شود. این برچسب تنها در نمای تلفن همراه نمایش داده می‌شود.
|
||||
|
||||
## lightModeSwitchTitle
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `تغییر به تم روشن`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی عنوان سوئیچ حالت روشن که در بالا حاشیه دار می‌شود، استفاده شود.
|
||||
|
||||
## darkModeSwitchTitle
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `تغییر به تم تاریک`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی عنوان سوئیچ حالت تاریک که در بالا حاشیه دار می‌شود، استفاده شود.
|
||||
|
||||
## sidebarMenuLabel
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `منو`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی برچسب منوی نوار کناری استفاده شود. این برچسب تنها در نمای تلفن همراه نمایش داده می‌شود.
|
||||
|
||||
## returnToTopLabel
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `بازگشت به بالا`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی برچسب دکمه بازگشت به بالا استفاده شود. این برچسب تنها در نمای تلفن همراه نمایش داده می‌شود.
|
||||
|
||||
## langMenuLabel
|
||||
|
||||
- نوع: `string`
|
||||
- پیش‌فرض: `تغییر زبان`
|
||||
|
||||
می‌تواند برای سفارشی‌سازی برچسب aria- توگل زبان در ناوبری استفاده شود. این فقط در صورت استفاده از [i18n](../guide/i18n) استفاده می‌شود.
|
||||
|
||||
## externalLinkIcon
|
||||
|
||||
- نوع: `boolean`
|
||||
- پیش‌فرض: `false`
|
||||
|
||||
آیا باید نمایش آیکون لینک خارجی کنار لینک‌های خارجی در مارک‌داون باشد.
|
||||
@ -0,0 +1,60 @@
|
||||
# پیوند ویرایش
|
||||
|
||||
## پیکربندی سطح سایت
|
||||
|
||||
پیوند ویرایش به شما این امکان را می‌دهد که یک پیوند به صفحه ویرایش را در خدمات مدیریت گیت مانند GitHub یا GitLab نمایش دهید. برای فعال‌سازی آن، گزینه `themeConfig.editLink` را به پیکربندی خود اضافه کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
گزینه `pattern` ساختار URL را برای پیوند تعیین می‌کند و `:path` با مسیر صفحه جایگزین خواهد شد.
|
||||
|
||||
همچنین می‌توانید یک تابع خالص ارائه دهید که `PageData` را به عنوان آرگومان دریافت کرده و رشته URL را برمی‌گرداند.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: ({ filePath }) => {
|
||||
if (filePath.startsWith('packages/')) {
|
||||
return `https://github.com/acme/monorepo/edit/main/${filePath}`
|
||||
} else {
|
||||
return `https://github.com/acme/monorepo/edit/main/docs/${filePath}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
این تابع نباید اثر جانبی داشته باشد و هیچ چیز خارج از دامنه خود را دسترسی ندهد، زیرا که در مرورگر سریالیزه و اجرا خواهد شد.
|
||||
|
||||
به طور پیش‌فرض، این عبارت "ویرایش این صفحه" را در پایین صفحه مستندات اضافه می‌کند. می‌توانید این متن را با تعریف گزینه `text` سفارشی‌سازی کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||
text: 'ویرایش این صفحه در GitHub'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## پیکربندی Frontmatter
|
||||
|
||||
می‌توانید این امکان را برای هر صفحه با استفاده از گزینه `editLink` در frontmatter غیرفعال کنید:
|
||||
|
||||
```yaml
|
||||
---
|
||||
editLink: false
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
# پاورقی
|
||||
|
||||
وقتی `themeConfig.footer` حاضر باشد، ویت‌پرس پاورقی جهانی را در پایین صفحه نمایش می‌دهد.
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'Released under the MIT License.',
|
||||
copyright: 'Copyright © 2019-present Evan You'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
export interface Footer {
|
||||
// پیام نمایش داده شده درست قبل از حق نسخه.
|
||||
message?: string
|
||||
|
||||
// متن حق نسخه واقعی.
|
||||
copyright?: string
|
||||
}
|
||||
```
|
||||
|
||||
پیکربندی بالا همچنین از رشته‌های HTML پشتیبانی می‌کند. بنابراین، به عنوان مثال، اگر می‌خواهید متن پاورقی دارای برخی از لینک‌ها باشد، می‌توانید پیکربندی را به شکل زیر تنظیم کنید:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
themeConfig: {
|
||||
footer: {
|
||||
message: 'Released under the <a href="https://github.com/vuejs/vitepress/blob/main/LICENSE">MIT License</a>.',
|
||||
copyright: 'Copyright © 2019-present <a href="https://github.com/yyx990803">Evan You</a>'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning هشدار
|
||||
تنها عناصر مستقیم می‌توانند در `message` و `copyright` استفاده شوند زیرا در داخل یک عنصر `<p>` رندر می‌شوند. اگر می‌خواهید عناصر بلوکی را اضافه کنید، در نظر داشته باشید که به جای این، از [اسلات `layout-bottom`](../guide/extending-default-theme#layout-slots) استفاده کنید.
|
||||
:::
|
||||
|
||||
توجه داشته باشید که پاورقی نمایش داده نمی‌شود زمانی که [نوار کناری](./default-theme-sidebar) قابل مشاهده باشد.
|
||||
|
||||
## پیکربندی Frontmatter
|
||||
|
||||
این می‌تواند برای هر صفحه با استفاده از گزینه `footer` در frontmatter غیرفعال شود:
|
||||
|
||||
```yaml
|
||||
---
|
||||
footer: false
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,193 @@
|
||||
# صفحه اصلی
|
||||
|
||||
قالب پیش‌فرض ویت‌پرس یک طرح صفحه اصلی فراهم می‌کند که می‌توانید آن را همچنین در [صفحه اصلی این سایت](../) مشاهده کنید. شما می‌توانید آن را در هر یک از صفحات خود با تعیین `layout: home` در [frontmatter](./frontmatter-config) استفاده کنید.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
اما این گزینه به تنهایی خیلی کاربردی نخواهد بود. شما می‌توانید با اضافه کردن بخش‌های "قالب‌های پیش‌فرض" مختلف، چندین بخش متفاوت را به صفحه اصلی اضافه کنید مانند `hero` و `features`.
|
||||
|
||||
## بخش Hero
|
||||
|
||||
بخش Hero در بالای صفحه اصلی قرار دارد. در ادامه می‌توانید نحوه پیکربندی بخش Hero را ببینید.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: ویت‌پرس
|
||||
text: Vite & Vue powered static site generator.
|
||||
tagline: Lorem ipsum...
|
||||
image:
|
||||
src: /logo.png
|
||||
alt: ویت‌پرس
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Get Started
|
||||
link: /guide/what-is-vitepress
|
||||
- theme: alt
|
||||
text: View on GitHub
|
||||
link: https://github.com/vuejs/vitepress
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
interface Hero {
|
||||
// رشته نمایش داده شده در بالای `text`. همراه با رنگ برند و انتظار می‌رود که کوتاه باشد، مانند نام محصول.
|
||||
name?: string
|
||||
|
||||
// متن اصلی بخش Hero. این به عنوان تگ `h1` تعریف می‌شود.
|
||||
text: string
|
||||
|
||||
// تگ‌لاین نمایش داده شده زیر `text`.
|
||||
tagline?: string
|
||||
|
||||
// تصویر که در کنار ناحیه متن و تگ‌لاین نمایش داده می‌شود.
|
||||
image?: ThemeableImage
|
||||
|
||||
// دکمه‌های اقدام برای نمایش در بخش Hero صفحه اصلی.
|
||||
actions?: HeroAction[]
|
||||
}
|
||||
|
||||
type ThemeableImage =
|
||||
| string
|
||||
| { src: string; alt?: string }
|
||||
| { light: string; dark: string; alt?: string }
|
||||
|
||||
interface HeroAction {
|
||||
// رنگ تم دکمه. به طور پیش‌فرض `brand` است.
|
||||
theme?: 'brand' | 'alt'
|
||||
|
||||
// برچسب دکمه.
|
||||
text: string
|
||||
|
||||
// مقصد لینک دکمه.
|
||||
link: string
|
||||
|
||||
// ویژگی هدف لینک.
|
||||
target?: string
|
||||
|
||||
// ویژگی rel لینک.
|
||||
rel?: string
|
||||
}
|
||||
```
|
||||
|
||||
### سفارشی‌سازی رنگ نام
|
||||
|
||||
ویت‌پرس از رنگ برند (`--vp-c-brand-1`) برای `name` استفاده می‌کند. با این حال، شما می‌توانید این رنگ را با جایگذاری متغیر `--vp-home-hero-name-color` سفارشی کنید.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-home-hero-name-color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
همچنین می‌توانید با ترکیب `--vp-home-hero-name-background`، رنگ گرادیانت `name` را تعیین کنید.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
|
||||
}
|
||||
```
|
||||
|
||||
## بخش ویژگی‌ها
|
||||
|
||||
در بخش ویژگی‌ها، می‌توانید هر تعدادی ویژگی که مایلید پس از بخش Hero نمایش دهید، لیست کنید. برای پیکربندی آن، گزینه `features` را به frontmatter ارسال کنید.
|
||||
|
||||
می‌توانید برای هر ویژگی آیکونی ارائه دهید که می‌تواند یک ایموجی یا هر نوع تصویر دیگری باشد. زمانی که آیکون پیکربندی شده یک تصویر است (svg، png، jpeg...). باید آیکون را با عرض و ارتفاع مناسب ارائه دهید. شما همچنین می‌توانید توضیحات، اندازه داخلی آن و نسخه‌های آن برای تم تاریک و روشن را ارائه دهید هنگام لزوم.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
|
||||
features:
|
||||
- icon: 🛠️
|
||||
title: ساده و کم حجم، همیشه
|
||||
details: Lorem ipsum...
|
||||
- icon:
|
||||
src: /cool-feature-icon.svg
|
||||
title: ویژگی جالب دیگر
|
||||
details: Lorem ipsum...
|
||||
- icon:
|
||||
dark: /dark-feature-icon.svg
|
||||
light: /light-feature-icon.svg
|
||||
title: ویژگی جالب دیگر
|
||||
details: Lorem ipsum...
|
||||
---
|
||||
```
|
||||
|
||||
```ts
|
||||
interface Feature {
|
||||
// نمایش آیکون در هر جعبه ویژگی.
|
||||
icon?: FeatureIcon
|
||||
|
||||
// عنوان ویژگی.
|
||||
title: string
|
||||
|
||||
// جزئیات ویژگی.
|
||||
details: string
|
||||
|
||||
// لینک زمانی که بر روی جزئیات کلیک می‌کنید. لینک می‌تواند داخلی یا خارجی باشد.
|
||||
//
|
||||
// به عنوان مثال: `guide/reference/default-theme-home-page` یا `https://example.com`
|
||||
link?: string
|
||||
|
||||
// متن لینکی که داخل جزئیات کامپوننت نمایش داده می‌شود. بهتر است با گزینه `link` استفاده شود.
|
||||
//
|
||||
// به عنوان مثال: `بیشتر بدانید`، `صفحه بازدید` و غیره.
|
||||
linkText?: string
|
||||
|
||||
// ویژگی rel لینک برای گزینه `link`.
|
||||
//
|
||||
// به عنوان مثال: `external`
|
||||
rel?: string
|
||||
|
||||
// ویژگی target لینک برای گزینه `link`.
|
||||
target?: string
|
||||
}
|
||||
|
||||
type FeatureIcon =
|
||||
| string
|
||||
| { src: string; alt?: string; width?: string; height: string }
|
||||
| {
|
||||
light: string
|
||||
dark: string
|
||||
alt?: string
|
||||
width?: string
|
||||
height: string
|
||||
}
|
||||
```
|
||||
|
||||
## محتوای Markdown
|
||||
|
||||
می‌توانید محتوای اضافی را به صفحه اصلی سایت خود اضافه کنید فقط با افزودن Markdown زیر تقسیم‌کننده `---` در پایین frontmatter.
|
||||
|
||||
````md
|
||||
---
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name
|
||||
|
||||
: ویت‌پرس
|
||||
text: Vite & Vue powered static site generator.
|
||||
---
|
||||
|
||||
## شروع کردن
|
||||
|
||||
می‌توانید بلافاصله با استفاده از `npx` از ویت‌پرس شروع کنید!
|
||||
|
||||
```sh
|
||||
npm init
|
||||
npx vitepress init
|
||||
```
|
||||
````
|
||||
|
||||
::: info اطلاعات
|
||||
ویت‌پرس همیشه استایل اضافی محتوای صفحه `layout: home` را خودکار نمی‌کند. برای بازگشت به رفتار قدیمی، می‌توانید `markdownStyles: false` را به frontmatter اضافه کنید.
|
||||
:::
|
||||
@ -0,0 +1,27 @@
|
||||
# آخرین بروزرسانی
|
||||
|
||||
زمان به روزرسانی آخرین محتوا در گوشه پایین سمت راست صفحه نمایش داده خواهد شد. برای فعال‌سازی آن، گزینه `lastUpdated` را به پیکربندی خود اضافه کنید.
|
||||
|
||||
::: tip نکته
|
||||
برای دیدن زمان به‌روزرسانی، باید فایل Markdown را commit کنید.
|
||||
:::
|
||||
|
||||
## پیکربندی سطح سایت
|
||||
|
||||
```js
|
||||
export default {
|
||||
lastUpdated: true
|
||||
}
|
||||
```
|
||||
|
||||
## پیکربندی Frontmatter
|
||||
|
||||
می‌توانید این امکان را برای هر صفحه با استفاده از گزینه `lastUpdated` در frontmatter غیرفعال کنید:
|
||||
|
||||
```yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
همچنین به [پیکربندی پیش‌فرض: آخرین بروزرسانی](./default-theme-config#lastupdated) مراجعه کنید تا اطلاعات بیشتری دریافت کنید. هر مقدار حقیقی در سطح تم از ویژگی را فعال خواهد کرد مگر آنکه به صورت صریح در سطح سایت یا صفحه غیرفعال شود.
|
||||
@ -0,0 +1,62 @@
|
||||
# طرح بندی
|
||||
|
||||
می‌توانید طرح صفحه را با تنظیم گزینه `layout` در [frontmatter](./frontmatter-config) صفحه انتخاب کنید. سه گزینه طرح وجود دارد، `doc`، `page` و `home`. اگر هیچ چیز مشخص نشده باشد، صفحه به عنوان صفحه `doc` در نظر گرفته می‌شود.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
## طرح Doc
|
||||
|
||||
گزینه `doc` طرح پیش‌فرض است و تمام محتوای Markdown را به "نمایشگاه" درست می‌کند. این با پوشاندن کل محتوا در داخل کلاس css `vp-doc` کار می‌کند و استایل‌های لازم را بر روی عناصر زیرش اعمال می‌کند.
|
||||
|
||||
تقریباً همه عناصر عمومی مانند `p` یا `h2` استایل‌های خاصی دارند. بنابراین، به یاد داشته باشید که اگر HTML سفارشی‌ای درون محتوای Markdown اضافه کنید، این استایل‌ها روی آنها هم اعمال خواهند شد.
|
||||
|
||||
این طرح ویژگی‌های خاص مستندسازی زیر را فراهم می‌کند. این ویژگی‌ها فقط در این طرح فعال هستند.
|
||||
|
||||
- پیوند ویرایش
|
||||
- پیوند قبلی و بعدی
|
||||
- ساختار
|
||||
- [تبلیغات Carbon](./default-theme-carbon-ads)
|
||||
|
||||
## طرح Page
|
||||
|
||||
گزینه `page` به عنوان "صفحه خالی" در نظر گرفته می‌شود. Markdown همچنان تجزیه و تحلیل می‌شود و تمامی [توسعه‌های Markdown](../guide/markdown) به عنوان طرح `doc` کار می‌کنند، اما هیچ استایل پیش‌فرضی به آن اعمال نمی‌شود.
|
||||
|
||||
طرح صفحه به شما این امکان را می‌دهد که همه چیز را به دلخواه خود شخصی‌سازی کنید بدون این که طرح ویت‌پرس بر روی مارک‌آپ تاثیر بگذارد. این کار بسیار مفید است زمانی که می‌خواهید صفحه سفارشی خود را ایجاد کنید.
|
||||
|
||||
توجه داشته باشید که حتی در این طرح، نوار کناری نیز نمایش داده می‌شود اگر صفحه دارای پیکربندی نوار کناری مطابق باشد.
|
||||
|
||||
## طرح Home
|
||||
|
||||
گزینه `home` صفحه "خانه" قالب‌بندی می‌کند. در این طرح، می‌توانید گزینه‌های اضافی مانند `hero` و `features` را برای دلخواه‌سازی محتوا تنظیم کنید. لطفاً [صفحه پیش‌فرض: صفحه خانه](./default-theme-home-page) را برای اطلاعات بیشتر مشاهده کنید.
|
||||
|
||||
## بدون طرح
|
||||
|
||||
اگر نمی‌خواهید هیچ طرحی داشته باشید، می‌توانید با گذراندن `layout: false` از frontmatter، از این گزینه استفاده کنید. این گزینه مفید است اگر صفحهٔ نخستی کاملاً قابل تنظیم (بدون هیچ نوار کناری، نوار ناوبری یا پاورقی به صورت پیش‌فرض) را می‌خواهید.
|
||||
|
||||
## طرح سفارشی
|
||||
|
||||
همچنین می‌توانید از یک طرح سفارشی استفاده کنید:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: foo
|
||||
---
|
||||
```
|
||||
|
||||
این دستور به دنبال یک کامپوننت به نام `foo` ثبت شده در محیط است. به عنوان مثال، می‌توانید کامپوننت خود را به صورت گلوبال در `.vitepress/theme/index.ts` ثبت کنید:
|
||||
|
||||
```ts
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Foo from './Foo.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.component('foo', Foo)
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,217 @@
|
||||
# ناوبری
|
||||
|
||||
ناوبری نوار ناوبری است که در بالای صفحه نمایش داده می‌شود و شامل عنوان سایت، لینک‌های منوی جهانی، و غیره می‌باشد.
|
||||
|
||||
## عنوان سایت و لوگو
|
||||
|
||||
به طور پیش‌فرض، ناو نام سایت را با ارجاع به مقدار [`config.title`](./site-config#title) نمایش می‌دهد. اگر می‌خواهید تغییر دهید که چه چیزی در ناو نمایش داده شود، می‌توانید متن سفارشی را در گزینه `themeConfig.siteTitle` تعریف کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
siteTitle: 'عنوان سفارشی من'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
اگر برای سایت خود لوگو دارید، می‌توانید آن را با ارسال مسیر تصویر نمایش دهید. شما باید لوگو را در دایرکتوری `public` قرار داده و مسیر مطلق آن را تعریف کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/my-logo.svg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
هنگام افزودن یک لوگو، آن به همراه عنوان سایت نمایش داده می‌شود. اگر لوگوی شما همه چیزی است که نیاز دارید و اگر می‌خواهید متن عنوان سایت را پنهان کنید، گزینه `siteTitle` را برابر با `false` قرار دهید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
logo: '/my-logo.svg',
|
||||
siteTitle: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
همچنین می‌توانید به عنوان لوگو یک شیء را نیز ارسال کنید اگر می‌خواهید ویژگی `alt` را اضافه کنید یا آن را بر اساس حالت تاریک / روشن سفارشی‌سازی کنید. برای جزئیات بیشتر به [`themeConfig.logo`](./default-theme-config#logo) مراجعه کنید.
|
||||
|
||||
## لینک‌های ناوبری
|
||||
|
||||
شما می‌توانید گزینه `themeConfig.nav` را تعریف کنید تا لینک‌ها را به ناوبری خود اضافه کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'راهنما', link: '/guide' },
|
||||
{ text: 'پیکربندی', link: '/config' },
|
||||
{ text: 'تغییرات', link: 'https://github.com/...' }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`text` متن واقعی است که در ناوبری نمایش داده می‌شود و `link` لینکی است که هنگام کلیک بر روی متن به آن ناوبری می‌شود. برای لینک، مسیر را به صورت واقعی بدون پیشوند `.md` تنظیم کنید و همیشه با `/` شروع کنید.
|
||||
|
||||
لینک‌های ناوبری همچنین می‌توانند منوهای کشویی باشند. برای این کار، کلید `items` را در گزینه لینک تنظیم کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'راهنما', link: '/guide' },
|
||||
{
|
||||
text: 'منوی کشویی',
|
||||
items: [
|
||||
{ text: 'مورد الف', link: '/item-1' },
|
||||
{ text: 'مورد ب', link: '/item-2' },
|
||||
{ text: 'مورد ج', link: '/item-3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
لطفا توجه داشته باشید که عنوان منوی کشویی (`منوی کشویی` در مثال بالا) نمی‌تواند خاصیت `link` داشته باشد زیرا این دکمه برای باز کردن صفحه گفتگوی کشویی می‌شود.
|
||||
|
||||
همچنین می‌توانید بخش‌هایی را نیز به موارد منوی کشویی با ارسال موارد بیشتر تو در تو اضافه کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'راهنما', link: '/guide' },
|
||||
{
|
||||
text: 'منوی کشویی',
|
||||
items: [
|
||||
{
|
||||
// عنوان بخش
|
||||
text: 'عنوان بخش A',
|
||||
items: [
|
||||
{ text: 'آیتم A بخش A', link: '...' },
|
||||
{ text: 'آیتم B بخش B', link: '...' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'منوی کشویی',
|
||||
items: [
|
||||
{
|
||||
// شما همچنین می‌توانید عنوان را حذف کنید.
|
||||
items: [
|
||||
{ text: 'آیتم A بخش A', link: '...' },
|
||||
{ text: 'آیتم B بخش B', link: '...' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### سفارشی‌سازی وضعیت "فعال" لینک
|
||||
|
||||
موارد منوی ناوبری زمانی که صفحه فعلی زیر مسیر مطابقت دارد، مشخص می‌شوند. اگر می‌خواهید مسیر مطابقت را سفارشی کنید، ویژگی `activeMatch` و regex را به عنوان مقدار رشته تعریف کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
// این لینک وضعیت فعال را در زمانی که کاربر در مسیر `/config/` است، دریافت می‌کند.
|
||||
{
|
||||
text: 'راهنما',
|
||||
link: '/guide',
|
||||
activeMatch: '/config/'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning هشدار
|
||||
`activeMatch` انتظار می‌رود که به عنوان یک رشته regex باشد، اما شما باید آن را به عنوان یک رشته تعریف کنید. ما نمی‌توانیم از شیء RegExp واقعی اینجا استفاده کنیم زیرا در زمان ساخت غیر قابل سریالیز کردن است.
|
||||
:::
|
||||
|
||||
### سفارشی‌سازی ویژگی‌های "target" و "rel" لینک
|
||||
|
||||
به طور پیش‌فرض، ویت‌پرس به طور خودکار ویژگی‌های
|
||||
|
||||
`target` و `rel` را بر اساس اینکه لینک یک لینک خارجی است یا خیر، تعیین می‌کند. اما اگر می‌خواهید، شما همچنین می‌توانید آنها را سفارشی کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{
|
||||
text: 'کالای معاملاتی',
|
||||
link: 'https://www.thegithubshop.com/',
|
||||
target: '_self',
|
||||
rel: 'sponsored'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## لینک‌های اجتماعی
|
||||
|
||||
به [`socialLinks`](./default-theme-config#sociallinks) مراجعه کنید.
|
||||
|
||||
## اجزای سفارشی
|
||||
|
||||
می‌توانید اجزای سفارشی را در نوار ناوبری با استفاده از گزینه `component` اضافه کنید. کلید `component` باید نام مؤلفه Vue باشد و باید به صورت جهانی با استفاده از [Theme.enhanceApp](../guide/custom-theme#theme-interface) ثبت شود.
|
||||
|
||||
```js
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{
|
||||
text: 'منوی من',
|
||||
items: [
|
||||
{
|
||||
component: 'MyCustomComponent',
|
||||
// پارامترهای اختیاری برای ارسال به مؤلفه
|
||||
props: {
|
||||
title: 'مؤلفه سفارشی من'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
component: 'AnotherCustomComponent'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
سپس، شما باید مؤلفه را به صورت جهانی ثبت کنید:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
|
||||
import MyCustomComponent from './components/MyCustomComponent.vue'
|
||||
import AnotherCustomComponent from './components/AnotherCustomComponent.vue'
|
||||
|
||||
/** @type {import('vitepress').Theme} */
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.component('MyCustomComponent', MyCustomComponent)
|
||||
app.component('AnotherCustomComponent', AnotherCustomComponent)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
اجزای شما در نوار ناوبری نمایش داده خواهد شد. ویت‌پرس ویژگی‌های اضافی زیر را به مؤلفه ارائه می‌دهد:
|
||||
|
||||
- `screenMenu`: یک بولین اختیاری که نشان می‌دهد آیا مؤلفه در منوی ناوبری تلفن همراه است یا خیر
|
||||
|
||||
می‌توانید یک نمونه را در آزمایش‌های e2e [اینجا](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress) بررسی کنید.
|
||||
@ -0,0 +1,43 @@
|
||||
# پیوندهای قبلی و بعدی
|
||||
|
||||
شما می‌توانید متن و پیوند برای صفحات قبلی و بعدی را سفارشی‌سازی کنید (نمایش داده شده در پایین صفحه مستندات). این مفید است اگر می‌خواهید متن دیگری را در این قسمت نمایش دهید که با آنچه در نوار کناری دارید، متفاوت باشد. همچنین، ممکن است مفید باشد که فوتر را غیرفعال کنید یا به یک صفحه لینک کنید که در نوار کناری شما وجود ندارد.
|
||||
|
||||
## prev
|
||||
|
||||
- نوع: `string | false | { text?: string; link?: string }`
|
||||
|
||||
- جزئیات:
|
||||
|
||||
مشخص می‌کند متن/لینکی که برای لینک به صفحه قبلی نمایش داده خواهد شد. اگر این را در frontmatter تنظیم نکنید، متن/لینک از تنظیمات نوار کناری استخراج خواهد شد.
|
||||
|
||||
- مثال‌ها:
|
||||
|
||||
- برای فقط سفارشی‌سازی متن:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: 'شروع کنید | مارک‌داون'
|
||||
---
|
||||
```
|
||||
|
||||
- برای سفارشی‌سازی هم متن و هم لینک:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev:
|
||||
text: 'مارک‌داون'
|
||||
link: '/guide/markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- برای مخفی کردن صفحه قبلی:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: false
|
||||
---
|
||||
```
|
||||
|
||||
## next
|
||||
|
||||
مشابه `prev` اما برای صفحه بعدی.
|
||||
@ -0,0 +1,257 @@
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
{
|
||||
avatar: 'https://github.com/kiaking.png',
|
||||
name: 'Kia King Ishii',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/kiaking' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
# صفحه تیم
|
||||
|
||||
اگر می‌خواهید تیم خود را معرفی کنید، می‌توانید از کامپوننت‌های تیم برای ساخت صفحه تیم استفاده کنید. دو راه برای استفاده از این کامپوننت‌ها وجود دارد. یکی اینکه آنها را در صفحه مستندات قرار دهید و دیگری اینکه یک صفحه کامل تیم ایجاد کنید.
|
||||
|
||||
## نمایش اعضای تیم در یک صفحه
|
||||
|
||||
می‌توانید از کامپوننت `<VPTeamMembers>` که از `vitepress/theme` قابل دسترسی است، برای نمایش لیست اعضای تیم در هر صفحه‌ای استفاده کنید.
|
||||
|
||||
```html
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://www.github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
</script>
|
||||
|
||||
# تیم ما
|
||||
|
||||
با سلام به تیم فوق‌العاده‌ی ما خوش آمدید.
|
||||
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
```
|
||||
|
||||
بالا به صورت عنصری با شکل کارتی اعضای تیم را نمایش می‌دهد. باید به شکل زیر نمایش داده شود.
|
||||
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
|
||||
کامپوننت `<VPTeamMembers>` دارای دو اندازه مختلف، `small` و `medium` است. معمولاً اندازه `small` برای استفاده در صفحات مستندات مناسب‌تر است. همچنین می‌توانید ویژگی‌های بیشتری برای هر عضو اضافه کنید مانند "توضیحات" یا "دکمه حامی". جهت کسب اطلاعات بیشتر به [`<VPTeamMembers>`](#vpteammembers) مراجعه کنید.
|
||||
|
||||
قرار دادن اعضای تیم در صفحه مستندات برای تیم‌های کوچک مناسب است که ایجاد یک صفحه کامل تیم ممکن است بیش از حد باشد یا معرفی اعضا به عنوان مرجع در زمینه مستندات.
|
||||
|
||||
اگر تعداد اعضا بسیار زیاد است یا به سادگی می‌خواهید بیشتر فضا برای نمایش اعضای تیم داشته باشید، در نظر بگیرید [ایجاد یک صفحه کامل تیم](#create-a-full-team-page).
|
||||
|
||||
## ایجاد یک صفحه کامل تیم
|
||||
|
||||
بجای اضافه کردن اعضای تیم به صفحه مستندات، می‌توانید یک صفحه کامل تیم را ایجاد کنید، مشابه اینکه چگونه می‌توانید یک [صفحه خانگی سفارشی](./default-theme-home-page) ایجاد کنید.
|
||||
|
||||
برای ایجاد یک صفحه تیم، ابتدا یک فایل md جدید بسازید. نام فایل مهم نیست، اما در اینجا آن را `team.md` می‌نامیم. در این فایل، گزینه `layout: page` را در فرانت‌ماتر تنظیم کنید، سپس می‌توانید ساختار صفحه خود را با استفاده از کامپوننت‌های `TeamPage` ایجاد کنید.
|
||||
|
||||
```html
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamMembers
|
||||
} from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://www.github.com/yyx990803.png',
|
||||
name: 'Evan You',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
</script>
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>
|
||||
تیم ما
|
||||
</template>
|
||||
<template #lead>
|
||||
توسعه ویت‌پرس توسط تیمی بین‌المللی راهنمایی می‌شود، برخی از اعضا که انتخاب کرده‌اند تا در زیر نمایش داده شوند.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers
|
||||
:members="members"
|
||||
/>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
در ایجاد یک صفحه کامل تیم، به یاد داشته باشید که همهٔ کامپوننت‌ها را با کامپوننت `<VPTeamPage>` بپوشانید. این کامپوننت تضمین می‌کند که همهٔ کامپوننت‌های مرتبط با تیم در ساختار طراحی مناسبی مانند فضاهای خالی قرار می‌گیرند.
|
||||
|
||||
کامپوننت `<VPPageTitle>` بخش عنوان صفحه را اضافه می‌کند. عنوان به عنوان `<h1>` نمایش داده می‌شود. از اسلات‌های `#title` و `#lead` برای مستندسازی در مورد تیم خود استفاده کنید.
|
||||
|
||||
`<VPMembers>` به عنوان زمانی که در یک صفحه مستند استفاده می‌شود، کار می‌کند. این لیست اعضا را نمایش می‌دهد.
|
||||
|
||||
### اضافه کردن بخش‌ها برای تقسیم اعضای تیم
|
||||
|
||||
می‌توانید "بخ
|
||||
|
||||
ش‌ها" را به صفحه تیم اضافه کنید. به عنوان مثال، ممکن است اعضای مختلف تیمی مانند اعضای تیم اصلی و شرکای اجتماعی داشته باشید. شما می‌توانید این اعضا را به بخش‌ها تقسیم کنید تا نقش هر گروه بهتر توضیح داده شود.
|
||||
|
||||
برای این کار، کامپوننت `<VPTeamPageSection>` را به فایل `team.md` اضافه کنید که قبلاً ایجاد کردیم.
|
||||
|
||||
```html
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamMembers,
|
||||
VPTeamPageSection
|
||||
} from 'vitepress/theme'
|
||||
|
||||
const coreMembers = [...]
|
||||
const partners = [...]
|
||||
</script>
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>تیم ما</template>
|
||||
<template #lead>...</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers size="medium" :members="coreMembers" />
|
||||
<VPTeamPageSection>
|
||||
<template #title>شرکای تجاری</template>
|
||||
<template #lead>...</template>
|
||||
<template #members>
|
||||
<VPTeamMembers size="small" :members="partners" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
کامپوننت `<VPTeamPageSection>` می‌تواند همچون کامپوننت `VPTeamPageTitle` دارای اسلات‌های `#title` و `#lead` باشد و همچنین اسلات `#members` را برای نمایش اعضای تیم پذیرفته است.
|
||||
|
||||
به یاد داشته باشید که کامپوننت `<VPTeamMembers>` را درون اسلات `#members` قرار دهید.
|
||||
|
||||
## `<VPTeamMembers>`
|
||||
|
||||
کامپوننت `<VPTeamMembers>` لیست داده‌شده از اعضا را نمایش می‌دهد.
|
||||
|
||||
```html
|
||||
<VPTeamMembers
|
||||
size="medium"
|
||||
:members="[
|
||||
{ avatar: '...', name: '...' },
|
||||
{ avatar: '...', name: '...' },
|
||||
...
|
||||
]"
|
||||
/>
|
||||
```
|
||||
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
## `<VPTeamPage>`
|
||||
|
||||
کامپوننت ریشه هنگام ایجاد یک صفحه کامل تیم. فقط یک اسلات را قبول می‌کند. این همه کامپوننت‌های مربوط به تیم را استایل می‌کند.
|
||||
|
||||
## `<VPTeamPageTitle>`
|
||||
|
||||
بخش "عنوان" صفحه را اضافه می‌کند. بهترین استفاده را در ابتدایی‌ترین جای زیر `<VPTeamPage>` داشته باشد. این اسلات‌های `#title` و `#lead` را قبول می‌کند.
|
||||
|
||||
```html
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>
|
||||
تیم ما
|
||||
</template>
|
||||
<template #lead>
|
||||
توسعه ویت‌پرس توسط تیمی بین‌المللی راهنمایی می‌شود، برخی از اعضا که انتخاب کرده‌اند تا در زیر نمایش داده شوند.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
## `<VPTeamPageSection>`
|
||||
|
||||
یک "بخش" را درون صفحه تیم ایجاد می‌کند. اسلات‌های `#title`، `#lead` و `#members` را قبول می‌کند. می‌توانید هر تعداد بخش را درون `<VPTeamPage>` اضافه کنید.
|
||||
|
||||
```html
|
||||
<VPTeamPage>
|
||||
...
|
||||
<VPTeamPageSection>
|
||||
<template #title>شرکای تجاری</template>
|
||||
<template #lead>Lorem ipsum...</template>
|
||||
<template #members>
|
||||
<VPTeamMembers :members="data" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
```
|
||||
@ -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, string>]
|
||||
| [string, Record<string, string>, string]
|
||||
```
|
||||
|
||||
## فقط برای تم پیش‌فرض
|
||||
|
||||
گزینه‌های frontmatter زیر فقط زمانی قابل استفاده هستند که از تم پیش‌فرض استفاده می‌کنید.
|
||||
|
||||
### layout
|
||||
|
||||
- نوع: `doc | home | page`
|
||||
- پیش‌فرض: `doc`
|
||||
|
||||
تعیین چیدمان صفحه.
|
||||
|
||||
- `doc` - این چیدمان استایل‌های مستندات پیش‌فرض را به محتوای markdown اعمال می‌کند.
|
||||
- `home` - چیدمان ویژه برای "صفحه اصلی". شما می‌توانید گزینه‌های اضافی مانند `hero` و `features` را اضافه کنید تا به سرعت یک صفحه نخست زیبا ایجاد کنید.
|
||||
- `page` - مشابه `doc` عمل می‌کند اما هیچ استایلی به محتوا اعمال نمی‌شود. مفید است زمانی که می‌خواهید یک صفحه کاملاً سفارشی ایجاد کنید.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
### hero <Badge type="info" text="فقط برای صفحه اصلی" />
|
||||
|
||||
تعیین محتویات بخش hero صفحه اصلی هنگامی که `layout` به `home` تنظیم شده است. جزئیات بیشتر در [تم پیش‌فرض: صفحه اصلی](./default-theme-home-page).
|
||||
|
||||
### features <Badge type="info" text="فقط برای صفحه اصلی" />
|
||||
|
||||
تعیین مواردی که در بخش ویژگی‌ها باید نمایش داده شوند هنگامی که `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 {
|
||||
/* استایل‌های مخصوص صفحه */
|
||||
}
|
||||
Loading…
Reference in new issue