VuePress - Lingo.dev CLI

VuePressとは？

VuePressは、ドキュメントサイトを作成するためのVue駆動の静的サイトジェネレーターです。技術ドキュメントとVueコンポーネント統合に最適化されたテーマを提供します。

Lingo.dev CLIとは？

Lingo.devは、AI駆動の翻訳プラットフォームです。Lingo.dev CLIは、ソースファイルを読み取り、翻訳可能なコンテンツを大規模言語モデルに送信し、翻訳されたファイルをプロジェクトに書き戻します。

このガイドについて

このガイドでは、VuePressドキュメントサイトでLingo.dev CLIをセットアップする方法を説明します。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. CLIを設定する

プロジェクトのルートに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]は実行時に置き換えられるプレースホルダーです。これにより、コンテンツが1つの場所(例: docs/en/README.md)から読み取られ、別の場所(例: docs/es/README.md)に書き込まれることが保証されます。
Lingo.dev CLIは再帰的なglobパターン(例: **/*.md)をサポートしていません。ネストされたディレクトリ内に存在するファイルを翻訳するには、追加のincludeパターンを作成する必要があります。

詳細については、i18n.json設定を参照してください。

ステップ5. コンテンツを翻訳する

Lingo.devアカウントにサインアップします。
CLI経由でLingo.devにログインします。
```
npx lingo.dev@latest login
```
翻訳パイプラインを実行します。
```
npx lingo.dev@latest run
```
CLIは翻訳されたコンテンツを保存するための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 にアクセスします。言語を切り替えるためのドロップダウンが表示されます。