diff --git a/docs/.vitepress/config/fa.ts b/docs/.vitepress/config/fa.ts index 212dcede..4fc5cb1c 100644 --- a/docs/.vitepress/config/fa.ts +++ b/docs/.vitepress/config/fa.ts @@ -7,9 +7,9 @@ const pkg = require('vitepress/package.json') export const fa = defineConfig({ lang: 'en-US', description: 'Vite & Vue powered static site generator.', + dir: 'rtl', themeConfig: { nav: nav(), - sidebar: { '/fa/guide/': { base: '/fa/guide/', items: sidebarGuide() }, '/fa/reference/': { base: '/fa/reference/', items: sidebarReference() } @@ -47,7 +47,8 @@ export const fa = defineConfig({ sidebarMenuLabel: 'منوی جانبی', darkModeSwitchLabel: 'تم تاریک', lightModeSwitchTitle: 'رفتن به حالت روشن', - darkModeSwitchTitle: 'رفتن به حالت تاریک' + darkModeSwitchTitle: 'رفتن به حالت تاریک', + siteTitle: 'ویت‌پرس' } }) @@ -96,7 +97,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { collapsed: false, items: [ { text: 'افزونه‌های Markdown', link: 'markdown' }, - { text: 'مدیریت Asset', link: 'asset-handling' }, + { text: 'مدیریت منابع', link: 'asset-handling' }, { text: 'Frontmatter', link: 'frontmatter' }, { text: 'استفاده از Vue در Markdown', link: 'using-vue' }, { text: 'بین‌المللی سازی', link: 'i18n' } @@ -161,3 +162,48 @@ function sidebarReference(): DefaultTheme.SidebarItem[] { } ] } + +const search: DefaultTheme.AlgoliaSearchOptions['locales'] = { + fa: { + placeholder: 'Pesquisar documentos', + translations: { + button: { + buttonText: 'Pesquisar', + buttonAriaLabel: 'Pesquisar' + }, + modal: { + searchBox: { + resetButtonTitle: 'Limpar pesquisa', + resetButtonAriaLabel: 'Limpar pesquisa', + cancelButtonText: 'Cancelar', + cancelButtonAriaLabel: 'Cancelar' + }, + startScreen: { + recentSearchesTitle: 'Histórico de Pesquisa', + noRecentSearchesText: 'Nenhuma pesquisa recente', + saveRecentSearchButtonTitle: 'Salvar no histórico de pesquisas', + removeRecentSearchButtonTitle: 'Remover do histórico de pesquisas', + favoriteSearchesTitle: 'Favoritos', + removeFavoriteSearchButtonTitle: 'Remover dos favoritos' + }, + errorScreen: { + titleText: 'Não foi possível obter resultados', + helpText: 'Verifique a sua conexão de rede' + }, + footer: { + selectText: 'Selecionar', + navigateText: 'Navegar', + closeText: 'Fechar', + searchByText: 'Pesquisa por' + }, + noResultsScreen: { + noResultsText: 'Não foi possível encontrar resultados', + suggestedQueryText: 'Você pode tentar uma nova consulta', + reportMissingResultsText: + 'Deveriam haver resultados para essa consulta?', + reportMissingResultsLinkText: 'Clique para enviar feedback' + } + } + } + } +} diff --git a/docs/.vitepress/config/shared.ts b/docs/.vitepress/config/shared.ts index e6f48ad0..f3920e90 100644 --- a/docs/.vitepress/config/shared.ts +++ b/docs/.vitepress/config/shared.ts @@ -3,6 +3,7 @@ import { search as zhSearch } from './zh' import { search as ptSearch } from './pt' import { search as ruSearch } from './ru' import { search as esSearch } from './es' +import { search as faSearch } from './fa' export const shared = defineConfig({ title: 'VitePress', @@ -61,7 +62,13 @@ export const shared = defineConfig({ appId: '8J64VVRP8K', apiKey: 'a18e2f4cc5665f6602c5631fd868adfd', indexName: 'vitepress', - locales: { ...zhSearch, ...ptSearch, ...ruSearch, ...esSearch } + locales: { + ...zhSearch, + ...ptSearch, + ...ruSearch, + ...esSearch, + ...faSearch + } } }, diff --git a/docs/fa/guide/deploy.md b/docs/fa/guide/deploy.md new file mode 100644 index 00000000..cf14fd5a --- /dev/null +++ b/docs/fa/guide/deploy.md @@ -0,0 +1,337 @@ +--- +outline: deep +--- + +# استقرار وب‌سایت VitePress شما + +راهنماهای زیر بر اساس برخی فرضیات مشترک است: + +- وب‌سایت VitePress در دایرکتوری `docs` پروژه شما قرار دارد. +- شما از دایرکتوری خروجی پیش‌فرض ساخته‌شده (`.vitepress/dist`) استفاده می‌کنید. +- VitePress به‌عنوان یک وابستگی محلی در پروژه شما نصب شده است و شما اسکریپت‌های زیر را در `package.json` پیکربندی کرده‌اید: + + ```json + { + "scripts": { + "docs:build": "vitepress build docs", + "docs:preview": "vitepress preview docs" + } + } + ``` + +## ساخت و تست محلی + +1. برای ساخت اسناد، این دستور را اجرا کنید: + + ```sh + $ npm run docs:build + ``` + +2. پس از ساخت، آن را به‌صورت محلی پیش‌نمایش دهید با اجرای این دستور: + + ```sh + $ npm run docs:preview + ``` + + دستور `preview` یک سرور وب استاتیک محلی راه‌اندازی می‌کند که دایرکتوری خروجی `.vitepress/dist` را در آدرس `http://localhost:4173` ارائه می‌دهد. شما می‌توانید از این امکان استفاده کنید تا اطمینان حاصل کنید که همه چیز قبل از رفع به محیط تولیدی به‌درستی نمایش داده می‌شود. + +3. می‌توانید پورت سرور را با انتقال `--port` به‌عنوان یک آرگمان پیکربندی کنید. + + ```json + { + "scripts": { + "docs:preview": "vitepress preview docs --port 8080" + } + } + ``` + + حالا اسکریپت `docs:preview` سرور را در `http://localhost:8080` راه‌اندازی خواهد کرد. + +## تنظیم مسیر پایه عمومی + +به‌طور پیش‌فرض، ما فرض می‌کنیم که وب‌سایت در مسیر ریشه دامنه (`/`) انتشار می‌یابد. اگر وب‌سایت شما باید در یک زیرمسیر ارائه شود، مانند `https://mywebsite.com/blog/`، در این صورت باید گزینه [`base`](../reference/site-config#base) را به `'/blog/'` در پیکربندی VitePress تنظیم کنید. + +**مثال:** اگر از صفحات GitHub (یا GitLab) استفاده می‌کنید و به `user.github.io/repo/` انتشار می‌دهید، آنگاه `base` را به `/repo/` تنظیم کنید. + +## سربرگ‌های حافظه نهان HTTP + +اگر شما کنترلی بر روی سربرگ‌های HTTP در سرور تولیدی خود دارید، می‌توانید سربرگ‌های `cache-control` را پیکربندی کنید تا بهبود عملکرد در بازدیدهای تکراری داشته باشید. + +بسیاری از فایل‌های استاتیک (مانند JavaScript، CSS و سایر فایل‌های وارد شده که در `public` نیستند) از نام‌های فایل با هش استفاده می‌کنند. اگر پیش‌نمایش تولیدی را با استفاده از تب شبکه ابزارهای توسعه مرورگر خود بررسی کنید، فایل‌هایی مانند `app.4f283b18.js` را خواهید دید. + +این هش `4f283b18` از محتوای این فایل تولید شده است. اگر محتوا تغییر کند، URL‌ها نیز تغییر می‌کنند. این به این معنی است که می‌توانید برای این فایل‌ها سربرگ‌های حافظه نهان قدرتمند را استفاده کنید. همه این فایل‌ها در زیردایرکتوری `assets/` در دایرکتوری خروجی قرار می‌گیرند، بنابراین می‌توانید برای آن‌ها سربرگ زیر را پیکربندی کنید: + +``` +Cache-Control: max-age=31536000,immutable +``` + +::: details مثال فایل `_headers` برای Netlify + +``` +/assets/* + cache-control: max-age=31536000 + cache-control: immutable +``` + +توجه: فایل `_headers` باید در [دایرکتوری عمومی](./asset-handling#the-public-directory) قرار گیرد - در این مورد، `docs/public/_headers` - تا کپی شود بطور صحیح به دایرکتوری خروجی. + +[مستندات سربرگ‌های سفارشی Netlify](https://docs.netlify.com/routing/headers/) + +::: + +::: details پیکربندی مثال Vercel در `vercel.json` + +```json +{ + "headers": [ + { + "source": "/assets/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "max-age=31536000, immutable" + } + ] + } + ] +} +``` + +توجه: فایل `vercel.json` باید در ریشه مخزن شما قرار گیرد. + +[مستندات Vercel در مورد پیکربندی سربرگ‌ها](https://vercel.com/docs/concepts/projects/project-configuration#headers) + +::: + +## راهنمای‌های پلتفرم + +### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render + +یک پروژه جدید راه‌اندازی کرده و این تنظیمات را با استفاده از داشبورد خود تغییر دهید: + +- **دستور ساخت:** `npm run docs:build` +- **دایرکتوری خروجی:** `docs/.vitepress/dist` +- **نسخه Node:** `18` (یا بالاتر) + +::: warning هشدار +گزینه‌هایی مانند _Auto Minify_ را برای کد HTML فعال نکنید. این گزینه‌ها ممکن است توضیحاتی را که به Vue معنا دارد، از خروجی حذف کنند. ممکن است خطاهای ناسازگاری را در اجرا ببینید اگر حذف شوند. +::: + +### صفحات GitHub + +1. یک فایل به نام `deploy.yml` در دایرکتوری `.github/workflows` پروژه خود ایجاد کنید با محتوایی مانند زیر: + + ```yaml + # Sample workflow for building and deploying a VitePress site to GitHub Pages + # + name: Deploy VitePress site to Pages + + on: + # Runs on pushes targeting the `main` branch. Change this to `master` if you're + # using the `master` branch as the default branch. + push: + branches: [main] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + + # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages + permissions: + contents: read + pages: write + id-token: write + + # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. + # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. + concurrency: + group: pages + cancel-in-progress: false + + jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 # Not needed if lastUpdated is not enabled + # - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm + # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm # or pnpm / yarn + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Install dependencies + run: npm ci # or pnpm install / yarn install / bun install + - name: Build with VitePress + run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/.vitepress/dist + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 + ``` + +::: warning هشدار + مطمئن شوید که گزینه `base` در VitePress به‌درستی پیکربندی شده است. برای اطلاعات بیشتر به [تنظیم مسیر پایه عمومی](#setting-a-public-base-path) مراجعه کنید. + ::: + +2. در تنظیمات مخزن خود در زیرمنوی "Build and deployment > Source" در "Github Actions" را انتخاب کنید. + +3. تغییرات خود را به شاخه `main` ارسال کنید و منتظر GitHub Actions workflow بمانید. شما باید وب‌سایت خود را در `https://.github.io/[repository]/` یا `https:///` بسته به تنظیمات خود دیده شده است. وب‌سایت شما به‌طور خودکار در هر بار فشرده‌سازی به شاخه `main` ارسال می‌شود. + +### صفحات GitLab + +1. `outDir` را در پیکربندی VitePress به `../public` تنظیم کنید. گزینه `base` را به `'//'` تنظیم کنید اگر می‌خواهید در `https://.gitlab.io//` انتشار دهید. + +2. یک فایل به نام `.gitlab-ci.yml` در ریشه پروژه خود با محتوای زیر ایجاد کنید. این کار به ساخت و انتشار وب‌سایت شما هر زمانی که تغییری در محتوا ایجاد می‌کنید، می‌پردازد: + + ```yaml + image: node:18 + pages: + cache: + paths: + - node_modules/ + script: + # - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled + - npm install + - npm run docs:build + artifacts: + paths: + - public + only: + - main + ``` + +### Azure Static Web Apps + +1. دستورالعمل [رسمی](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration) را دنبال کنید. + +2. این مقادیر را در فایل پیکربندی خود تنظیم کنید (و مواردی که نیازی به آن‌ها ندارید، مانند `api_location` را حذف کنید): + + - **`app_location`**: `/` + - **`output_location`**: `docs/.vitepress/dist` + - **`app_build_command`**: `npm run docs:build` + +### Firebase + +1. فایل‌های `firebase.json` و `.firebaserc` را در ریشه پروژه خود ایجاد کنید: + + `firebase.json`: + + ```json + { + "hosting": { + "public": "docs/.vitepress/dist", + "ignore": [] + } + } + ``` + + `.firebaserc`: + + ```json + { + "projects": { + "default": "" + } + } + ``` + +2. بعد از اجرای `npm run docs:build`، دستور زیر را برای انتشار اجرا کنید: + + ```sh + firebase deploy + ``` + +### Surge + +1. بعد از اجرای `npm run docs:build`، دستور زیر را برای انتشار اجرا کنید: + + ```sh + npx surge docs/.vitepress/dist + ``` + +### Heroku + +1. دستورالعمل و راهنماها را در [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static) دنبال کنید. + +2. یک فایل به نام `static.json` در ریشه پروژه خود با محتوای زیر ایجاد کنید: + + ```json + { + "root": "docs/.vitepress/dist" + } + ``` + +### Edgio + +به [ایجاد و انتشار یک برنامه VitePress در Edgio](https://docs.edg.io/guides/vitepress) مراجعه کنید. + +### Kinsta Static Site Hosting + +شما می‌توانید وب‌سایت VitePress خود را بر روی [Kinsta](https://kinsta.com/static-site-hosting/) با دنبال کردن این [دستورالعمل‌ها](https://kinsta.com/docs/vitepress-static-site-example/) انتشار دهید. + +### Stormkit + +شما می‌توانید پروژه VitePress خود را به [Stormkit](https://www.stormkit.io) با دنبال کردن این [دستورالعمل‌ها](https://stormkit.io/blog/how-to-deploy-vitepress) انتشار دهید. + +### Nginx + +اینجا یک مثال از پیکربندی بلوک سرور Nginx است. این تنظیم شامل فشرده‌سازی gzip برای فایل‌های متن معمولی، قوانین برای سرویس فایل‌های استاتیک سایت VitePress شما با هدرهای مناسب برای حافظه‌نگهداری مناسب است و همچنین مدیریت `cleanUrls: true` می‌کند. + +```nginx +server { + gzip on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + listen 80; + server_name _; + index index.html; + + location / { + # content location + root /app; + + # exact matches -> reverse clean urls -> folders -> not found + try_files $uri $uri.html $uri/ =404; + + # non existent pages + error_page 404 /404.html; + + # a folder without index.html raises 403 in this setup + error_page 403 /404.html; + + # adjust caching headers + # files in the assets folder have hashes filenames + location ~* ^/assets/ { + expires 1y; + add_header Cache-Control "public, immutable"; + } + } +} +``` + +این پیکربندی فرض می‌کند که سایت VitePress ساخته شده شما در دایرکتوری `/app` در سرور شما قرار دارد. دستورالعمل `root` را از ابزارهای مربوطه استفاده کنید اگر فایل‌های سایت شما در جای دیگری قرار دارد. + +::: warning هشدار +مسیر تنظیمات try_files نباید به طور پیش‌فرض به index.html مانند برنامه‌های دیگر Vue مشخص شود. این کار باعث وضعیت نامعتبر صفحه می‌شود. +::: + +اطلاعات بیشتر را در [مستندات رسمی nginx](https://nginx.org/en/docs/)، در این مسائل [#2837](https://github.com/vuejs/vitepress/discussions/2837)، [#3235](https://github.com/vuejs/vitepress/issues/3235) و همچنین در این [پست وبلاگ](https://blog.mehdi.cc/articles/vitepress-cleanurls-on-nginx-environment#readings) از Mehdi Merah پیدا کنید. diff --git a/docs/fa/guide/getting-started.md b/docs/fa/guide/getting-started.md new file mode 100644 index 00000000..a3d4e2cb --- /dev/null +++ b/docs/fa/guide/getting-started.md @@ -0,0 +1,225 @@ +# شروع کار + +## تست آنلاین + +می‌توانید VitePress را مستقیماً در مرورگر خود در [StackBlitz](https://vitepress.new) امتحان کنید. + +## نصب + +### پیش‌نیازها + +- [Node.js](https://nodejs.org/) نسخه 18 یا بالاتر. +- ترمینال برای دسترسی به VitePress از طریق رابط خط فرمان (CLI). +- ویرایشگر متنی با پشتیبانی از [Markdown](https://en.wikipedia.org/wiki/Markdown). + - [VSCode](https://code.visualstudio.com/) به همراه [افزونه رسمی Vue](https://marketplace.visualstudio.com/items?itemName=Vue.volar). + +ویت‌پرس می‌تواند به صورت مستقل استفاده شود یا در یک پروژه موجود نصب شود. در هر دو حالت، می‌توانید آن را با دستور زیر نصب کنید: + +::: code-group + +```sh [npm] +$ npm add -D vitepress +``` + +```sh [pnpm] +$ pnpm add -D vitepress +``` + +```sh [yarn] +$ yarn add -D vitepress +``` + +```sh [yarn (pnp)] +$ yarn add -D vitepress vue +``` + +```sh [bun] +$ bun add -D vitepress +``` + +::: + +::: details درباره peer dependency های ناموجود هشدار دریافت می‌کنید؟ + +اگر از PNPM استفاده می‌کنید، متوجه هشدار peer dependency برای `@docsearch/js` خواهید شد. این مسئله جلوی عملکرد VitePress را نمی‌گیرد. اگر می‌خواهید این هشدار را نادیده بگیرید، موارد زیر را به `package.json` خود اضافه کنید: + +```json +"pnpm": { + "peerDependencyRules": { + "ignoreMissing": [ + "@algolia/client-search", + "search-insights" + ] + } +} +``` + +::: + +::: tip نکته + +ویت‌پرس یک بسته فقط ESM است. از `require()` برای وارد کردن آن استفاده نکنید و اطمینان حاصل کنید که نزدیک‌ترین `package.json` شما شامل `"type": "module"` است، یا پسوند فایل‌های مربوطه خود مانند `.vitepress/config.js` را به `.mjs`/`.mts` تغییر دهید. برای جزئیات بیشتر به [راهنمای عیب‌یابی Vite](http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only) مراجعه کنید. همچنین، در زمینه‌های async CJS می‌توانید از `await import('vitepress')` استفاده کنید. + +::: + +### Wizard راه‌اندازی + +ویت‌پرس با یک جادوگر راه‌اندازی خط فرمان ارائه می‌شود که به شما کمک می‌کند یک پروژه پایه را بسازید. پس از نصب، با اجرای دستور زیر جادوگر را راه‌اندازی کنید: + +::: code-group + +```sh [npm] +$ npx vitepress init +``` + +```sh [pnpm] +$ pnpm vitepress init +``` + +```sh [yarn] +$ yarn vitepress init +``` + +```sh [bun] +$ bun vitepress init +``` + +::: + +چند سوال ساده از شما پرسیده خواهد شد: + +<<< @/snippets/init.ansi + +::: tip Vue به عنوان peer dependency + +اگر قصد دارید سفارشی‌سازی‌هایی که از کامپوننت‌ها یا APIهای Vue استفاده می‌کنند را انجام دهید، باید `vue` را به عنوان dependency نیز نصب کنید. + +::: + +## ساختار فایل‌ها + +اگر در حال ساخت یک سایت مستقل VitePress هستید، می‌توانید سایت را در دایرکتوری فعلی خود (`./`) بسازید. اما، اگر VitePress را در یک پروژه موجود به همراه سایر کدهای منبع نصب می‌کنید، توصیه می‌شود سایت را در یک دایرکتوری تودرتو (مثلاً `./docs`) بسازید تا از بقیه پروژه جدا باشد. + +فرض کنیم که پروژه VitePress را در `./docs` ساخته‌اید، ساختار فایل‌های تولید شده باید به این شکل باشد: + +``` +. +├─ docs +│ ├─ .vitepress +│ │ └─ config.js +│ ├─ api-examples.md +│ ├─ markdown-examples.md +│ └─ index.md +└─ package.json +``` + +دایرکتوری `docs` به عنوان **ریشه پروژه** سایت VitePress در نظر گرفته می‌شود. دایرکتوری `.vitepress` محل ذخیره فایل‌های پیکربندی VitePress، حافظه نهان سرور توسعه، خروجی ساخت و کد سفارشی‌سازی تم اختیاری است. + +::: tip + +به طور پیش‌فرض، VitePress حافظه نهان سرور توسعه خود را در `.vitepress/cache` و خروجی ساخت تولیدی را در `.vitepress/dist` ذخیره می‌کند. اگر از Git استفاده می‌کنید، باید آنها را به فایل `.gitignore` خود اضافه کنید. این مکان‌ها همچنین قابل [پیکربندی](../reference/site-config#outdir) هستند. + +::: + +### فایل پیکربندی + +فایل پیکربندی (`.vitepress/config.js`) به شما اجازه می‌دهد جنبه‌های مختلف سایت VitePress خود را سفارشی کنید، با گزینه‌های پایه‌ای مانند عنوان و توضیحات سایت: + +```js +// .vitepress/config.js +export default { + // گزینه‌های سطح سایت + title: 'VitePress', + description: 'فقط در حال بازی کردن.', + + themeConfig: { + // گزینه‌های سطح تم + } +} +``` + +همچنین می‌توانید رفتار تم را از طریق گزینه `themeConfig` پیکربندی کنید. برای جزئیات کامل درباره همه گزینه‌های پیکربندی، به [راهنمای پیکربندی](../reference/site-config) مراجعه کنید. + +### فایل‌های منبع + +فایل‌های Markdown خارج از دایرکتوری `.vitepress` به عنوان **فایل‌های منبع** در نظر گرفته می‌شوند. + +ویت‌پرس از **مسیر یابی مبتنی بر فایل** استفاده می‌کند: هر فایل `.md` به یک فایل `.html` متناظر با همان مسیر کامپایل می‌شود. برای مثال، `index.md` به `index.html` کامپایل می‌شود و می‌تواند در مسیر ریشه `/` سایت VitePress نتیجه‌گیری شده بازدید شود. + +ویت‌پرس همچنین قابلیت تولید URL‌های تمیز، بازنویسی مسیرها و تولید پویا صفحات را فراهم می‌کند. این موارد در [راهنمای مسیر یابی](./routing) پوشش داده خواهند شد. + +## راه‌اندازی و اجرا + +این ابزار باید اسکریپت‌های npm زیر را به `package.json` شما اضافه کرده باشد اگر اجازه این کار را در طول فرآیند راه‌اندازی داده باشید: + +```json +{ + ... + "scripts": { + "docs:dev": "vitepress dev docs", + "docs:build": "vitepress build docs", + "docs:preview": "vitepress preview docs" + }, + ... +} +``` + +اسکریپت `docs:dev` یک سرور توسعه محلی با به‌روزرسانی‌های فوری راه‌اندازی می‌کند. آن را با دستور زیر اجرا کنید: + +::: code-group + +```sh [npm] +$ npm run docs:dev +``` + +```sh [pnpm] +$ pnpm run docs:dev +``` + +```sh [yarn] +$ yarn docs:dev +``` + +```sh [bun] +$ bun run docs:dev +``` + +::: + +به جای اسکریپت‌های npm، می‌توانید VitePress را مستقیماً با دستور زیر اجرا کنید: + +::: code-group + +```sh [npm] +$ npx vitepress dev docs +``` + +```sh [pnpm] +$ pnpm vitepress dev docs +``` + +```sh [yarn] +$ yarn vitepress dev docs +``` + +```sh [bun] +$ bun vitepress dev docs +``` + +::: + +استفاده بیشتر از خط فرمان در [مرجع CLI](../reference/cli) مستند شده است. + +سرور توسعه باید در `http://localhost:5173` اجرا شود. URL را در مرورگر خود بازدید کنید تا سایت جدید خود را در عمل ببینید! + +## مراحل بعدی + +- برای درک بهتر چگونگی نگاشت فایل‌های markdown به HTML تولید شده، به [راهنمای مسیر یابی](./routing) مراجعه کنید. + +- برای کشف بیشتر درباره اینکه چه کارهایی می‌توانید در صفحه انجام دهید، مانند نوشتن محتوای markdown یا استفاده از کامپوننت‌های Vue، به بخش "نوشتن" راهنما مراجعه کنید. یک مکان عالی برای شروع یادگیری درباره [افزونه‌های Markdown](./markdown) است. + +- برای کشف ویژگی‌های ارائه شده توسط تم پیش‌فرض مستندات، به [مرجع پیکربندی تم پیش‌فرض](../reference/default-theme-config) مراجعه کنید. + +- اگر می‌خواهید ظاهر سایت خود را بیشتر سفارشی کنید، بررسی کنید که چگونه [تم پیش‌فرض را گسترش دهید](./extending-default-theme) یا [یک تم سفارشی بسازید](./custom-theme). + +- هنگامی که سایت مستندات شما شکل گرفت، حتماً [راهنمای استقرار](./deploy) را بخوانید. \ No newline at end of file diff --git a/docs/fa/guide/routing.md b/docs/fa/guide/routing.md new file mode 100644 index 00000000..975d8b62 --- /dev/null +++ b/docs/fa/guide/routing.md @@ -0,0 +1,377 @@ +--- +outline: deep +--- + +# مسیریابی + +## مسیریابی مبتنی بر فایل + +VitePress از مسیریابی مبتنی بر فایل استفاده می‌کند که به این معنی است که صفحات HTML تولید شده از ساختار دایرکتوری فایل‌های Markdown منبع نقشه‌بندی می‌شوند. به عنوان مثال، با توجه به ساختار دایرکتوری زیر: + +``` +. +├─ guide +│ ├─ getting-started.md +│ └─ index.md +├─ index.md +└─ prologue.md +``` + +صفحات HTML تولید شده به شرح زیر خواهد بود: + +``` +index.md --> /index.html (قابل دسترس به عنوان /) +prologue.md --> /prologue.html +guide/index.md --> /guide/index.html (قابل دسترس به عنوان /guide/) +guide/getting-started.md --> /guide/getting-started.html +``` + +این صفحات HTML نهایی می‌توانند بر روی هر سرور وبی که قادر به ارائه فایل‌های استاتیک است، میزبانی شوند. + +## ریشه و دایرکتوری منبع + +در ساختار فایل پروژه VitePress، دو مفهوم مهم وجود دارد: **ریشه پروژه** و **دایرکتوری منبع**. + +### ریشه پروژه + +ریشه پروژه جایی است که VitePress سعی می‌کند برای دایرکتوری ویژه `.vitepress` را بررسی کند. دایرکتوری `.vitepress` مکانی رزرو شده برای فایل پیکربندی، حافظه نهان سرور توسعه، خروجی ساخت، و کد سفارشی‌سازی موضوع اختیاری VitePress است. + +زمانی که شما دستور `vitepress dev` یا `vitepress build` را از خط فرمان اجرا می‌کنید، VitePress از دایرکتوری کاری فعلی به عنوان ریشه پروژه استفاده می‌کند. برای مشخص کردن یک زیردایرکتوری به عنوان ریشه، باید مسیر نسبی را به دستور ارسال کنید. به عنوان مثال، اگر پروژه VitePress شما در `./docs` قرار دارد، باید دستور `vitepress dev docs` را اجرا کنید: + +``` +. +├─ docs # ریشه پروژه +│ ├─ .vitepress # دایرکتوری پیکربندی +│ ├─ getting-started.md +│ └─ index.md +└─ ... +``` + +```sh +vitepress dev docs +``` + +این عمل به نتیجه زیر منجر می‌شود: + +``` +docs/index.md --> /index.html (قابل دسترس به عنوان /) +docs/getting-started.md --> /getting-started.html +``` + +### دایرکتوری منبع + +دایرکتوری منبع جایی است که فایل‌های منبع Markdown شما قرار می‌گیرند. به طور پیش‌فرض، این همانند ریشه پروژه است. با این حال، شما می‌توانید آن را از طریق گزینه [`srcDir`](../reference/site-config#srcdir) پیکربندی کنید. + +گزینه `srcDir` نسبت به ریشه پروژه حل می‌شود. به عنوان مثال، با `srcDir: 'src'`، ساختار فایل شما به این صورت خواهد بود: + +``` +. # ریشه پروژه +├─ .vitepress # دایرکتوری پیکربندی +└─ src # دایرکتوری منبع + ├─ getting-started.md + └─ index.md +``` + +نتیجه نقشه‌بندی منبع به HTML: + +``` +src/index.md --> /index.html (قابل دسترس به عنوان /) +src/getting-started.md --> /getting-started.html +``` + +## لینک‌دهی بین صفحات + +می‌توانید هنگام لینک‌دهی بین صفحات از مسیرهای نسبی و مطلق استفاده کنید. توجه داشته باشید که با اینکه هر دو پسوند `.md` و `.html` کار می‌کنند، بهتر است که پسوندها را حذف کنید تا VitePress بتواند URL‌های نهایی را بر اساس پیکربندی شما تولید کند. + +```md + +[شروع کار](./getting-started) +[شروع کار](../guide/getting-started) + + +[شروع کار](./getting-started.md) +[شروع کار](./getting-started.html) +``` + +جهت آشنایی بیشتر با لینک‌دهی به منابع مانند تصاویر به [مدیریت منابع](./asset-handling) مراجعه کنید. + +### لینک‌دهی به صفحات غیر VitePress + +اگر می‌خواهید به یک صفحه در وب‌سایت خود لینک دهید که توسط VitePress تولید نشده است، باید یا از URL کامل (باز می‌شود در یک تب جدید) استفاده کنید، یا هدف را به طور صریح مشخص کنید: + +**ورودی** + +```md +[لینک به pure.html](/pure.html){target="_self"} +``` + +**خروجی** + +[لینک به pure.html](/pure.html){target="_self"} + +::: tip توجه + +در لینک‌های Markdown، `base` به طور خودکار به URL پیشوند داده می‌شود. این بدان معنی است که اگر می‌خواهید به صفحه‌ای خارج از پایه خود لینک دهید، باید چیزی شبیه `../../pure.html` را در لینک استفاده کنید (توسط مرورگر نسبت به صفحه فعلی حل می‌شود). + +در غیر این صورت، می‌توانید به طور مستقیم از anchor tag syntax استفاده کنید: + +```md +لینک به pure.html +``` + +::: + +## تولید URL‌های تمیز + +::: warning نیازمندی پشتیبانی سرور + +برای ارائه URL‌های تمیز با VitePress، نیاز به پشتیبانی سمت سرور وجود دارد. + +::: + +به طور پیش‌فرض، VitePress لینک‌های ورودی را به URL‌هایی با پسوند `.html` حل می‌کند. با این حال، برخی از کاربران ممکن است از URL‌های "تمیز" بدون پسوند `.html` استفاده کنند - به عنوان مثال، `example.com/path` به جای `example.com/path.html`. + +برخی از سرورها یا پلتفرم‌های میزبانی (مانند Netlify، Vercel، GitHub Pages) امکان این را فراهم می‌کنند که یک URL مانند `/foo` به `/foo.html` نگاشت شود اگر موجود باشد، بدون انتقال: + +- Netlify و GitHub Pages این را به طور پیش‌فرض پشتیبانی می‌کنند. +- Vercel نیاز به فعال‌سازی [`cleanUrls` در `vercel.json`](https://vercel.com/docs/concepts/projects/project-configuration#cleanurls) دارد. + +اگر این ویژگی برای شما در دسترس است، می‌توانید از گزینه پیکربندی خود VitePress به نام [`cleanUrls`](../reference/site-config#cleanurls) استفاده کنید تا: + +- لینک‌های ورودی بین صفحات بدون پسوند `.html` تولید شوند. +- اگر مسیر کنونی با `.html` ختم شود، مسیریاب به صورت تغییر مسیر مشتری به مسیر بدون پسوند انجام می‌دهد. + +اگر امکان پیکربندی سرور شما برای این پشتیبانی وجود نداشته باشد، شما باید به صورت دستی به ساختار دایرکتوری زیر رجوع کنید: + +``` +. +├─ getting-started +│ └─ index.md +├─ installation +│ └─ index.md +└─ index.md +``` + +## بازنویسی مسیر + +می‌توانید نقشه‌بندی بین ساختار دایرکتوری منبع و صفحات تولید شده را سفارشی‌سازی کنید. این ویژگی وقتی مفید است که یک ساختار پروژه پیچیده داشته باشید. به عنوان مثال، فرض کنید یک مونورپو با چند بسته دارید و می‌خواهید مستندات را همراه با فایل‌های منبع قرار دهید مانند این: + +``` +. +├─ packages +│ ├─ pkg-a +│ │ └─ src +│ │ ├─ pkg-a-code.ts +│ │ └─ pkg-a-docs.md +│ └─ pkg-b +│ └─ src +│ ├─ pkg-b-code.ts +│ └─ pkg-b-docs.md +``` + +و می‌خواهید صفحات VitePress به این صورت تولید شوند: + +``` +packages/pkg-a/src/pkg-a-docs.md --> /pkg-a/index.html +packages/pkg-b/src/pkg-b-docs.md --> /pkg-b/index.html +``` + +می‌توانید این کار را با پیکربندی گزینه [`rewrites`](../reference/site-config#rewrites) مانند زیر انجام دهید: + +```ts +// .vitepress/config.js +export default { + rewrites: { + 'packages/pkg-a/src/pkg-a-docs.md': 'pkg-a/index.md', + 'packages/pkg-b/src/pkg-b-docs.md': 'pkg-b/index.md' + } +} +``` + +گزینه `rewrites` همچنین پارامترهای مسیر پویایی را پشتیبانی می‌کند. در مثال بالا، اگر تعداد بسیاری از بسته‌ها داشته باشید، لیست کردن همه مسیرها به شکل زیر ممکن است طولانی باشد. با توجه به اینکه همه دارای ساختار فایل یکسان هستند، می‌توانید پیکربندی را به این صورت ساده‌تر کنید: + +```ts +export default { + rewrites: { + 'packages/:pkg/src/(.*)': ':pkg/index.md' + } +} +``` + +مسیرهای بازنویسی با استفاده از بسته `path-to-regexp` ترجمه می‌شوند - برای جزئیات بیشتر به [مستندات آن](https://github.com/pillarjs/path-to-regexp#parameters) مراجعه کنید. + +::: warning لینک‌های نسبی با بازنویسی + +زمانی که بازنویسی‌ها فعال باشند، **لینک‌های نسبی باید بر اساس مسیرهای بازنویسی باشند**. به عنوان مثال، برای ایجاد یک لینک نسبی از `packages/pkg-a/src/pkg-a-code.md` به `packages/pkg-b/src/pkg-b-code.md`، باید از مورد زیر استفاده کنید: + +```md +[لینک به PKG B](../pkg-b/pkg-b-code) +``` +::: + +## مسیرهای پویا + +می‌توانید صفحات زیادی را با استفاده از یک فایل Markdown و داده‌های پویا تولید کنید. به عنوان مثال، می‌توانید یک فایل `packages/[pkg].md` ایجاد کنید که برای هر بسته در یک پروژه، یک صفحه متناظر تولید می‌کند. در اینجا، بخش `[pkg]` یک پارامتر مسیر است که هر صفحه را از دیگران تمایز می‌دهد. + +### فایل بارگیری مسیرها + +از آنجایی که VitePress یک موتور سایت استاتیک است، مسیرهای ممکن باید در زمان ساخت تعیین شوند. بنابراین، یک صفحه مسیر پویا باید همراه با یک **فایل بارگیری مسیرها** همراه باشد. برای `packages/[pkg].md`، به `packages/[pkg].paths.js` (همچنین `.ts` پشتیبانی می‌شود) نیاز داریم: + +``` +. +└─ packages + ├─ [pkg].md # قالب مسیر + └─ [pkg].paths.js # فایل بارگیری + + مسیرها +``` + +فایل بارگیری باید یک شیء با یک متد `paths` به عنوان export پیش‌فرض ارائه دهد. متد `paths` باید آرایه‌ای از اشیاء با خصوصیت `params` را برگرداند. هر یک از این اشیاء یک صفحه متناظر را ایجاد می‌کنند. + +با توجه به آرایه `paths` زیر: + +```js +// packages/[pkg].paths.js +export default { + paths() { + return [ + { params: { pkg: 'foo' }}, + { params: { pkg: 'bar' }} + ] + } +} +``` + +صفحات HTML تولید شده به شرح زیر خواهد بود: + +``` +. +└─ packages + ├─ foo.html + └─ bar.html +``` + +### چندین پارامتر + +یک مسیر پویا می‌تواند شامل چندین پارامتر باشد: + +**ساختار فایل** + +``` +. +└─ packages + ├─ [pkg]-[version].md + └─ [pkg]-[version].paths.js +``` + +**بارگیری مسیرها** + +```js +export default { + paths: () => [ + { params: { pkg: 'foo', version: '1.0.0' }}, + { params: { pkg: 'foo', version: '2.0.0' }}, + { params: { pkg: 'bar', version: '1.0.0' }}, + { params: { pkg: 'bar', version: '2.0.0' }} + ] +} +``` + +**خروجی** + +``` +. +└─ packages + ├─ foo-1.0.0.html + ├─ foo-2.0.0.html + ├─ bar-1.0.0.html + └─ bar-2.0.0.html +``` + +### تولید پویای مسیرها + +ماژول بارگیری مسیر در Node.js اجرا می‌شود و تنها در زمان ساخت اجرا می‌شود. شما می‌توانید آرایه‌ی مسیرها را با استفاده از هر داده‌ای، سطحی یا از راه دور، به صورت پویا تولید کنید. + +تولید مسیرها از فایل‌های محلی: + +```js +import fs from 'fs' + +export default { + paths() { + return fs + .readdirSync('packages') + .map((pkg) => { + return { params: { pkg }} + }) + } +} +``` + +تولید مسیرها از داده‌های از راه دور: + +```js +export default { + async paths() { + const pkgs = await (await fetch('https://my-api.com/packages')).json() + + return pkgs.map((pkg) => { + return { + params: { + pkg: pkg.name, + version: pkg.version + } + } + }) + } +} +``` + +### دسترسی به پارامترها در صفحه + +شما می‌توانید از پارامترها برای انتقال داده‌های اضافی به هر صفحه استفاده کنید. فایل مسیر Markdown می‌تواند از پارامترهای صفحه کنونی در عبارات Vue با استفاده از خاصیت `$params` جهانی استفاده کند: + +```md +- نام بسته: {{ $params.pkg }} +- نسخه: {{ $params.version }} +``` + +همچنین می‌توانید به پارامترهای کنونی صفحه از طریق [`useData`](../reference/runtime-api#usedata) runtime API دسترسی داشته باشید. این در هر دو فایل Markdown و کامپوننت‌های Vue در دسترس است: + +```vue + +``` + +### نمایش محتوای خام + +پارامترهای ارسال شده به صفحه در بارگذاری JavaScript کلاینت سریال می‌شوند، بنابراین باید از ارسال داده‌های سنگین در پارامترها خودداری کنید، برای مثال محتوای خام Markdown یا HTML از یک CMS از راه دور. + +به جای اینکه می‌توانید محتوای چنین محتوایی را در هر صفحه با استفاده از خاصیت `content` روی هر شیء مسیر ارسال کنید: + +```js +export default { + async paths() { + const posts = await (await fetch('https://my-cms.com/blog-posts')).json() + + return posts.map((post) => { + return { + params: { id: post.id }, + content: post.content // Markdown یا HTML خام + } + }) + } +} +``` + +سپس، از دستورات ویژه‌ی زیر برای نمایش محتوا به عنوان بخشی از فایل Markdown استفاده کنید: + +```md + +``` \ No newline at end of file diff --git a/docs/fa/guide/what-is-vitepress.md b/docs/fa/guide/what-is-vitepress.md index a404c3ab..151dfd23 100644 --- a/docs/fa/guide/what-is-vitepress.md +++ b/docs/fa/guide/what-is-vitepress.md @@ -1,6 +1,6 @@ # ویت‌پرس چیست؟ -ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند. +ویت‌پرس یک [تولید کننده سایت استاتیک](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML استاتیک تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند.
@@ -30,15 +30,15 @@ - **[افزونه‌های داخلی Markdown:](./markdown)** استفاده از Frontmatter، جداول، syntax highlighting... هرچه که بخواهید. ویت‌پرس به ویژه ویژگی‌های پیشرفته زیادی برای کار با بلوک‌های کد فراهم می‌کند، که آن را برای مستندات فنی بسیار مناسب می‌کند. -- **[Markdown بهبود یافته با Vue:](./using-vue)** هر صفحه Markdown نیز یک [کامپوننت تک فایل Vue](https://vuejs.org/guide/scaling-up/sfc.html) است، به لطف سازگاری 100٪ نحوی قالب Vue با HTML. شما می‌توانید از ویژگی‌های قالب‌بندی Vue یا کامپوننت‌های وارد شده Vue برای ایجاد تعامل در محتوای ایستا خود استفاده کنید. +- **[Markdown بهبود یافته با Vue:](./using-vue)** هر صفحه Markdown نیز یک [کامپوننت تک فایل Vue](https://vuejs.org/guide/scaling-up/sfc.html) است، به لطف سازگاری 100٪ نحوی قالب Vue با HTML. شما می‌توانید از ویژگی‌های قالب‌بندی Vue یا کامپوننت‌های وارد شده Vue برای ایجاد تعامل در محتوای استاتیک خود استفاده کنید. ## عملکرد -بر خلاف بسیاری از SSG‌های سنتی که هر ناوبری منجر به بارگذاری کامل صفحه می‌شود، یک وب‌سایت تولید شده توسط ویت‌پرس در بازدید اولیه HTML ایستا را سرو می‌کند، اما برای ناوبری‌های بعدی در سایت به یک [برنامه تک صفحه‌ای](https://en.wikipedia.org/wiki/Single-page_application) (SPA) تبدیل می‌شود. به نظر ما، این مدل برای عملکرد بهترین تعادل را فراهم می‌کند: +بر خلاف بسیاری از SSG‌های سنتی که هر ناوبری منجر به بارگذاری کامل صفحه می‌شود، یک وب‌سایت تولید شده توسط ویت‌پرس در بازدید اولیه HTML استاتیک را سرو می‌کند، اما برای ناوبری‌های بعدی در سایت به یک [برنامه تک صفحه‌ای](https://en.wikipedia.org/wiki/Single-page_application) (SPA) تبدیل می‌شود. به نظر ما، این مدل برای عملکرد بهترین تعادل را فراهم می‌کند: - **بارگذاری اولیه سریع** - بازدید اولیه از هر صفحه، HTML پیش‌پردازش شده ایستا را برای سرعت بارگذاری سریع و بهینه‌سازی SEO سرو می‌کند. سپس صفحه یک بسته جاوااسکریپت را بارگذاری می‌کند که صفحه را به یک SPA Vue تبدیل می‌کند ("hydration"). بر خلاف فرضیات رایج که hydration برای SPA کند است، این فرآیند در واقع بسیار سریع است به لطف عملکرد خام Vue 3 و بهینه‌سازی‌های کامپایلر. در [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)، سایت‌های معمولی ویت‌پرس حتی در دستگاه‌های موبایل پایین‌رده با شبکه کند به امتیازهای عملکردی تقریباً کامل دست می‌یابند. + بازدید اولیه از هر صفحه، HTML پیش‌پردازش شده استاتیک را برای سرعت بارگذاری سریع و بهینه‌سازی SEO سرو می‌کند. سپس صفحه یک بسته جاوااسکریپت را بارگذاری می‌کند که صفحه را به یک SPA Vue تبدیل می‌کند ("hydration"). بر خلاف فرضیات رایج که hydration برای SPA کند است، این فرآیند در واقع بسیار سریع است به لطف عملکرد خام Vue 3 و بهینه‌سازی‌های کامپایلر. در [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F)، سایت‌های معمولی ویت‌پرس حتی در دستگاه‌های موبایل پایین‌رده با شبکه کند به امتیازهای عملکردی تقریباً کامل دست می‌یابند. - **ناوبری سریع پس از بارگذاری** @@ -46,7 +46,7 @@ - **تعامل بدون جریمه** - برای اینکه بتوانید بخش‌های پویا Vue جاسازی شده در داخل Markdown ایستا را hydrated کنید، هر صفحه Markdown به عنوان یک کامپوننت Vue پردازش و به جاوااسکریپت کامپایل می‌شود. این ممکن است غیر بهینه به نظر برسد، اما کامپایلر Vue به اندازه کافی هوشمند است که بخش‌های ایستا و پویا را جدا کند، هزینه hydration و اندازه محموله را به حداقل برساند. برای بارگذاری اولیه صفحه، بخش‌های ایستا به صورت خودکار از محموله جاوااسکریپت حذف می‌شوند و در حین hydration نادیده گرفته می‌شوند. + برای اینکه بتوانید بخش‌های پویا Vue جاسازی شده در داخل Markdown استاتیک را hydrated کنید، هر صفحه Markdown به عنوان یک کامپوننت Vue پردازش و به جاوااسکریپت کامپایل می‌شود. این ممکن است غیر بهینه به نظر برسد، اما کامپایلر Vue به اندازه کافی هوشمند است که بخش‌های استاتیک و پویا را جدا کند، هزینه hydration و اندازه محموله را به حداقل برساند. برای بارگذاری اولیه صفحه، بخش‌های استاتیک به صورت خودکار از محموله جاوااسکریپت حذف می‌شوند و در حین hydration نادیده گرفته می‌شوند. ## درباره VuePress چه؟