mirror of https://github.com/vuejs/vitepress
docs: add Persian language (#4089)
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>pull/4423/head
parent
08ce34d9a2
commit
a3f994b71e
@ -0,0 +1,8 @@
|
||||
{
|
||||
"plugins": {
|
||||
"postcss-rtlcss": {
|
||||
"ltrPrefix": ":where([dir=\"ltr\"])",
|
||||
"rtlPrefix": ":where([dir=\"rtl\"])"
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,223 @@
|
||||
import { createRequire } from 'module'
|
||||
import { defineConfig, type DefaultTheme } from 'vitepress'
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
const pkg = require('vitepress/package.json')
|
||||
|
||||
export const fa = defineConfig({
|
||||
title: 'ویتپرس',
|
||||
lang: 'fa-IR',
|
||||
description: 'Vite & Vue powered static site generator.',
|
||||
dir: 'rtl',
|
||||
markdown: {
|
||||
container: {
|
||||
tipLabel: 'نکته',
|
||||
warningLabel: 'هشدار',
|
||||
dangerLabel: 'خطر',
|
||||
infoLabel: 'اطلاعات',
|
||||
detailsLabel: 'جزئیات'
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
nav: nav(),
|
||||
sidebar: {
|
||||
'/fa/guide/': { base: '/fa/guide/', items: sidebarGuide() },
|
||||
'/fa/reference/': { base: '/fa/reference/', items: sidebarReference() }
|
||||
},
|
||||
|
||||
editLink: {
|
||||
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||
text: 'ویرایش این صفحه در گیتهاب'
|
||||
},
|
||||
|
||||
footer: {
|
||||
message: 'انتشار یافته تحت لایسنس MIT',
|
||||
copyright: 'حق نسخهبرداری © 2019-کنون Evan You'
|
||||
},
|
||||
|
||||
docFooter: {
|
||||
prev: 'قبلی',
|
||||
next: 'بعدی'
|
||||
},
|
||||
|
||||
outline: {
|
||||
label: 'در این صفحه'
|
||||
},
|
||||
|
||||
lastUpdated: {
|
||||
text: 'آخرین بهروزرسانی',
|
||||
formatOptions: {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'medium'
|
||||
}
|
||||
},
|
||||
|
||||
langMenuLabel: 'تغییر زبان',
|
||||
returnToTopLabel: 'بازگشت به بالا',
|
||||
sidebarMenuLabel: 'منوی جانبی',
|
||||
darkModeSwitchLabel: 'تم تاریک',
|
||||
lightModeSwitchTitle: 'رفتن به حالت روشن',
|
||||
darkModeSwitchTitle: 'رفتن به حالت تاریک',
|
||||
notFound: {
|
||||
linkLabel: 'بازگشت به خانه',
|
||||
linkText: 'بازگشت به خانه',
|
||||
title: 'صفحه مورد نظر یافت نشد',
|
||||
code: '۴۰۴',
|
||||
quote:
|
||||
'اما اگر جهت خود را تغییر ندهید و اگر ادامه دهید به دنبال چیزی که دنبال میکنید، ممکن است در نهایت به جایی که در حال رفتن به سمتش هستید، برسید.'
|
||||
},
|
||||
siteTitle: 'ویتپرس'
|
||||
}
|
||||
})
|
||||
|
||||
function nav(): DefaultTheme.NavItem[] {
|
||||
return [
|
||||
{
|
||||
text: 'راهنما',
|
||||
link: 'fa/guide/what-is-vitepress',
|
||||
activeMatch: '/guide/'
|
||||
},
|
||||
{
|
||||
text: 'مرجع',
|
||||
link: 'fa/reference/site-config',
|
||||
activeMatch: '/reference/'
|
||||
},
|
||||
{
|
||||
text: pkg.version,
|
||||
items: [
|
||||
{
|
||||
text: 'Changelog',
|
||||
link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md'
|
||||
},
|
||||
{
|
||||
text: 'مشارکت',
|
||||
link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function sidebarGuide(): DefaultTheme.SidebarItem[] {
|
||||
return [
|
||||
{
|
||||
text: 'معرفی',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: 'ویتپرس چیست؟', link: 'what-is-vitepress' },
|
||||
{ text: 'شروع کار', link: 'getting-started' },
|
||||
{ text: 'مسیریابی', link: 'routing' },
|
||||
{ text: 'استقرار', link: 'deploy' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'نوشتن',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: 'افزونههای Markdown', link: 'markdown' },
|
||||
{ text: 'مدیریت منابع', link: 'asset-handling' },
|
||||
{ text: 'Frontmatter', link: 'frontmatter' },
|
||||
{ text: 'استفاده از Vue در Markdown', link: 'using-vue' },
|
||||
{ text: 'بینالمللی سازی', link: 'i18n' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'شخصیسازی',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: 'استفاده از تم شخصی', link: 'custom-theme' },
|
||||
{
|
||||
text: 'گسترش تم پیشفرض',
|
||||
link: 'extending-default-theme'
|
||||
},
|
||||
{ text: 'بارگیری داده در زمان Build', link: 'data-loading' },
|
||||
{ text: 'سازگاری SSR', link: 'ssr-compat' },
|
||||
{ text: 'اتصال به CMS', link: 'cms' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'آزمایشی',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: 'حالت MPA', link: 'mpa-mode' },
|
||||
{ text: 'جنریت کردن Sitemap', link: 'sitemap-generation' }
|
||||
]
|
||||
},
|
||||
{ text: 'پیکربندی و مرجع API', base: 'fa/reference/', link: 'site-config' }
|
||||
]
|
||||
}
|
||||
|
||||
function sidebarReference(): DefaultTheme.SidebarItem[] {
|
||||
return [
|
||||
{
|
||||
text: 'مرجع',
|
||||
base: 'fa/reference/',
|
||||
items: [
|
||||
{ text: 'پیکربندی Site', link: 'site-config' },
|
||||
{ text: 'پیکربندی Frontmatter', link: 'frontmatter-config' },
|
||||
{ text: 'Runtime API', link: 'runtime-api' },
|
||||
{ text: 'CLI', link: 'cli' },
|
||||
{
|
||||
text: 'تم پیشفرض',
|
||||
base: 'fa/reference/default-theme-',
|
||||
items: [
|
||||
{ text: 'بررسی اجمالی', link: 'config' },
|
||||
{ text: 'ناوبری', link: 'nav' },
|
||||
{ text: 'نوار کنار صفحه', link: 'sidebar' },
|
||||
{ text: 'صفحه اصلی', link: 'home-page' },
|
||||
{ text: 'پاورقی', link: 'footer' },
|
||||
{ text: 'طرح', link: 'layout' },
|
||||
{ text: 'نشان', link: 'badge' },
|
||||
{ text: 'صفحه تیم', link: 'team-page' },
|
||||
{ text: 'لینکهای قبلی / بعدی', link: 'prev-next-links' },
|
||||
{ text: 'ویرایش لینک', link: 'edit-link' },
|
||||
{ text: 'Timestamp آخرین بهروزرسانی', link: 'last-updated' },
|
||||
{ text: 'جستجو', link: 'search' },
|
||||
{ text: 'تبلیغات Carbon', link: 'carbon-ads' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const search: DefaultTheme.AlgoliaSearchOptions['locales'] = {
|
||||
fa: {
|
||||
placeholder: 'جستجوی مستندات',
|
||||
translations: {
|
||||
button: {
|
||||
buttonText: 'جستجو',
|
||||
buttonAriaLabel: 'جستجو'
|
||||
},
|
||||
modal: {
|
||||
searchBox: {
|
||||
resetButtonTitle: 'آغاز مجدد جستجو',
|
||||
resetButtonAriaLabel: 'آغاز مجدد جستجو',
|
||||
cancelButtonText: 'لغو',
|
||||
cancelButtonAriaLabel: 'لغو'
|
||||
},
|
||||
startScreen: {
|
||||
recentSearchesTitle: 'جستجوهای اخیر',
|
||||
noRecentSearchesText: 'تاریخچه جستجویی یافت نشد.',
|
||||
saveRecentSearchButtonTitle: 'ذخیره تاریخچه جستجو',
|
||||
removeRecentSearchButtonTitle: 'حذف تاریخچه جستجو',
|
||||
favoriteSearchesTitle: 'موارد دلخواه',
|
||||
removeFavoriteSearchButtonTitle: 'حذف مورد دلخواه'
|
||||
},
|
||||
errorScreen: {
|
||||
titleText: 'نتیجهای یافت نشد برای',
|
||||
helpText: 'اتصال شبکه خود را بررسی کنید'
|
||||
},
|
||||
footer: {
|
||||
selectText: 'انتخاب',
|
||||
navigateText: 'رفتن',
|
||||
closeText: 'بستن',
|
||||
searchByText: ' جستجو با '
|
||||
},
|
||||
noResultsScreen: {
|
||||
noResultsText: 'نتیجهای یافت نشد برای'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,56 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# اتصال به یک سیستم مدیریت محتوا (CMS) {#connecting-to-a-cms}
|
||||
|
||||
## گامهای کلی {#general-workflow}
|
||||
|
||||
اتصال ویتپرس به یک سیستم مدیریت محتوا به طور عمده بر اساس [مسیریابی پویا](./routing#dynamic-routes) خواهد بود. حتماً قبل از شروع، با روش کار آن آشنا شوید.
|
||||
|
||||
از آنجایی که هر سیستم مدیریت محتوا به طریقی متفاوت کار میکند، در اینجا تنها میتوانیم یک جریان کاری عمومی را ارائه دهیم که شما باید آن را برای حالت خاص خودتان سفارشی کنید.
|
||||
|
||||
1. اگر سیستم مدیریت محتوا نیاز به احراز هویت دارد، یک فایل `.env` برای ذخیره توکنهای API خود ایجاد کنید و آن را بارگذاری کنید:
|
||||
|
||||
```js
|
||||
// posts/[id].paths.js
|
||||
import { loadEnv } from 'vitepress'
|
||||
|
||||
const env = loadEnv('', process.cwd())
|
||||
```
|
||||
|
||||
2. دادههای مورد نیاز را از سیستم مدیریت محتوا بازیابی کرده و به شکل دادههای مسیر مناسب فرمت کنید:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async paths() {
|
||||
// از کتابخانه مشتری مربوط به سیستم مدیریت محتوا استفاده کنید اگر نیاز دارید
|
||||
const data = await (await fetch('https://my-cms-api', {
|
||||
headers: {
|
||||
// توکن در صورت لزوم
|
||||
}
|
||||
})).json()
|
||||
|
||||
return data.map(entry => {
|
||||
return {
|
||||
params: { id: entry.id, /* عنوان، نویسندگان، تاریخ و غیره */ },
|
||||
content: entry.content
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. نمایش محتوا در صفحه:
|
||||
|
||||
```md
|
||||
# {{ $params.title }}
|
||||
|
||||
- نوشته شده توسط {{ $params.author }} در تاریخ {{ $params.date }}
|
||||
|
||||
<!-- @content -->
|
||||
```
|
||||
|
||||
## راهنماهای ادغام {#integration-guides}
|
||||
|
||||
اگر راهنمایی درباره ادغام ویتپرس با یک سیستم مدیریت محتوا خاص نوشتهاید، لطفاً از لینک "ویرایش این صفحه" زیر استفاده کنید تا آن را ارسال کنید!
|
@ -0,0 +1,226 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# استفاده از یک تم سفارشی {#using-a-custom-theme}
|
||||
|
||||
## Resolve کردن تم {#theme-resolving}
|
||||
|
||||
میتوانید با ایجاد یک فایل `.vitepress/theme/index.js` یا `.vitepress/theme/index.ts` (فایل ورودی تم) تم سفارشی را فعال کنید:
|
||||
|
||||
```
|
||||
.
|
||||
├─ docs # ریشه پروژه
|
||||
│ ├─ .vitepress
|
||||
│ │ ├─ theme
|
||||
│ │ │ └─ index.js # ورودی تم
|
||||
│ │ └─ config.js # فایل پیکربندی
|
||||
│ └─ index.md
|
||||
└─ package.json
|
||||
```
|
||||
|
||||
وقتی ویتپرس حضور یک فایل ورودی تم را شناسایی کند، همواره از تم سفارشی به جای تم پیشفرض استفاده میکند. با این حال، شما میتوانید [تم پیشفرض را گسترش دهید](./extending-default-theme) تا سفارشیسازیهای پیشرفتهتری را روی آن اعمال کنید.
|
||||
|
||||
## رابط تم {#theme-interface}
|
||||
|
||||
یک تم سفارشی ویتپرس به عنوان یک شی تعریف میشود که شامل رابط زیر است:
|
||||
|
||||
```ts
|
||||
interface Theme {
|
||||
/**
|
||||
* کامپوننت لایهی ریشه برای هر صفحه
|
||||
* @required
|
||||
*/
|
||||
Layout: Component
|
||||
/**
|
||||
* تقویت نمونه Vue اپلیکیشن
|
||||
* @optional
|
||||
*/
|
||||
enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
|
||||
/**
|
||||
* گسترش یک تم دیگر، با فراخوانی `enhanceApp` آن پیش از ما
|
||||
* @optional
|
||||
*/
|
||||
extends?: Theme
|
||||
}
|
||||
|
||||
interface EnhanceAppContext {
|
||||
app: App // نمونه Vue اپلیکیشن
|
||||
router: Router // نمونه روتر ویتپرس
|
||||
siteData: Ref<SiteData> // متادیتاهای سطح سایت
|
||||
}
|
||||
```
|
||||
|
||||
فایل ورودی تم باید تم را به عنوان export پیشفرض خود export کند:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
|
||||
// شما میتوانید فایلهای Vue را مستقیماً در ورودی تم وارد کنید
|
||||
// ویتپرس با @vitejs/plugin-vue پیشتنظیم شده است.
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export default {
|
||||
Layout,
|
||||
enhanceApp({ app, router, siteData }) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
export پیشفرض تنها قراردادی برای یک تم سفارشی است و تنها ویژگی `Layout` لازم است. بنابراین، به شیء تم ویتپرس میتوان به عنوان یک کامپوننت Vue ساده ترتیب داد.
|
||||
|
||||
درون کامپوننت لایهی خود، دقیقاً مانند یک برنامه Vite + Vue 3 عادی عمل میکند. با این وجود، توجه داشته باشید که تم همچنین باید [سازگار با SSR](./ssr-compat) باشد.
|
||||
|
||||
## ساخت یک لایه {#building-a-layout}
|
||||
|
||||
بیشترین لایهی پایهای نیازمند دارای یک کامپوننت `<Content />` است:
|
||||
|
||||
```vue
|
||||
<!-- .vitepress/theme/Layout.vue -->
|
||||
<template>
|
||||
<h1>طرح سفارشی!</h1>
|
||||
|
||||
<!-- اینجا محتوای markdown نمایش داده میشود -->
|
||||
<Content />
|
||||
</template>
|
||||
```
|
||||
|
||||
لایهی بالا به سادگی تمام محتوای markdown هر صفحه را به عنوان HTML نمایش میدهد. اولین بهبودی که میتوانیم اعمال کنیم، مدیریت خطاهای 404 است:
|
||||
|
||||
```vue{1-4,9-12}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
const { page } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>طرح سفارشی!</h1>
|
||||
|
||||
<div v-if="page.isNotFound">
|
||||
صفحه 404 سفارشی!
|
||||
</div>
|
||||
<Content v-else />
|
||||
</template>
|
||||
```
|
||||
|
||||
کمککننده [`useData()`](../reference/runtime-api#usedata) اطلاعات اجرایی مورد نیاز ما را برای رندر شرایطی صفحات مختلف فراهم میکند. یکی از دیگر اطلاعاتی که ما میتوانیم به آن دسترسی داشته باشیم، اطلاعات اولیه صفحه فعلی است. ما میتوانیم از این اطلاعات برای اجازه دادن به کاربر برای کنترل لایه در هر صفحه استفاده کنیم. به عنوان مثال، کاربر میتواند مشخص کند که صفحه باید از یک طرح صفحه خانه خاص استفاده کند با:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
و ما میتوانیم تم خود را تنظیم کنیم تا با این موضوع برخورد کند:
|
||||
|
||||
```vue{3,12-14}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
const { page, frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>طرح سفارشی!</h1>
|
||||
|
||||
<div v-if="page.isNotFound">
|
||||
صفحه 404 سفارشی!
|
||||
</div>
|
||||
<div v-if="frontmatter.layout === 'home'">
|
||||
صفحه خانه سفارشی!
|
||||
</div>
|
||||
<Content v-else />
|
||||
</template>
|
||||
```
|
||||
|
||||
طبیعتا، شما میتوانید لایهی خود را به کامپوننتهای بیشتری تقسیم کنید:
|
||||
|
||||
```vue{3-5,12-15}
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import NotFound from './NotFound.vue'
|
||||
import Home from './Home.vue'
|
||||
import Page from './Page.vue'
|
||||
|
||||
const { page, frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>طرح سفارشی!</h1>
|
||||
|
||||
<NotFound v-if="page.isNotFound" />
|
||||
<Home v-if="frontmatter.layout === 'home'" />
|
||||
<Page v-else /> <!-- <Page /> با `<Content />` را نمایش میدهد -->
|
||||
</template>
|
||||
```
|
||||
|
||||
برای همه چیزی که در کامپوننتهای تم موجود است، به [مستندات API اجرایی](../reference/runtime-api) مراجعه کنید. به علاوه، شما میتوانید از [بارگذاری داده در زمان ساخت](./data-loading) استفاده کنید تا لایههای مبتنی بر داده را تولید کنید - به عنوان مثال، یک صفحه که تمام پستهای وبلاگ در پروژه فعلی را لیست میکند.
|
||||
|
||||
## توزیع یک تم سفارشی {#distributing-a-custom-theme}
|
||||
|
||||
آسانترین روش برای توزیع یک تم سفارشی ارائه آن به عنوان [قالب مخزن در GitHub](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) است.
|
||||
|
||||
اگر میخواهید تم را به عنوان یک بسته npm توزیع کنید، مراحل زیر را دنبال کنید:
|
||||
|
||||
1. شیء تم را به عنوان export پیشفرض در ورودی بستهتان export کنید.
|
||||
|
||||
2. اگر امکان دارد، تعریف نوع پیکربندی تم خود را به عنوان `ThemeConfig` export کنید.
|
||||
|
||||
3. اگر تم شما نیاز به تنظیم پیکربندی ویتپرس دارد، پیکربندی را تحت یک زیرمسیر بسته (مانند `my-theme/config`) export کنید تا کاربر بتواند آن را گسترش دهد.
|
||||
|
||||
4. گزینههای پیکربندی تم را مستند کنید (هم از طریق فایل پیکربندی و هم از طریق frontmatter).
|
||||
|
||||
5. دستورالعملهای روشنی برای مصرف تم خود ارائه دهید (مانند زیر).
|
||||
|
||||
## مصرف یک تم سفارشی {#consuming-a-custom-theme}
|
||||
|
||||
برای مصرف یک تم خارجی، آن را از ورودی تم سفارشی وارد و دوباره export کنید:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import Theme from 'awesome-vitepress-theme'
|
||||
|
||||
export default Theme
|
||||
```
|
||||
|
||||
اگر تم نیاز به گسترش دارد:
|
||||
|
||||
```js
|
||||
// .vitepress/theme/index.js
|
||||
import Theme from 'awesome-vitepress-theme'
|
||||
|
||||
export default {
|
||||
extends: Theme,
|
||||
enhanceApp(ctx) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
اگر تم نیاز به پیکربندی خاص ویتپرس دارد، شما همچنین باید آن را در پیکربندی خود گسترش دهید:
|
||||
|
||||
```ts
|
||||
// .vitepress/config.ts
|
||||
import baseConfig from 'awesome-vitepress-theme/config'
|
||||
|
||||
export default {
|
||||
// گسترش پیکربندی پایهی تم (اگر لازم باشد)
|
||||
extends: baseConfig
|
||||
}
|
||||
```
|
||||
|
||||
سرانجام، اگر تم انواع خود را برای پیکربندی تماش ارائه میدهد:
|
||||
|
||||
```ts
|
||||
// .vitepress/config.ts
|
||||
import baseConfig from 'awesome-vitepress-theme/config'
|
||||
import { defineConfigWithTheme } from 'vitepress'
|
||||
import type { ThemeConfig } from 'awesome-vitepress-theme'
|
||||
|
||||
export default defineConfigWithTheme<ThemeConfig>({
|
||||
extends: baseConfig,
|
||||
themeConfig: {
|
||||
// نوع `ThemeConfig` است
|
||||
}
|
||||
})
|
||||
```
|
@ -0,0 +1,250 @@
|
||||
# بارگذاری داده در زمان ساخت {#build-time-data-loading}
|
||||
|
||||
ویتپرس یک ویژگی به نام **بارگذارهای داده** ارائه میدهد که به شما این امکان را میدهد که دادههای دلخواه را بارگیری کنید و آنها را از صفحات یا اجزا وارد کنید. بارگذاری داده فقط **در زمان ساخت** اجرا میشود: دادههای حاصل به صورت JSON در بسته JavaScript نهایی سریالیزه میشوند.
|
||||
|
||||
بارگذارهای داده میتوانند برای بارگیری دادههای از راه دور یا تولید فرادادهها بر اساس فایلهای محلی استفاده شوند. به عنوان مثال، میتوانید از بارگذارهای داده استفاده کنید تا تمام صفحات API محلی خود را تجزیه کنید و به طور خودکار یک فهرست از تمام ورودیهای API تولید کنید.
|
||||
|
||||
## استفاده ابتدایی {#basic-usage}
|
||||
|
||||
یک فایل بارگذار داده باید با `.data.js` یا `.data.ts` پایان یابد. فایل باید یک صادرات پیشفرض از یک شی با متد `load()` داشته باشد:
|
||||
|
||||
```js
|
||||
// example.data.js
|
||||
export default {
|
||||
load() {
|
||||
return {
|
||||
hello: 'world'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
ماژول بارگذار فقط در Node.js ارزیابی میشود، بنابراین شما میتوانید API های Node و وابستگیهای npm را به عنوان نیازهای خود وارد کنید.
|
||||
|
||||
سپس میتوانید داده را از این فایل در صفحات `.md` و اجزا `.vue` با استفاده از صادرات نامگذاری شده `data` وارد کنید:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { data } from './example.data.js'
|
||||
</script>
|
||||
|
||||
<pre>{{ data }}</pre>
|
||||
```
|
||||
|
||||
خروجی:
|
||||
|
||||
```json
|
||||
{
|
||||
"hello": "world"
|
||||
}
|
||||
```
|
||||
|
||||
شما متوجه خواهید شد که بارگذار داده خودش داده را صادر نمیکند. ویتپرس پشت صحنه متد `load()` را فراخوانی میکند و به طور ضمنی نتیجه را از طریق صادرات نامگذاری شده `data` ارائه میدهد.
|
||||
|
||||
این کار حتی اگر بارگذار async باشد انجام میشود:
|
||||
|
||||
```js
|
||||
export default {
|
||||
async load() {
|
||||
// دریافت داده از راه دور
|
||||
return (await fetch('...')).json()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## داده از فایلهای محلی {#data-from-local-files}
|
||||
|
||||
وقتی نیاز به تولید داده بر اساس فایلهای محلی دارید، باید از گزینه `watch` در بارگذار داده استفاده کنید تا تغییرات اعمال شده به این فایلها بتواند به روزرسانیهای سریع منجر شود.
|
||||
|
||||
گزینه `watch` همچنین در آنجا مفید است که میتوانید از [الگوهای glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) برای تطابق با چندین فایل استفاده کنید. الگوها میتوانند نسبت به فایل بارگذار خود نسبی باشند و تابع `load()` فایلهای تطابق یافته را به عنوان مسیرهای مطلق دریافت میکند.
|
||||
|
||||
مثال زیر نشان میدهد که چگونه فایلهای CSV را بارگذاری کرده و آنها را با استفاده از [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/) به JSON تبدیل میکند. این فایل تنها در زمان ساخت اجرا میشود، بنابراین شما نیازی به ارسال پارسر CSV به مشتری ندارید!
|
||||
|
||||
```js
|
||||
import fs from 'node:fs'
|
||||
import { parse } from 'csv-parse/sync'
|
||||
|
||||
export default {
|
||||
watch: ['./data/*.csv'],
|
||||
load(watchedFiles) {
|
||||
// watchedFiles یک آرایه از مسیرهای مطلق فایلهای تطابق یافته خواهد بود.
|
||||
// تولید یک آرایه از فرادادههای پست وبلاگ که میتواند برای نمایش
|
||||
// یک لیست در طرح استفاده شود
|
||||
return watchedFiles.map((file) => {
|
||||
return parse(fs.readFileSync(file, 'utf-8'), {
|
||||
columns: true,
|
||||
skip_empty_lines: true
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## `createContentLoader` {#createcontentloader}
|
||||
|
||||
وقتی که در حال ساختن یک سایت متمرکز بر محتوا هستیم، اغلب نیاز به ایجاد یک "بایگانی" یا "فهرست" صفحه داریم: یک صفحه که ما همه ورودیهای موجود در مجموعه محتوای خود را لیست میکنیم، به عنوان مثال پستهای وبلاگ یا صفحات API. ما میتوانیم این کار را مستقیماً با API بارگذار داده انجام دهیم، اما از آنجا که این یک حالت استفاده رایج است، ویتپرس همچنین یک کمککننده به نام `createContentLoader` را فراهم میکند تا این فرآیند را سادهتر کند:
|
||||
|
||||
```js
|
||||
// posts.data.js
|
||||
import { createContentLoader } from 'vitepress'
|
||||
|
||||
export default createContentLoader('posts/*.md', /* گزینهها */)
|
||||
```
|
||||
|
||||
کمککننده یک الگوی glob را نسبت به [دایرکتوری منبع](./routing#source-directory) مشخص میکند و یک شی `{ watch، load }` را که میتواند به عنوان صادرات پیشفرض در یک فایل بارگذار داده استفاده شود، برمیگرداند. همچنین پیادهسازی حافظه پنهانی بر اساس برچسبهای تغییر مدیریت
|
||||
|
||||
میکند تا عملکرد توسعه را بهبود بخشد.
|
||||
|
||||
لطفاً توجه داشته باشید که بارگذار فقط با فایلهای Markdown کار میکند - فایلهای غیر-Markdown تطابق یافته حذف میشوند.
|
||||
|
||||
داده بارگذاری شده یک آرایه با نوع `ContentData[]` خواهد بود:
|
||||
|
||||
```ts
|
||||
interface ContentData {
|
||||
// آدرس URL برای صفحه. به عنوان مثال /posts/hello.html (شامل پایه نمیشود)
|
||||
// تکرار دستی یا استفاده از `transform` سفارشی برای نرمال کردن مسیرها
|
||||
url: string
|
||||
// اطلاعات frontmatter صفحه
|
||||
frontmatter: Record<string, any>
|
||||
|
||||
// موارد زیر فقط وقتی که گزینههای مربوط فعال باشند
|
||||
// ما در زیر آنها را بررسی میکنیم
|
||||
src: string | undefined
|
||||
html: string | undefined
|
||||
excerpt: string | undefined
|
||||
}
|
||||
```
|
||||
|
||||
به طور پیشفرض، تنها `url` و `frontmatter` ارائه میشوند. این به خاطر این است که داده بارگذاری شده به عنوان JSON در بسته مشتری نهایی درج میشود، بنابراین ما باید در مورد اندازه آن محتاط باشیم. در زیر مثالی از استفاده از داده برای ساخت یک صفحه فهرست کمینه وبلاگ آورده شده است:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { data as posts } from './posts.data.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>همه پستهای وبلاگ</h1>
|
||||
<ul>
|
||||
<li v-for="post of posts">
|
||||
<a :href="post.url">{{ post.frontmatter.title }}</a>
|
||||
<span>توسط {{ post.frontmatter.author }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
```
|
||||
|
||||
### گزینهها {#options}
|
||||
|
||||
احتمالاً داده پیشفرض به تمام نیازها پاسخ نمیدهد - شما میتوانید با استفاده از گزینهها به تبدیل دادهها مشترک شوید:
|
||||
|
||||
```js
|
||||
// posts.data.js
|
||||
import { createContentLoader } from 'vitepress'
|
||||
|
||||
export default createContentLoader('posts/*.md', {
|
||||
includeSrc: true, // آیا منبع اصلی مارکداون را اضافه کنیم؟
|
||||
render: true, // آیا صفحه HTML را نیز شامل کنیم؟
|
||||
excerpt: true, // آیا خلاصه را نیز شامل کنیم؟
|
||||
transform(rawData) {
|
||||
// نقشهبرداری، مرتبسازی یا فیلتر کردن دادههای اصلی به دلخواه.
|
||||
// نتیجه نهایی آنچه است که به مشتری ارسال خواهد شد.
|
||||
return rawData.sort((a, b) => {
|
||||
return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
|
||||
}).map((page) => {
|
||||
page.src // منبع اصلی مارکداون
|
||||
page.html // صفحه HTML کامل
|
||||
page.excerpt // خلاصه HTML (محتوای بالای اولین `---`)
|
||||
return {/* ... */}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
بررسی کنید که چگونه در [وبلاگ Vue.js](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts) استفاده شده است.
|
||||
|
||||
API `createContentLoader` همچنین میتواند در داخل [هوکهای ساخت](../reference/site-config#build-hooks) استفاده شود:
|
||||
|
||||
```js
|
||||
// .vitepress/config.js
|
||||
export default {
|
||||
async buildEnd() {
|
||||
const posts = await createContentLoader('posts/*.md').load()
|
||||
// تولید فایلهای بر اساس فرادادههای پستها، مثلاً فید RSS
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**انواع**
|
||||
|
||||
```ts
|
||||
interface ContentOptions<T = ContentData[]> {
|
||||
/**
|
||||
* آیا منبع اصلی را اضافه کنیم؟
|
||||
* @default false
|
||||
*/
|
||||
includeSrc?: boolean
|
||||
|
||||
/**
|
||||
* آیا منبع را به HTML تبدیل کرده و در داده شامل کنیم؟
|
||||
* @default false
|
||||
*/
|
||||
render?: boolean
|
||||
|
||||
/**
|
||||
* اگر `boolean` باشد، آیا باید خلاصه را تجزیه و شامل کنیم؟ (به صورت HTML)
|
||||
*
|
||||
* اگر `function` باشد، کنترل نحوه استخراج خلاصه از محتوا.
|
||||
*
|
||||
* اگر `string` باشد، تعیین کنید که چگونه جداکننده سفارشی باید برای استخراج خلاصه استفاده شود.
|
||||
* جداکننده پیشفرض `---` است اگر `excerpt` `true` باشد.
|
||||
*
|
||||
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt
|
||||
* @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
excerpt?:
|
||||
| boolean
|
||||
| ((file: { data: { [key: string]: any }; content: string; excerpt?: string }, options?: any) => void)
|
||||
| string
|
||||
|
||||
/**
|
||||
* تبدیل داده. توجه داشته باشید که داده به عنوان JSON در بسته مشتری درج خواهد شد
|
||||
* اگر از اجزا یا فایلهای مارکداون وارد شود.
|
||||
*/
|
||||
transform?: (data: ContentData[]) => T | Promise<T>
|
||||
}
|
||||
```
|
||||
|
||||
## بارگذارهای داده تایپ شده {#typed-data-loaders}
|
||||
|
||||
زمان استفاده از TypeScript، میتوانید بارگذار و صادرات `data` خود را به این شکل تایپ کنید:
|
||||
|
||||
```ts
|
||||
import { defineLoader } from 'vitepress'
|
||||
|
||||
export interface Data {
|
||||
// نوع داده
|
||||
}
|
||||
|
||||
declare const data: Data
|
||||
export { data }
|
||||
|
||||
export default defineLoader({
|
||||
// گزینههای بارگذاری با تایپ چک شده
|
||||
watch: ['...'],
|
||||
async load(): Promise<Data> {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## پیکربندی {#configuration}
|
||||
|
||||
برای دریافت اطلاعات پیکربندی در داخل یک بارگذار، میتوانید از کدی مانند زیر استفاده کنید:
|
||||
|
||||
```ts
|
||||
import type { SiteConfig } from 'vitepress'
|
||||
|
||||
const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG
|
||||
```
|
@ -0,0 +1,48 @@
|
||||
# Frontmatter
|
||||
|
||||
## استفاده {#usage}
|
||||
|
||||
ویتپرس پشتیبانی از frontmatter YAML در تمام فایلهای Markdown را دارد و آنها را با استفاده از [gray-matter](https://github.com/jonschlinkert/gray-matter) تجزیه میکند. Frontmatter باید در بالای فایل Markdown قرار داشته باشد (قبل از هر عنصر از جمله برچسبهای `<script>`) و باید به صورت YAML معتبر واقع در بین خطوط خط کشیده شود. به عنوان مثال:
|
||||
|
||||
```md
|
||||
---
|
||||
title: مستندات با ویتپرس
|
||||
editLink: true
|
||||
---
|
||||
```
|
||||
|
||||
بسیاری از گزینههای پیکربندی سایت یا پیشفرض در تمام frontmatter گزینههای متناظر دارند. شما میتوانید از frontmatter برای لغو عملکرد خاص برای صفحه فعلی استفاده کنید. برای جزئیات بیشتر، به [مرجع پیکربندی Frontmatter](../reference/frontmatter-config) مراجعه کنید.
|
||||
|
||||
همچنین میتوانید دادههای اختصاصی frontmatter خود را تعریف کنید تا در بیانیههای پویا Vue در صفحه استفاده شود.
|
||||
|
||||
## دسترسی به دادههای Frontmatter {#accessing-frontmatter-data}
|
||||
|
||||
دادههای frontmatter میتوانند از طریق متغیر global ویژه `$frontmatter` دسترسی داشته باشند:
|
||||
|
||||
اینجا یک مثال از نحوه استفاده از آن در فایل Markdown شما است:
|
||||
|
||||
```md
|
||||
---
|
||||
title: مستندات با ویتپرس
|
||||
editLink: true
|
||||
---
|
||||
|
||||
# {{ $frontmatter.title }}
|
||||
|
||||
محتوای راهنما
|
||||
```
|
||||
|
||||
شما همچنین میتوانید دادههای frontmatter صفحه فعلی را در `<script setup>` با استفاده از راهنمای [`useData()`](../reference/runtime-api#usedata) به دست آورید.
|
||||
|
||||
## فرمتهای جایگزین Frontmatter {#alternative-frontmatter-formats}
|
||||
|
||||
ویتپرس همچنین از نحوه نوشتاری frontmatter JSON با استفاده از تکیهگاههای آغازین و پایانی در آکولاد پشتیبانی میکند:
|
||||
|
||||
```json
|
||||
---
|
||||
{
|
||||
"title": "عنوان",
|
||||
"editLink": true
|
||||
}
|
||||
---
|
||||
```
|
@ -0,0 +1,113 @@
|
||||
# بینالمللیسازی {#internationalization}
|
||||
|
||||
برای استفاده از ویژگیهای داخلی بینالمللیسازی، نیاز است که یک ساختار دایرکتوری به شکل زیر ایجاد کنید:
|
||||
|
||||
```
|
||||
docs/
|
||||
├─ es/
|
||||
│ ├─ foo.md
|
||||
├─ fr/
|
||||
│ ├─ foo.md
|
||||
├─ foo.md
|
||||
```
|
||||
|
||||
سپس در `docs/.vitepress/config.ts` به شکل زیر عمل کنید:
|
||||
|
||||
```ts
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
// ویژگیهای مشترک و دیگر موارد در سطح بالا...
|
||||
|
||||
locales: {
|
||||
root: {
|
||||
label: 'انگلیسی',
|
||||
lang: 'en'
|
||||
},
|
||||
fr: {
|
||||
label: 'فرانسوی',
|
||||
lang: 'fr', // اختیاری، به عنوان `lang` در `html` tag اضافه خواهد شد
|
||||
link: '/fr/guide' // پیشفرض /fr/ -- در منوی ترجمهها نمایش داده میشود، میتواند خارجی باشد
|
||||
|
||||
// سایر ویژگیهای مختص به هر زبان...
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
میتوانید خصوصیات زیر را برای هر زبان (شامل ریشه) نیز تغییر دهید:
|
||||
|
||||
```ts
|
||||
interface LocaleSpecificConfig<ThemeConfig = any> {
|
||||
lang?: string
|
||||
dir?: string
|
||||
title?: string
|
||||
titleTemplate?: string | boolean
|
||||
description?: string
|
||||
head?: HeadConfig[] // با ورودیهای head موجود ادغام خواهد شد، meta tags تکراری به طور خودکار حذف میشوند
|
||||
themeConfig?: ThemeConfig // ادغام سطح بالا، میتوان اطلاعات مشترک را در ورودی themeConfig اضافه کرد
|
||||
}
|
||||
```
|
||||
|
||||
برای جزئیات درباره تنظیمات پیشفرض، به رابط `DefaultTheme.Config` در [اینجا](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) مراجعه کنید. لطفاً خصوصیات `themeConfig.algolia` یا `themeConfig.carbonAds` را در سطح زبان تغییر ندهید. برای استفاده از جستجوی چندزبانه، به [مستندات Algolia](../reference/default-theme-search#i18n) مراجعه کنید.
|
||||
|
||||
**نکته حرفهای:** فایل پیکربندی را میتوانید در `docs/.vitepress/config/index.ts` نیز ذخیره کنید. این کار به شما کمک میکند که با ایجاد یک فایل پیکربندی برای هر زبان و سپس ادغام و صدور آنها از `index.ts`، موارد را سازماندهی کنید.
|
||||
|
||||
## دایرکتوری جداگانه برای هر زبان {#separate-directory-for-each-locale}
|
||||
|
||||
ساختار زیر به طور کاملاً صحیح است:
|
||||
|
||||
```
|
||||
docs/
|
||||
├─ en/
|
||||
│ ├─ foo.md
|
||||
├─ es/
|
||||
│ ├─ foo.md
|
||||
├─ fr/
|
||||
├─ foo.md
|
||||
```
|
||||
|
||||
با این حال، ویتپرس به طور پیشفرض به `/` به `/en/` هدایت نمیکند. برای این کار باید سرور خود را پیکربندی کنید. به عنوان مثال، در Netlify، میتوانید فایل `docs/public/_redirects` را به این شکل اضافه کنید:
|
||||
|
||||
```
|
||||
/* /es/:splat 302 Language=es
|
||||
/* /fr/:splat 302 Language=fr
|
||||
/* /en/:splat 302
|
||||
```
|
||||
|
||||
**نکته حرفهای:** در صورت استفاده از روش فوق، میتوانید از کوکی `nf_lang` برای ثبت انتخاب زبان کاربر استفاده کنید:
|
||||
|
||||
```ts
|
||||
// docs/.vitepress/theme/index.ts
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- docs/.vitepress/theme/Layout.vue -->
|
||||
<script setup lang="ts">
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { useData } from 'vitepress'
|
||||
import { watchEffect } from 'vue'
|
||||
|
||||
const { lang } = useData()
|
||||
watchEffect(() => {
|
||||
if (inBrowser) {
|
||||
document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultTheme.Layout />
|
||||
</template>
|
||||
```
|
||||
|
||||
## پشتیبانی از RTL (آزمایشی) {#rtl-support-experimental}
|
||||
|
||||
برای پشتیبانی از RTL، `dir: 'rtl'` را در پیکربندی مشخص کنید و از پلاگینهای PostCSS RTLCSS مانند <https://github.com/MohammadYounes/rtlcss>، <https://github.com/vkalinichev/postcss-rtl> یا <https://github.com/elchininet/postcss-rtlcss> استفاده کنید. باید پلاگین PostCSS خود را به کارگیری `:where([dir="ltr"])` و `:where([dir="rtl"])` به عنوان پیشوندها جلوگیری از مشکلات اولویت CSS استفاده کنید.
|
@ -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">
|
||||
+ ![foo](/foo.png)
|
||||
```
|
||||
|
||||
::: هشدار
|
||||
برای تصاویر پویا، همچنان نیاز به استفاده از `withBase` به طوری که در [راهنمای Base URL](./asset-handling#base-url) نشان داده شده است، دارید.
|
||||
:::
|
||||
|
||||
از عبارت `!<img.*withBase\('(.*)'\).*alt="([^"]*)".*>` برای جستجو و جایگزینی با `![$2]($1)` استفاده کنید تا تمام تصاویر را با سینتکس `![](...)` جایگزین کنید.
|
||||
|
||||
---
|
||||
|
||||
ادامه دارد...
|
@ -0,0 +1,23 @@
|
||||
# حالت MPA <Badge type="warning" text="آزمایشی" /> {#mpa-mode}
|
||||
|
||||
حالت MPA (برنامه چند صفحه) میتواند از طریق خط فرمان با `vitepress build --mpa` فعال شود، یا از طریق تنظیمات با گزینه `mpa: true`.
|
||||
|
||||
در حالت MPA، همه صفحات به طور پیشفرض بدون هیچ جاوااسکریپتی رندر میشوند. به همین دلیل، سایت تولیدی احتمالاً امتیاز بهتری از ابزارهای آزمایشی در اولین بازدید دریافت خواهد کرد.
|
||||
|
||||
با این حال، به دلیل عدم وجود مسیریابی SPA، لینکهای متقاطع به بازنشانی کامل صفحه منتهی میشوند. ناوبری پس از بارگیری در حالت MPA حساسیت به همان اندازه با حالت SPA نخواهد داشت.
|
||||
|
||||
همچنین توجه داشته باشید که عدم وجود JS به طور پیشفرض به این معنی است که شما اساساً Vue را به عنوان یک زبان قالببندی سمت سرور استفاده میکنید. هیچ کنترل کننده رویدادی در مرورگر اضافه نمیشود، بنابراین هیچ تعاملی وجود نخواهد داشت. برای بارگیری JS سمت کلاینت، شما باید از تگ خاص `<script client>` استفاده کنید:
|
||||
|
||||
```html
|
||||
<script client>
|
||||
document.querySelector('h1').addEventListener('click', () => {
|
||||
console.log('JavaScript سمت کلاینت!')
|
||||
})
|
||||
</script>
|
||||
|
||||
# سلام
|
||||
```
|
||||
|
||||
`<script client>` یک ویژگی تنها برای ویتپرس است، نه یک ویژگی Vue. این در هر دو فایل `.md` و `.vue` کار میکند، اما فقط در حالت MPA. اسکریپتهای کلاینت در تمام اجزای تم با هم بسته میشوند، در حالی که اسکریپت کلاینت برای یک صفحه خاص، فقط برای آن صفحه تقسیم میشود.
|
||||
|
||||
توجه داشته باشید که `<script client>` به عنوان **کد مؤلفه مؤلفه Vue** ارزیابی نمیشود: به عنوان یک ماژول جاوااسکریپت معمولی پردازش میشود. به همین دلیل، حالت MPA فقط باید در صورتی استفاده شود که سایت شما به تعامل کمینهای از جانب کلاینت نیاز دارد.
|
@ -0,0 +1,58 @@
|
||||
# جنریت کردن Sitemap {#sitemap-generation}
|
||||
|
||||
ویتپرس با پشتیبانی بیرونی برای تولید فایل `sitemap.xml` برای سایت شما ارائه میشود. برای فعالسازی آن، موارد زیر را به فایل `.vitepress/config.js` خود اضافه کنید:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
sitemap: {
|
||||
hostname: 'https://example.com'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
برای داشتن تگهای `<lastmod>` در فایل `sitemap.xml` خود، میتوانید گزینه [`lastUpdated`](../reference/default-theme-last-updated) را فعال کنید.
|
||||
|
||||
## گزینهها {#options}
|
||||
|
||||
پشتیبانی از sitemap توسط ماژول [`sitemap`](https://www.npmjs.com/package/sitemap) ارائه شده است. میتوانید هر گزینهای که توسط این ماژول پشتیبانی میشود را به گزینه `sitemap` در فایل پیکربندی خود منتقل کنید. این گزینهها به طور مستقیم به سازنده `SitemapStream` منتقل میشوند. برای جزئیات بیشتر به [مستندات sitemap](https://www.npmjs.com/package/sitemap#options-you-can-pass) مراجعه کنید. مثال:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
lastmodDateOnly: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
اگر از `base` در پیکربندی خود استفاده میکنید، باید آن را به گزینه `hostname` اضافه کنید:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
base: '/my-site/',
|
||||
sitemap: {
|
||||
hostname: 'https://example.com/my-site/'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## هوک `transformItems` {#transformitems-hook}
|
||||
|
||||
میتوانید از هوک `sitemap.transformItems` برای اصلاح موارد sitemap قبل از نوشتن آنها به فایل `sitemap.xml` استفاده کنید. این هوک با یک آرایه از موارد sitemap فراخوانی میشود و انتظار دارد که یک آرایه از موارد sitemap بازگردانده شود. مثال:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
sitemap: {
|
||||
hostname: 'https://example.com',
|
||||
transformItems: (items) => {
|
||||
// اضافه کردن موارد جدید یا اصلاح/فیلتر کردن موارد موجود
|
||||
items.push({
|
||||
url: '/extra-page',
|
||||
changefreq: 'monthly',
|
||||
priority: 0.8
|
||||
})
|
||||
return items
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
@ -0,0 +1,65 @@
|
||||
---
|
||||
layout: home
|
||||
|
||||
title: ویتپرس
|
||||
titleTemplate: Vite & Vue Powered Static Site Generator
|
||||
|
||||
hero:
|
||||
name: ویتپرس
|
||||
text: سازنده سایتهای ایستا به کمک Vite و Vue
|
||||
tagline: تبدیل Markdown به مستندات زیبا در چند دقیقه
|
||||
actions:
|
||||
- theme: brand
|
||||
text: ویتپرس چیست؟
|
||||
link: fa/guide/what-is-vitepress
|
||||
- theme: alt
|
||||
text: شروع سریع
|
||||
link: fa/guide/getting-started
|
||||
- theme: alt
|
||||
text: گیتهاب
|
||||
link: https://github.com/vuejs/vitepress
|
||||
image:
|
||||
src: /vitepress-logo-large.webp
|
||||
alt: ویتپرس
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: تمرکز روی محتوا
|
||||
details: ایجاد سایتهای مستندسازی زیبا بدون زحمت و فقط با Markdown
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
|
||||
title: لذت از تجربه توسعه با Vite
|
||||
details: شروع فوری سرور، بهروزرسانیهای سریع و استفاده از افزونههای اکوسیستم Vite
|
||||
- icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
|
||||
title: شخصیسازی با Vue
|
||||
details: استفاده مستقیم از syntax و کامپوننتهای Vue در Markdown، یا ایجاد تمهای شخصی به کمک Vue
|
||||
- icon: 🚀
|
||||
title: ارسال سایت های سریع
|
||||
details: بارگذاری اولیه سریع با HTML ایستا، ناوبری سریع پس از بارگیری با مسیریابی سمت کلاینت
|
||||
---
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: "Vazirmatn", 'Inter', ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(68px);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,74 @@
|
||||
# رابط خط فرمان {#command-line-interface}
|
||||
|
||||
## `vitepress dev` {#vitepress-dev}
|
||||
|
||||
شروع سرور توسعه ویتپرس با استفاده از دایرکتوری مشخص به عنوان ریشه. به طور پیشفرض از دایرکتوری فعلی استفاده میشود. دستور `dev` همچنین میتواند حذف شود زمانی که در دایرکتوری فعلی اجرا میشود.
|
||||
|
||||
### استفاده {#usage}
|
||||
|
||||
```sh
|
||||
# شروع در دایرکتوری فعلی، بدون `dev`
|
||||
vitepress
|
||||
|
||||
# شروع در زیردایرکتوری
|
||||
vitepress dev [root]
|
||||
```
|
||||
|
||||
### گزینهها {#options}
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| --------------- | ----------------------------------------------------------------- |
|
||||
| `--open [path]` | باز کردن مرورگر در زمان راهاندازی (`boolean \| string`) |
|
||||
| `--port <port>` | تعیین پورت (`number`) |
|
||||
| `--base <path>` | مسیر پایه عمومی (پیشفرض: `/`) (`string`) |
|
||||
| `--cors` | فعالسازی CORS |
|
||||
| `--strictPort` | خروج در صورت استفاده از پورت مشخص شده (`boolean`) |
|
||||
| `--force` | اجبار به نادیده گرفتن حافظه پنهان و بازسازی (`boolean`) |
|
||||
|
||||
## `vitepress build` {#vitepress-build}
|
||||
|
||||
ساخت سایت ویتپرس برای تولید نهایی.
|
||||
|
||||
### استفاده {#usage-1}
|
||||
|
||||
```sh
|
||||
vitepress build [root]
|
||||
```
|
||||
|
||||
### گزینهها {#options-1}
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--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` {#vitepress-preview}
|
||||
|
||||
پیشنمایش محلی برای ساخت تولیدی را نمایش دهید.
|
||||
|
||||
### استفاده {#usage-2}
|
||||
|
||||
```sh
|
||||
vitepress preview [root]
|
||||
```
|
||||
|
||||
### گزینهها {#options-2}
|
||||
|
||||
| گزینه | توضیحات |
|
||||
| --------------- | ---------------------------------------- |
|
||||
| `--base <path>` | مسیر پایه عمومی (پیشفرض: `/`) (`string`) |
|
||||
| `--port <port>` | تعیین پورت (`number`) |
|
||||
|
||||
## `vitepress init` {#vitepress-init}
|
||||
|
||||
شروع [جادوگر راهاندازی](../guide/getting-started#setup-wizard) در دایرکتوری فعلی.
|
||||
|
||||
### استفاده {#usage-3}
|
||||
|
||||
```sh
|
||||
vitepress init
|
||||
```
|
@ -0,0 +1,72 @@
|
||||
# نشان {#badge}
|
||||
|
||||
برچسب به شما امکان میدهد وضعیتهای مختلفی را به سربرگهای خود اضافه کنید. به عنوان مثال، میتواند مفید باشد تا نوع بخش را مشخص کنید یا نسخههای پشتیبانی شده را نشان دهید.
|
||||
|
||||
## استفاده {#usage}
|
||||
|
||||
شما میتوانید از کامپوننت `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="پیشفرض" /> {#title}
|
||||
|
||||
### عنوان <Badge type="tip" text="^1.9.0" /> {#title-1}
|
||||
|
||||
### عنوان <Badge type="warning" text="بتا" /> {#title-2}
|
||||
|
||||
### عنوان <Badge type="danger" text="هشدار" /> {#title-3}
|
||||
|
||||
## ارائه دادن محتوای دلخواه {#custom-children}
|
||||
|
||||
`<Badge>` میپذیرد `children` که در برچسب نمایش داده خواهد شد.
|
||||
|
||||
```html
|
||||
### عنوان <Badge type="info">عنصر سفارشی</Badge>
|
||||
```
|
||||
|
||||
### عنوان <Badge type="info">عنصر سفارشی</Badge>
|
||||
|
||||
## سفارشیسازی رنگ نوع {#customize-type-color}
|
||||
|
||||
شما میتوانید استایل برچسبها را با دوبارهنویسی متغیرهای 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-1}
|
||||
|
||||
کامپوننت `<Badge>` پراپهای زیر را میپذیرد:
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
// وقتی `<slot>` ارسال میشود، این مقدار نادیده گرفته میشود.
|
||||
text?: string
|
||||
|
||||
// پیشفرض به `tip`.
|
||||
type?: 'info' | 'tip' | 'warning' | 'danger'
|
||||
}
|
||||
```
|
@ -0,0 +1,22 @@
|
||||
# تبلیغات Carbon {#carbon-ads}
|
||||
|
||||
ویتپرس پشتیبانی داخلی برای [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 @@
|
||||
# پیکربندی پیشفرض تم {#default-theme-config}
|
||||
|
||||
پیکربندی تم به شما امکان میدهد تا تم خود را سفارشی کنید. شما میتوانید پیکربندی تم را از طریق گزینه `themeConfig` در فایل پیکربندی تعریف کنید:
|
||||
|
||||
```ts
|
||||
export default {
|
||||
lang: 'en-US',
|
||||
title: 'ویتپرس',
|
||||
description: 'Vite & Vue powered static site generator.',
|
||||
|
||||
// پیکربندیهای مربوط به تم.
|
||||
themeConfig: {
|
||||
logo: '/logo.svg',
|
||||
nav: [...],
|
||||
sidebar: { ... }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**گزینههای مستند شده در این صفحه تنها برای تم پیشفرض اعمال میشوند.** تمهای مختلف انتظار دارند که پیکربندی تم متفاوتی داشته باشند. در هنگام استفاده از یک تم سفارشی، شیء پیکربندی تم به تم منتقل میشود تا تم بتواند بر اساس آن رفتار شرطی را تعریف کند.
|
||||
|
||||
## i18nRouting {#i18nrouting}
|
||||
|
||||
- نوع: `boolean`
|
||||
|
||||
تغییر زبان به `zh` باعث تغییر URL از `/foo` (یا `/en/foo/`) به `/zh/foo` میشود. شما میتوانید این رفتار را با تنظیم `themeConfig.i18nRouting` به `false` غیرفعال کنید.
|
||||
|
||||
## logo {#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 @@
|
||||
# پیوند ویرایش {#edit-link}
|
||||
|
||||
## پیکربندی سطح سایت {#site-level-config}
|
||||
|
||||
پیوند ویرایش به شما این امکان را میدهد که یک پیوند به صفحه ویرایش را در خدمات مدیریت گیت مانند 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 {#frontmatter-config}
|
||||
|
||||
میتوانید این امکان را برای هر صفحه با استفاده از گزینه `editLink` در frontmatter غیرفعال کنید:
|
||||
|
||||
```yaml
|
||||
---
|
||||
editLink: false
|
||||
---
|
||||
```
|
@ -0,0 +1,53 @@
|
||||
# پاورقی {#footer}
|
||||
|
||||
وقتی `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 {#frontmatter-config}
|
||||
|
||||
این میتواند برای هر صفحه با استفاده از گزینه `footer` در frontmatter غیرفعال شود:
|
||||
|
||||
```yaml
|
||||
---
|
||||
footer: false
|
||||
---
|
||||
```
|
@ -0,0 +1,193 @@
|
||||
# صفحه اصلی {#home-page}
|
||||
|
||||
قالب پیشفرض ویتپرس یک طرح صفحه اصلی فراهم میکند که میتوانید آن را همچنین در [صفحه اصلی این سایت](../) مشاهده کنید. شما میتوانید آن را در هر یک از صفحات خود با تعیین `layout: home` در [frontmatter](./frontmatter-config) استفاده کنید.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: home
|
||||
---
|
||||
```
|
||||
|
||||
اما این گزینه به تنهایی خیلی کاربردی نخواهد بود. شما میتوانید با اضافه کردن بخشهای "قالبهای پیشفرض" مختلف، چندین بخش متفاوت را به صفحه اصلی اضافه کنید مانند `hero` و `features`.
|
||||
|
||||
## بخش Hero {#hero-section}
|
||||
|
||||
بخش 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
|
||||
}
|
||||
```
|
||||
|
||||
### سفارشیسازی رنگ نام {#customizing-the-name-color}
|
||||
|
||||
ویتپرس از رنگ برند (`--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);
|
||||
}
|
||||
```
|
||||
|
||||
## {#features-section} بخش ویژگیها
|
||||
|
||||
در بخش ویژگیها، میتوانید هر تعدادی ویژگی که مایلید پس از بخش 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-content}
|
||||
|
||||
میتوانید محتوای اضافی را به صفحه اصلی سایت خود اضافه کنید فقط با افزودن 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 @@
|
||||
# آخرین بروزرسانی {#last-updated}
|
||||
|
||||
زمان به روزرسانی آخرین محتوا در گوشه پایین سمت راست صفحه نمایش داده خواهد شد. برای فعالسازی آن، گزینه `lastUpdated` را به پیکربندی خود اضافه کنید.
|
||||
|
||||
::: tip نکته
|
||||
برای دیدن زمان بهروزرسانی، باید فایل Markdown را commit کنید.
|
||||
:::
|
||||
|
||||
## پیکربندی سطح سایت {#site-level-config}
|
||||
|
||||
```js
|
||||
export default {
|
||||
lastUpdated: true
|
||||
}
|
||||
```
|
||||
|
||||
## پیکربندی Frontmatter {#frontmatter-config}
|
||||
|
||||
میتوانید این امکان را برای هر صفحه با استفاده از گزینه `lastUpdated` در frontmatter غیرفعال کنید:
|
||||
|
||||
```yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
همچنین به [پیکربندی پیشفرض: آخرین بروزرسانی](./default-theme-config#lastupdated) مراجعه کنید تا اطلاعات بیشتری دریافت کنید. هر مقدار حقیقی در سطح تم از ویژگی را فعال خواهد کرد مگر آنکه به صورت صریح در سطح سایت یا صفحه غیرفعال شود.
|
@ -0,0 +1,62 @@
|
||||
# طرح بندی {#layout}
|
||||
|
||||
میتوانید طرح صفحه را با تنظیم گزینه `layout` در [frontmatter](./frontmatter-config) صفحه انتخاب کنید. سه گزینه طرح وجود دارد، `doc`، `page` و `home`. اگر هیچ چیز مشخص نشده باشد، صفحه به عنوان صفحه `doc` در نظر گرفته میشود.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
## طرح Doc {#doc-layout}
|
||||
|
||||
گزینه `doc` طرح پیشفرض است و تمام محتوای Markdown را به "نمایشگاه" درست میکند. این با پوشاندن کل محتوا در داخل کلاس css `vp-doc` کار میکند و استایلهای لازم را بر روی عناصر زیرش اعمال میکند.
|
||||
|
||||
تقریباً همه عناصر عمومی مانند `p` یا `h2` استایلهای خاصی دارند. بنابراین، به یاد داشته باشید که اگر HTML سفارشیای درون محتوای Markdown اضافه کنید، این استایلها روی آنها هم اعمال خواهند شد.
|
||||
|
||||
این طرح ویژگیهای خاص مستندسازی زیر را فراهم میکند. این ویژگیها فقط در این طرح فعال هستند.
|
||||
|
||||
- پیوند ویرایش
|
||||
- پیوند قبلی و بعدی
|
||||
- ساختار
|
||||
- [تبلیغات Carbon](./default-theme-carbon-ads)
|
||||
|
||||
## طرح Page {#page-layout}
|
||||
|
||||
گزینه `page` به عنوان "صفحه خالی" در نظر گرفته میشود. Markdown همچنان تجزیه و تحلیل میشود و تمامی [توسعههای Markdown](../guide/markdown) به عنوان طرح `doc` کار میکنند، اما هیچ استایل پیشفرضی به آن اعمال نمیشود.
|
||||
|
||||
طرح صفحه به شما این امکان را میدهد که همه چیز را به دلخواه خود شخصیسازی کنید بدون این که طرح ویتپرس بر روی مارکآپ تاثیر بگذارد. این کار بسیار مفید است زمانی که میخواهید صفحه سفارشی خود را ایجاد کنید.
|
||||
|
||||
توجه داشته باشید که حتی در این طرح، نوار کناری نیز نمایش داده میشود اگر صفحه دارای پیکربندی نوار کناری مطابق باشد.
|
||||
|
||||
## طرح Home {#home-layout}
|
||||
|
||||
گزینه `home` صفحه "خانه" قالببندی میکند. در این طرح، میتوانید گزینههای اضافی مانند `hero` و `features` را برای دلخواهسازی محتوا تنظیم کنید. لطفاً [صفحه پیشفرض: صفحه خانه](./default-theme-home-page) را برای اطلاعات بیشتر مشاهده کنید.
|
||||
|
||||
## بدون طرح {#no-layout}
|
||||
|
||||
اگر نمیخواهید هیچ طرحی داشته باشید، میتوانید با گذراندن `layout: false` از frontmatter، از این گزینه استفاده کنید. این گزینه مفید است اگر صفحهٔ نخستی کاملاً قابل تنظیم (بدون هیچ نوار کناری، نوار ناوبری یا پاورقی به صورت پیشفرض) را میخواهید.
|
||||
|
||||
## طرح سفارشی {#custom-layout}
|
||||
|
||||
همچنین میتوانید از یک طرح سفارشی استفاده کنید:
|
||||
|
||||
```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 @@
|
||||
# ناوبری {#nav}
|
||||
|
||||
ناوبری نوار ناوبری است که در بالای صفحه نمایش داده میشود و شامل عنوان سایت، لینکهای منوی جهانی، و غیره میباشد.
|
||||
|
||||
## عنوان سایت و لوگو {#site-title-and-logo}
|
||||
|
||||
به طور پیشفرض، ناو نام سایت را با ارجاع به مقدار [`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) مراجعه کنید.
|
||||
|
||||
## لینکهای ناوبری {#navigation-links}
|
||||
|
||||
شما میتوانید گزینه `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: '...' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### سفارشیسازی وضعیت "فعال" لینک {#customize-link-s-active-state}
|
||||
|
||||
موارد منوی ناوبری زمانی که صفحه فعلی زیر مسیر مطابقت دارد، مشخص میشوند. اگر میخواهید مسیر مطابقت را سفارشی کنید، ویژگی `activeMatch` و regex را به عنوان مقدار رشته تعریف کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
// این لینک وضعیت فعال را در زمانی که کاربر در مسیر `/config/` است، دریافت میکند.
|
||||
{
|
||||
text: 'راهنما',
|
||||
link: '/guide',
|
||||
activeMatch: '/config/'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
::: warning هشدار
|
||||
`activeMatch` انتظار میرود که به عنوان یک رشته regex باشد، اما شما باید آن را به عنوان یک رشته تعریف کنید. ما نمیتوانیم از شیء RegExp واقعی اینجا استفاده کنیم زیرا در زمان ساخت غیر قابل سریالیز کردن است.
|
||||
:::
|
||||
|
||||
### سفارشیسازی ویژگیهای "target" و "rel" لینک {#customize-link-s-target-and-rel-attributes}
|
||||
|
||||
به طور پیشفرض، ویتپرس به طور خودکار ویژگیهای
|
||||
|
||||
`target` و `rel` را بر اساس اینکه لینک یک لینک خارجی است یا خیر، تعیین میکند. اما اگر میخواهید، شما همچنین میتوانید آنها را سفارشی کنید.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{
|
||||
text: 'کالای معاملاتی',
|
||||
link: 'https://www.thegithubshop.com/',
|
||||
target: '_self',
|
||||
rel: 'sponsored'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## لینکهای اجتماعی {#social-links}
|
||||
|
||||
به [`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-next-links}
|
||||
|
||||
شما میتوانید متن و پیوند برای صفحات قبلی و بعدی را سفارشیسازی کنید (نمایش داده شده در پایین صفحه مستندات). این مفید است اگر میخواهید متن دیگری را در این قسمت نمایش دهید که با آنچه در نوار کناری دارید، متفاوت باشد. همچنین، ممکن است مفید باشد که فوتر را غیرفعال کنید یا به یک صفحه لینک کنید که در نوار کناری شما وجود ندارد.
|
||||
|
||||
## prev
|
||||
|
||||
- نوع: `string | false | { text?: string; link?: string }`
|
||||
|
||||
- جزئیات:
|
||||
|
||||
مشخص میکند متن/لینکی که برای لینک به صفحه قبلی نمایش داده خواهد شد. اگر این را در frontmatter تنظیم نکنید، متن/لینک از تنظیمات نوار کناری استخراج خواهد شد.
|
||||
|
||||
- مثالها:
|
||||
|
||||
- برای فقط سفارشیسازی متن:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: 'شروع کنید | مارکداون'
|
||||
---
|
||||
```
|
||||
|
||||
- برای سفارشیسازی هم متن و هم لینک:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev:
|
||||
text: 'مارکداون'
|
||||
link: '/guide/markdown'
|
||||
---
|
||||
```
|
||||
|
||||
- برای مخفی کردن صفحه قبلی:
|
||||
|
||||
```yaml
|
||||
---
|
||||
prev: false
|
||||
---
|
||||
```
|
||||
|
||||
## next
|
||||
|
||||
مشابه `prev` اما برای صفحه بعدی.
|
@ -0,0 +1,255 @@
|
||||
<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>
|
||||
|
||||
# صفحه تیم {#team-page}
|
||||
|
||||
اگر میخواهید تیم خود را معرفی کنید، میتوانید از کامپوننتهای تیم برای ساخت صفحه تیم استفاده کنید. دو راه برای استفاده از این کامپوننتها وجود دارد. یکی اینکه آنها را در صفحه مستندات قرار دهید و دیگری اینکه یک صفحه کامل تیم ایجاد کنید.
|
||||
|
||||
## نمایش اعضای تیم در یک صفحه {#show-team-members-in-a-page}
|
||||
|
||||
میتوانید از کامپوننت `<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).
|
||||
|
||||
## ایجاد یک صفحه کامل تیم {#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>` به عنوان زمانی که در یک صفحه مستند استفاده میشود، کار میکند. این لیست اعضا را نمایش میدهد.
|
||||
|
||||
### اضافه کردن بخشها برای تقسیم اعضای تیم {#add-sections-to-divide-team-members}
|
||||
|
||||
میتوانید بخشها را به صفحه تیم اضافه کنید. به عنوان مثال، ممکن است اعضای مختلف تیمی مانند اعضای تیم اصلی و شرکای اجتماعی داشته باشید. شما میتوانید این اعضا را به بخشها تقسیم کنید تا نقش هر گروه بهتر توضیح داده شود.
|
||||
|
||||
برای این کار، کامپوننت `<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}
|
||||
|
||||
کامپوننت `<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>` {#vpteampage}
|
||||
|
||||
کامپوننت ریشه هنگام ایجاد یک صفحه کامل تیم. فقط یک اسلات را قبول میکند. این همه کامپوننتهای مربوط به تیم را استایل میکند.
|
||||
|
||||
## `<VPTeamPageTitle>` {#vpteampagetitle}
|
||||
|
||||
بخش "عنوان" صفحه را اضافه میکند. بهترین استفاده را در ابتداییترین جای زیر `<VPTeamPage>` داشته باشد. این اسلاتهای `#title` و `#lead` را قبول میکند.
|
||||
|
||||
```html
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>
|
||||
تیم ما
|
||||
</template>
|
||||
<template #lead>
|
||||
توسعه ویتپرس توسط تیمی بینالمللی راهنمایی میشود، برخی از اعضا که انتخاب کردهاند تا در زیر نمایش داده شوند.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
</VPTeamPage>
|
||||
```
|
||||
|
||||
## `<VPTeamPageSection>` {#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,223 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# تنظیمات Frontmatter {#frontmatter-config}
|
||||
|
||||
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]
|
||||
```
|
||||
|
||||
## فقط برای تم پیشفرض {#default-theme-only}
|
||||
|
||||
گزینههای frontmatter زیر فقط زمانی قابل استفاده هستند که از تم پیشفرض استفاده میکنید.
|
||||
|
||||
### layout
|
||||
|
||||
- نوع: `doc | home | page`
|
||||
- پیشفرض: `doc`
|
||||
|
||||
تعیین چیدمان صفحه.
|
||||
|
||||
- `doc` - این چیدمان استایلهای مستندات پیشفرض را به محتوای markdown اعمال میکند.
|
||||
- `home` - چیدمان ویژه برای "صفحه اصلی". شما میتوانید گزینههای اضافی مانند `hero` و `features` را اضافه کنید تا به سرعت یک صفحه نخست زیبا ایجاد کنید.
|
||||
- `page` - مشابه `doc` عمل میکند اما هیچ استایلی به محتوا اعمال نمیشود. مفید است زمانی که میخواهید یک صفحه کاملاً سفارشی ایجاد کنید.
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
```
|
||||
|
||||
### hero <Badge type="info" text="فقط برای صفحه اصلی" /> {#hero}
|
||||
|
||||
تعیین محتویات بخش hero صفحه اصلی هنگامی که `layout` به `home` تنظیم شده است. جزئیات بیشتر در [تم پیشفرض: صفحه اصلی](./default-theme-home-page).
|
||||
|
||||
### features <Badge type="info" text="فقط برای صفحه اصلی" /> {#features}
|
||||
|
||||
تعیین مواردی که در بخش ویژگیها باید نمایش داده شوند هنگامی که `layout` به `home` تنظیم شده است. جزئیات بیشتر در [تم پیشفرض: صفحه اصلی](./default-theme-home-page).
|
||||
|
||||
### navbar
|
||||
|
||||
- نوع: `boolean`
|
||||
- پیشفرض: `true`
|
||||
|
||||
آیا باید [نوار ناوبری](./default-theme-nav) نمایش داده شود یا خیر؟
|
||||
|
||||
```yaml
|
||||
---
|
||||
navbar: false
|
||||
---
|
||||
```
|
||||
|
||||
### sidebar
|
||||
|
||||
- نوع: `boolean`
|
||||
- پیشفرض: `true`
|
||||
|
||||
آیا باید [نوار کناری](./default-theme-sidebar) نمایش داده شود یا خیر؟
|
||||
|
||||
```yaml
|
||||
---
|
||||
sidebar: false
|
||||
---
|
||||
```
|
||||
|
||||
### aside
|
||||
|
||||
- نوع: `boolean | 'left'`
|
||||
- پیشفرض: `true`
|
||||
|
||||
تعیین مکان کامپوننت aside در چیدمان `doc`.
|
||||
|
||||
- اگر این مقدار را به `false` تنظیم کنید، اجرای کانتینر aside جلوگیری میکند.
|
||||
- اگر این مقدار را به `true` تنظیم کنید، aside به راست اجرا میشود.
|
||||
- اگر این مقدار را به `'left'` تنظیم کنید، aside به چپ اجرا میشود.
|
||||
|
||||
```yaml
|
||||
---
|
||||
aside: false
|
||||
---
|
||||
```
|
||||
|
||||
### outline
|
||||
|
||||
- نوع: `number | [number, number] | 'deep' | false`
|
||||
- پیشفرض: `2`
|
||||
|
||||
سطوح سرفصلهای مورد نمایش برای صفحه. همانطور که در [config.themeConfig.outline.level](./default-theme-config#outline) است، این مقدار سطح مجموعه سایت را بازنویسی میکند.
|
||||
|
||||
### lastUpdated
|
||||
|
||||
- نوع: `boolean | Date`
|
||||
- پیشفرض: `true`
|
||||
|
||||
آیا متن [آخرین بهروزرسانی](./default-theme-last-updated) را در پاورقی صفحه فعلی نمایش دهد یا خیر؟ اگر تاریخ و زمان مشخص شده باشد، به جای زمان اصلاح شده git نمایش داده میشود.
|
||||
|
||||
```yaml
|
||||
---
|
||||
lastUpdated: false
|
||||
---
|
||||
```
|
||||
|
||||
### editLink
|
||||
|
||||
- نوع: `boolean`
|
||||
- پیشفرض: `true`
|
||||
|
||||
آیا [پیوند ویرایش](./default-theme-edit-link) را در پاورقی صفحه فعلی نمایش دهد یا خیر؟
|
||||
|
||||
```yaml
|
||||
---
|
||||
editLink: false
|
||||
---
|
||||
```
|
||||
|
||||
### footer
|
||||
|
||||
- نوع: `boolean`
|
||||
- پیشفرض: `true`
|
||||
|
||||
آیا [پاورقی](./default-theme-footer) را
|
||||
|
||||
نمایش دهد یا خیر؟
|
||||
|
||||
```yaml
|
||||
---
|
||||
footer: false
|
||||
---
|
||||
```
|
||||
|
||||
### pageClass
|
||||
|
||||
- نوع: `string`
|
||||
|
||||
افزودن نام کلاس اضافی به یک صفحه خاص.
|
||||
|
||||
```yaml
|
||||
---
|
||||
pageClass: custom-page-class
|
||||
---
|
||||
```
|
||||
|
||||
سپس میتوانید استایلهای این صفحه خاص را در فایل `.vitepress/theme/custom.css` سفارشی کنید:
|
||||
|
||||
```css
|
||||
.custom-page-class {
|
||||
/* استایلهای مخصوص صفحه */
|
||||
}
|
||||
```
|
Loading…
Reference in new issue