VuePress - Lingo.dev CLI

ما هو VuePress؟

VuePress هو مولد مواقع ثابتة مدعوم بـ Vue لإنشاء مواقع التوثيق. يوفر سمة محسّنة للتوثيق التقني وتكامل مكونات Vue.

ما هو Lingo.dev CLI؟

Lingo.dev هي منصة ترجمة مدعومة بالذكاء الاصطناعي. يقرأ Lingo.dev CLI الملفات المصدرية، ويرسل المحتوى القابل للترجمة إلى نماذج اللغة الكبيرة، ويكتب الملفات المترجمة مرة أخرى إلى مشروعك.

حول هذا الدليل

يشرح هذا الدليل كيفية إعداد Lingo.dev CLI في موقع توثيق VuePress. ستتعلم كيفية إنشاء مشروع باستخدام VuePress، وتكوين خط أنابيب الترجمة، وعرض النتائج.

الخطوة 1. إعداد مشروع VuePress

إنشاء مشروع VuePress جديد:
```
npm create vuepress@latest my-docs
```
الانتقال إلى دليل المشروع:
```
cd my-docs
```
تثبيت التبعيات:
```
npm install
```

الخطوة 2. إنشاء المحتوى المصدري

إنشاء دليل لتخزين التوثيق باللغة المصدرية:
```
mkdir docs/en
```

إنشاء ملف يحتوي على بعض محتوى التوثيق (مثل docs/en/README.md):

---
home: true
title: Home
heroText: VuePress Documentation
tagline: Documentation powered by VuePress
---

## Getting started

This documentation is automatically translated by Lingo.dev.

## Features

Our product includes powerful capabilities for modern development.

الخطوة 3. إعداد الروابط الرمزية

يتوقع VuePress محتوى اللغة المصدرية في دليل docs الجذر، مع محتوى اللغة الهدف في الأدلة الفرعية، لكن Lingo.dev CLI لا يدعم هذا المزيج.

كحل بديل، نوصي بـ:

تخزين ملفات المحتوى المصدري في دليل اللغة (مثل docs/en/)
إنشاء روابط رمزية بحيث تظهر الملفات أيضًا في دليل docs الجذر

لتبسيط هذه العملية:

أنشئ سكريبت لإنشاء الروابط الرمزية (مثل scripts/symlinks.sh):
```
for file in docs/en/*; do ln -sf "en/$(basename "$file")" "docs/$(basename "$file")"; done
```
اجعل السكريبت قابلاً للتنفيذ:
```
chmod +x scripts/symlinks.sh
```
شغّل السكريبت:
```
./scripts/symlinks.sh
```

ستحتاج إلى إعادة تشغيل السكريبت في أي وقت تضيف فيه ملفات إلى دليل docs/en/.

الخطوة 4. تكوين واجهة سطر الأوامر

في جذر المشروع، أنشئ ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "markdown": {
      "include": ["docs/[locale]/*.md", "docs/[locale]/*/*.md"]
    }
  }
}

يحدد هذا الملف:

الملفات التي يجب على Lingo.dev CLI ترجمتها
اللغات المراد الترجمة بينها

في هذه الحالة، يترجم التكوين ملفات Markdown من الإنجليزية إلى الإسبانية.

من المهم ملاحظة أن:

[locale] هو عنصر نائب يتم استبداله في وقت التشغيل. يضمن قراءة المحتوى من موقع واحد (مثل docs/en/README.md) وكتابته إلى موقع مختلف (مثل docs/es/README.md).
لا يدعم Lingo.dev CLI أنماط glob العودية (مثل **/*.md). ستحتاج إلى إنشاء أنماط include إضافية لترجمة الملفات الموجودة داخل أدلة متداخلة.

لمعرفة المزيد، راجع تكوين i18n.json.

الخطوة 5. ترجمة المحتوى

سجّل للحصول على حساب Lingo.dev.
سجّل الدخول إلى Lingo.dev عبر واجهة سطر الأوامر:
```
npx lingo.dev@latest login
```
شغّل خط أنابيب الترجمة:
```
npx lingo.dev@latest run
```
ستنشئ واجهة سطر الأوامر دليل docs/es/ لتخزين المحتوى المترجم وملف i18n.lock لتتبع ما تمت ترجمته (لمنع إعادة الترجمة غير الضرورية).

الخطوة 6. استخدام الترجمات

في ملف docs/.vuepress/config.js:

أضف خاصية locales إلى إعدادات السمة:

theme: defaultTheme({
  locales: {
    "/": {
      selectLanguageName: "English",
    },
    "/es/": {
      selectLanguageName: "Español",
    },
  },
}),

أضف خاصية locales على المستوى الجذري لتحديد إعدادات اللغة لكل لغة محلية:

{
  locales: {
    "/": {
      lang: "en",
      title: "VuePress",
    },
    "/es/": {
      lang: "es",
      title: "VuePress",
    },
  },
}

ابدأ خادم التطوير:
```
npm run docs:dev
```
انتقل إلى http://localhost:8080. يجب أن ترى قائمة منسدلة للتبديل بين اللغات.