ヒント

このドキュメントの目的は、ドキュメント作成者がテーマが提供する機能をより良く活用し、読みやすさを向上させることを指導することです。

私たちのドキュメントは vuepress に基づいて構築されており、vuepress-theme-plume テーマが使用されています。詳細な説明については公式ドキュメントをご覧いただけます。ここでは一部の一般的な機能について紹介します。

ローカルデプロイ

1. pnpm をインストールし、Pull Request ワークフローの概要を参照してリポジトリをローカルにクローンします。
2. docs ディレクトリでターミナルを開き、pnpm i を実行して依存関係をインストールします。
3. pnpm run dev を実行してデプロイします。

コンテナ

Dockerのコンテナではありません

このテーマでは、ヒント、ノート、情報、注意、警告、詳細などのカスタムコンテナをサポートしており、これらの機能を利用して特定のコンテンツを強調することができます。

コンテナ内にコンテナをネストする場合、親コンテナは子コンテナよりもコロン : を1つ多く記述する必要があります。

コンテナの使用方法：

::: [コンテナの種類] [コンテナのタイトル（オプション）]
書きたい内容
:::

または GitHub スタイルの構文を使用する方法：

> [!コンテナの種類]
> 書きたい内容

受け入れられるコンテナの内容とデフォルトのタイトルは次のとおりです：

• tip ヒント
• note ノート
• info 情報
• warning 注意
• danger 警告
• details 詳細
• window 特殊なコンテナ

コンテナの例

ヒント

これはヒントのコンテナです

注

これはノートのコンテナです

関連情報

これは情報のコンテナです

注意

これは注意のコンテナです

警告

これは警告のコンテナです

詳細

これは詳細のコンテナです

これは特殊なコンテナです

マーカー

マーカー構文を使用して、強調したい内容にマークを付けることができます。

使用方法：==マーカーの内容=={マーカーの色（オプション）} の構文でマークを付けます。両端にスペースが必要な点に注意してください。

入力：

MaaAssistantArknights は ==たくさんの豚== によって開発されました

出力：

MaaAssistantArknights は たくさんの豚 によって開発されました

テーマには以下のカラースキームが組み込まれています：

• default: ==Default== - Default
• info: ==Info=={.info} - Info
• note: ==Note=={.note} - Note
• tip: ==Tip=={.tip} - Tip
• warning: ==Warning=={.warning} - Warning
• danger: ==Danger=={.danger} - Danger
• caution: ==Caution=={.caution} - Caution
• important: ==Important=={.important} - Important

隠しテキスト

何らかの理由でドキュメントの一部を一時的に隠す必要がある場合、隠しテキスト機能を使用できます。

!!隠したい内容!!{設定（オプション）} の構文で使用でき、デフォルトの効果は以下の通りです：

なんかニコニコ大百科（仮）を読んでる気がする（取り消し線

以下の設定が使用できます：

入力：

+ マスクエフェクト + マウスホバー：!!マウスホバーで見えます!!{.mask .hover}
+ マスクエフェクト + クリック：!!クリックで見えます!!{.mask .click}
+ テキストぼかしエフェクト + マウスホバー：!!マウスホバーで見えます!!{.blur .hover}
+ テキストぼかしエフェクト + クリック：!!クリックで見えます!!{.blur .click}

出力：

• マスクエフェクト + マウスホバー：マウスホバーで見えます
• マスクエフェクト + クリック：クリックで見えます
• テキストぼかしエフェクト + マウスホバー：マウスホバーで見えます
• テキストぼかしエフェクト + クリック：クリックで見えます

ステップ

ステップバイステップのチュートリアルを書くとき、番号付きリストはネストによって階層感を失うことがあります。そのような場合、steps コンテナが最善の選択です。

入力：

:::: steps
1. ステップ 1

   ```ts
   console.log('Hello World!')
   ```

2. ステップ 2

   ステップ 2 の関連内容はこちら

