Files
MaaAssistantArknights/docs/ja-jp/develop/documentation-guidelines.md
Rbqwow ca3160bd72 docs: 更新网页开发相关文档 (#14167)
* docs: vuepress-theme-hope --> vuepress-theme-plume

* docs: website --> docs

* chore: 添加 preview 图片

* feat: 添加回图片相关插件

* perf: logo 超级压缩

* perf: preview 也超级压缩

* docs: 找 GPT-5 Thinking 翻译了一下日语的本地部署

* chore: 预览图还是得走一下网页镜像

* i18n: JP

* docs: 修复损坏的超链接

* chore: Auto update by pre-commit hooks [skip changelog]

* chore: 这东西是怎么混进来的

---------

Co-authored-by: Manicsteiner <Manicsteiner@outlook.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2025-09-23 17:49:19 +08:00

4.9 KiB
Raw Blame History

order, icon
order icon
6 jam:write-f

ドキュメントのガイドライン

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

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

ローカルデプロイ

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

コンテナ

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

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

コンテナの使用方法:

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

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

  • tip ヒント
  • note ノート
  • info 情報
  • warning 注意
  • danger 警告
  • details 詳細

コンテナの例

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

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

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

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

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

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

アイコン

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

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

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

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

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

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

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

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

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

:::

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

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

  • icon アイコンのキーワードや URL を受け入れます。例: jam:write-fic:round-home など
  • color CSSスタイルのカラー値を受け入れます。例: #fffred などこのオプションはSVGアイコンにのみ有効です
  • size CSSスタイルのサイズを受け入れます。例: 1rem2em100px など

::: details 例

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

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

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

Frontmatter

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

::: details サンプル

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

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

...

:::

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

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