ドキュメントのガイドライン
ドキュメントのガイドライン
ヒント
このドキュメントの目的は、ドキュメント作成者がテーマが提供する機能をより良く活用し、読みやすさを向上させることを指導することです。
私たちのドキュメントは vuepress に基づいて構築されており、vuepress-theme-hope テーマが使用されています。詳細な説明については公式ドキュメントをご覧いただけます。ここでは一部の一般的な機能について紹介します。
コンテナ
Dockerのコンテナではありません
このテーマでは、ヒント、ノート、情報、注意、警告、詳細などのカスタムコンテナをサポートしており、これらの機能を利用して特定のコンテンツを強調することができます。
コンテナの使用方法:
::: [コンテナの種類] [コンテナのタイトル(オプション)]
書きたい内容
:::
受け入れられるコンテナの内容とデフォルトのタイトルは次のとおりです:
tip
ヒントnote
ノートinfo
情報warning
注意danger
警告details
詳細
コンテナの例
ヒント
これはヒントのコンテナです
注
これはノートのコンテナです
関連情報
これは情報のコンテナです
注意
これは注意のコンテナです
警告
これは警告のコンテナです
詳細
これは詳細のコンテナです
アイコン
このテーマではアイコンがサポートされており、次の場所でアイコンを使用できます:
ドキュメントのタイトル: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="/image/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
サイドバー内でのドキュメントの並び順