3. ステップ 3

   ::: tip
   ヒントコンテナ
   :::

4. 終わり
::::

出力：

1. ステップ 1

   console.log('Hello World!')

2. ステップ 2

   ステップ 2 の関連内容はこちら

3. ステップ 3

   ヒント

   ヒントコンテナ

4. 終わり

スマート画像コンテナ

テーマが提供する機能をベースに画像コンテナをラッパーしました。このコンテナはライト/ダークテーマに応じて対応する画像を自動的に表示し、自動レイアウトをサポートします。

Markdown 本文で <ImageGrid> コンポーネントを使用してこのメソッドを呼び出すことができます。具体的な構文と効果は以下の通りです：

構文：

<ImageGrid :imageList="[
  {
    light: 'images/zh-cn/readme/1-light.png',
    dark: 'images/zh-cn/readme/1-dark.png'
  },
  {
    light: 'images/zh-cn/readme/2-light.png',
    dark: 'images/zh-cn/readme/2-dark.png'
  },
  {
    light: 'images/zh-cn/readme/3-light.png',
    dark: 'images/zh-cn/readme/3-dark.png'
  },
  {
    light: 'images/zh-cn/readme/4-light.png',
    dark: 'images/zh-cn/readme/4-dark.png'
  }
]" />

レンダリング結果：

フィールドコンテナ

この構文はやや複雑なため、公式ドキュメントを参照して使用してください。

効果は以下の通りです：

themeRequiredThemeConfig

{ base: '/' }

テーマ設定

enabledOptionalboolean

true

有効かどうか

callbackOptional(...args: any[]) => void

() => {}

v1.0.0 追加

コールバック関数

otherDeprecatedstring

v0.9.0 廃止

廃止されたプロパティ

アイコン

このテーマではアイコンがサポートされており、次の場所でアイコンを使用できます:

• ドキュメントのタイトル：frontmatter でドキュメントのタイトルの隣にアイコンを設定する

• ナビゲーションバー/サイドバー：ナビゲーションバーとサイドバーに表示されるアイコンを設定する

• ドキュメントのコンテンツ：ドキュメント内でアイコンを使用する

ドキュメントのアイコンを設定する

ドキュメントの frontmatter で、icon を使用してドキュメントのアイコンを設定できます。

このアイコンはドキュメントのタイトルの隣に表示されます。

このドキュメントの frontmatter 設定

---
icon: jam:write-f
---

ドキュメント内でアイコンを使用する

Markdown 内で <HopeIcon /> コンポーネントを使用してアイコンを追加できます。このコンポーネントには以下の属性があります：

• icon アイコンのキーワードや URL を受け入れます。例: jam:write-f、ic:round-home など
• color CSSスタイルのカラー値を受け入れます。例: #fff、red など（このオプションはSVGアイコンにのみ有効です）
• size CSSスタイルのサイズを受け入れます。例: 1rem、2em、100px など

例

<HopeIcon icon="ic:round-home" color="#1f1e33"/>

<HopeIcon icon="/images/maa-logo_512x512.png" size="4rem" />

アイコンキーワードの取得

このドキュメントで使用されているアイコンは iconify から取得されており、お好みのアイコンを検索するには、提供されている アイコン検索画面 で検索し、そのキーワードをコピーしてください。

Frontmatter

Frontmatter は Markdown ドキュメントの先頭に --- で囲まれたセクションであり、内部では YAML 構文が使用されます。Frontmatter を使用することで、文書の編集日時、使用されるアイコン、カテゴリ、タグなどを識別することができます。

サンプル

---
date: 1919-08-10
icon: jam:write-f
order: 1
---

# ドキュメントのタイトル

...

各フィールドの意味は次のとおりです：

• date ドキュメントの編集日時
• icon ドキュメントのタイトルの隣のアイコン
• order サイドバー内でのドキュメントの並び順

このページを編集