VuePress - Lingo.dev CLI

ما هو VuePress؟

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

ما هي واجهة سطر أوامر Lingo.dev؟

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

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

يشرح هذا الدليل كيفية إعداد واجهة سطر أوامر Lingo.dev في موقع توثيق 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
---

## البدء

تتم ترجمة هذا التوثيق تلقائيًا بواسطة Lingo.dev.

## الميزات

يتضمن منتجنا قدرات قوية للتطوير الحديث.

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

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

كحل بديل، نوصي بما يلي:

تخزين ملفات المحتوى المصدرية في دليل اللغة (مثل 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.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "markdown": {
      "include": ["docs/[locale]/*.md", "docs/[locale]/*/*.md"]
    }
  }
}

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

الملفات التي يجب على واجهة سطر أوامر Lingo.dev ترجمتها
اللغات المراد الترجمة بينها

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

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

[locale] هو عنصر نائب يتم استبداله في وقت التشغيل. يضمن ذلك قراءة المحتوى من موقع واحد (مثل docs/en/README.md) وكتابته إلى موقع مختلف (مثل docs/es/README.md).
لا تدعم واجهة سطر أوامر Lingo.dev أنماط 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. يجب أن ترى قائمة منسدلة للتبديل بين اللغات.