Basic Usage - ootomonaiso/docusaurus_edit GitHub Wiki

基本的な使い方

Docusaurus Editorの基本的な使用方法について説明します。

初回起動

  1. VS Code を開く
  2. Docusaurus プロジェクトのフォルダを開く
  3. サイドバーの「Docusaurus Editor」アイコンをクリック
  4. ツリービューが表示され、ドキュメント構造が確認できます

ワークスペースの要件

Docusaurus Editor が正常に動作するためには、以下の条件が必要です：

  • docs フォルダ: プロジェクトルートに docs/ フォルダが存在する
  • Markdownファイル: .md または .mdx 拡張子のファイル
  • Frontmatter: 適切なYAMLフロントマターが設定されている

ドキュメント構造の確認

TreeView での確認

  • 左サイドバーの「Docusaurus Editor」パネルを開く
  • フォルダとファイルの階層構造が表示される
  • sidebar_position に基づいた順序で表示される

ファイル情報の表示

各ファイルには以下の情報が表示されます：

  • ファイル名
  • sidebar_position の値
  • ファイルサイズ
  • 最終更新日時

新規ドキュメント作成

基本的な手順

  1. TreeView でフォルダを右クリック
  2. 「New Document」を選択
  3. ファイル名を入力
  4. テンプレートを選択（オプション）

利用可能なテンプレート

  • 基本テンプレート: 標準的なMarkdownドキュメント
  • API ドキュメント: API仕様書用テンプレート
  • チュートリアル: 手順説明用テンプレート
  • 概念説明: 概念・理論説明用テンプレート

Frontmatter の自動設定

新規作成時に以下が自動で設定されます：

---
title: ファイル名から自動生成
sidebar_position: 適切な位置
description: デフォルトの説明
---

ドキュメントの編集

ファイルを開く

  • TreeView でファイルをクリック
  • 標準のVS Code エディタで開かれる
  • Markdownプレビューも利用可能

Frontmatter の編集

---
title: ドキュメントのタイトル
sidebar_position: 表示順序（数値）
description: SEO用の説明文
tags: [タグ1, タグ2]
---

コンテンツの編集

  • 標準的なMarkdown記法を使用
  • Docusaurus の拡張記法（Admonitions など）も利用可能
  • リアルタイムプレビューでの確認が可能

位置の変更（ドラッグ&ドロップ）

ファイルの移動

  1. TreeView でファイルを選択
  2. 移動先にドラッグ&ドロップ
  3. sidebar_position が自動で更新される

フォルダの移動

  1. フォルダ全体をドラッグ&ドロップ可能
  2. _category_.json が自動で作成・更新される
  3. 子ドキュメントの位置も自動調整

位置更新の仕組み

  • 移動先の既存ファイルの位置を分析
  • 適切な sidebar_position 値を計算
  • Frontmatter を自動更新
  • _category_.json ファイルも必要に応じて更新

ファイル管理

削除

  • TreeView でファイルを右クリック
  • 「Delete」を選択
  • 確認ダイアログで削除を確定

名前変更

  • TreeView でファイルを右クリック
  • 「Rename」を選択
  • 新しい名前を入力

コピー・移動

  • 標準のVS Code ファイル操作と連携
  • TreeView での変更も即座に反映

プレビュー機能

Markdownプレビュー

  • ファイルを開いて Ctrl+Shift+V でプレビュー
  • Docusaurus スタイルでの表示
  • リアルタイム更新

Admonitions のプレビュー

:::note
これは注意書きです
:::

:::tip
これはTipです
:::

:::warning
これは警告です
:::

次のステップ

基本的な使い方を習得したら、以下の高度な機能も活用してください：