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가 번역해야 하는 파일
번역할 언어

이 경우 구성은 마크다운 파일을 영어에서 스페인어로 번역합니다.

다음 사항에 유의해야 합니다:

[locale]는 런타임에 대체되는 플레이스홀더입니다. 이를 통해 콘텐츠를 한 위치(예: 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으로 이동합니다. 언어 전환을 위한 드롭다운이 표시됩니다.