Libxをはじめよう
このガイドではLibxでドキュメントを管理するための方法を学びます。
Libxとは
Libxはlibx.devを構築するために作成された、ドキュメントサイトを作成・管理するための静的サイトジェネレーターです。複数のAstroプロジェクトをpnpmで管理することにより、大規模かつ多言語に対応したドキュメントサイトを構築できるように設計されています。
リポジトリについて
Libxは libx-dev, libx-core, libx-docs の3つのリポジトリで構成されています。
- libx-dev: libx.dev の開発の中心となるリポジトリ
- libx-core: libx-dev からコア機能を抽出したリポジトリ（MITライセンス）
- libx-docs: libx-dev にドキュメントを提供するためのリポジトリ
セットアップ
libx-coreを使うことで独自のドキュメントサイトを作成することができます。
必要なツール
まず、Node.jsの公式サイトから安定版をダウンロードして、インストールしてください。
次に、以下のコマンドを実行してpnpmをインストールしてください。
npm install -g pnpmクローンと依存関係
リポジトリをクローンし、依存関係をインストールしてください。
git clone https://github.com/libx-dev/libx-core.git
cd libx-core
pnpm installディレクトリ構成
ディレクトリ構成は以下のような形になっているはずです。
libx-core/
├── apps/
│ ├── top-page/
│ └── project-template/
├── packages/
├── config/
└── scripts/ファイルパスと番号プレフィックス
Libxでは、カテゴリディレクトリとドキュメントファイルに番号プレフィックス（01-, 02-など）を付けます。この数字をもとにサイドバーの順序を決定します。
ディレクトリ構造の例:
apps/my-docs/src/content/docs/v1/ja/
├── 01-guide/ # ガイドカテゴリ（1番目）
│ ├── 01-getting-started.mdx # 最初のページ
│ ├── 02-setup-and-structure.mdx
│ └── 03-create-and-edit-docs.mdx
└── 02-reference/ # リファレンスカテゴリ（2番目）
├── 01-cli.mdx
└── 02-configuration.mdx新しいプロジェクトを作成する
新しいドキュメントプロジェクトを作成するには、次のようにスクリプトを使用します。
node scripts/create-project.js <project-name> <display-name-en> <display-name-ja> [options]引数:
<project-name>: プロジェクト識別子（例:my-docs）<display-name-en>: 英語表示名（例:My Documentation）<display-name-ja>: 日本語表示名（例:私のドキュメント）
オプション:
--description-en=<text>: 英語説明文--description-ja=<text>: 日本語説明文--icon=<name>: アイコン名（デフォルト: file-text）--tags=<tag1,tag2>: カンマ区切りタグ（デフォルト: documentation）--skip-test: 動作確認テストをスキップ
例:
node scripts/create-project.js my-docs "My Documentation" "私のドキュメント"
node scripts/create-project.js api-docs "API Docs" "API文書" --icon=code --tags=api,referenceバージョンを追加する
プロジェクトに新しいバージョンを追加するには、次のようにスクリプトを使用します。
node scripts/create-version.js <project-name> <version> [options]引数:
<project-name>: 既存のプロジェクト名（例:my-docs）<version>: 新しいバージョン（例:v3,v2.1）
オプション:
--interactive: インタラクティブモードで実行--no-copy: 前バージョンからコンテンツをコピーしない--help: ヘルプを表示
例:
node scripts/create-version.js my-docs v3
node scripts/create-version.js my-docs v2.1 --no-copy言語を追加する
プロジェクトに新しい言語を追加するには、次のようにスクリプトを使用します。
node scripts/add-language.js <project-name> <language-code> [display-name] [description] [options]引数:
<project-name>: 既存のプロジェクト名（例:my-docs）<language-code>: 追加する言語コード（例:ko）[display-name]: 言語表示名（省略時は自動設定）[description]: 言語説明文（省略時は自動生成）
オプション:
--template-lang=<code>: コピー元言語（デフォルト: en）--auto-template: 対話なしでテンプレート生成--skip-test: ビルドテストをスキップ--interactive: 対話モードで実行
サポートされている言語:
en, ja, zh-Hans, zh-Hant, es, pt-BR, ko, de, fr, ru, ar, id, tr, hi, vi
例:
node scripts/add-language.js sample-docs ko
node scripts/add-language.js my-docs zh-Hans "简体中文" "简体中文文档"ドキュメントを追加する
プロジェクトに新しいドキュメントページを作成するには、次のようにスクリプトを使用します。
node scripts/create-document.js <project-name> <lang> <version> [category] [title] [options]引数:
<project-name>: 既存のプロジェクト名（例:my-docs）<lang>: 言語コード（例:ja）<version>: バージョン（例:v1）[category]: カテゴリ名（省略可）[title]: ドキュメントタイトル（省略可）
オプション:
--interactive: インタラクティブモードで実行--help: ヘルプを表示
例:
node scripts/create-document.js my-docs ja v1 --interactive
node scripts/create-document.js my-docs ja v1 guide "セットアップ方法"ドキュメントの基本的な書き方
ドキュメントの拡張子は.mdxで、MDX形式で書かれます。
Markdownの基本に加えて、コンポーネントを埋め込むこともできます。
# 見出し1
本文のテキストです。**太字**や*斜体*、`インラインコード`も使用できます。
## 見出し2
### 見出し3
- リスト項目1
- リスト項目2
- ネストしたリスト
- ネストしたリスト
1. 番号付きリスト1
2. 番号付きリスト2
> 引用文です。
> 複数行にわたる引用も可能です。
[リンクテキスト](https://example.com)
コードブロック:
\```bash
npm install
\```フロントマター
ドキュメントの冒頭には --- で囲まれたフロントマターを記述します。
---
title: "ページのタイトル"
description: "検索結果やカードに使われる説明"
---リンクの書き方
ドキュメント内のリンクは、相対パスまたは絶対パスで指定できます。
- 相対パス: 同じ言語・バージョン内でのリンクに使用
- 絶対パス: 他の言語・バージョンへのリンクに使用
リンクのURLは、次の形式で指定します。
./<document> (同じ言語・バージョン内)
/<version>/<language>/<category>/<document> (他の言語・バージョン)例:
- 同じ言語・バージョン内のリンク:
./01-getting-started - 他の言語・バージョンへのリンク:
/v1/en/01-guide/01-getting-started
Astroコンポーネントを使う
LibxのドキュメントはAstroコンポーネントを使うことができます。
@docs/ui からインポートし、Icon / Alert / Tabsなどを使用できます。
import { Icon, Alert } from '@docs/ui';
<Alert type="info">
<Icon name="info" /> AstroコンポーネントはMDXファイルでも使用できます。
</Alert>次のステップ
次は「ディレクトリ構造と設定」へ進み、プロジェクトの全体像とベースパスの扱いを確認しましょう。