4.4 KiB
order, icon
| order | icon |
|---|---|
| 6 | jam:write-f |
ドキュメントのガイドライン
::: tip このドキュメントの目的は、ドキュメント作成者がテーマが提供する機能をより良く活用し、読みやすさを向上させることを指導することです。 :::
私たちのドキュメントは vuepress に基づいて構築されており、vuepress-theme-hope テーマが使用されています。詳細な説明については公式ドキュメントをご覧いただけます。ここでは一部の一般的な機能について紹介します。
コンテナ
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-f、ic:round-homeなどcolorCSSスタイルのカラー値を受け入れます。例:#fff、redなど（このオプションはSVGアイコンにのみ有効です）sizeCSSスタイルのサイズを受け入れます。例:1rem、2em、100pxなど
::: details 例
<HopeIcon icon="ic:round-home" color="#1f1e33"/>
アイコンキーワードの取得
このドキュメントで使用されているアイコンは iconify から取得されており、お好みのアイコンを検索するには、提供されている アイコン検索画面 で検索し、そのキーワードをコピーしてください。
Frontmatter
Frontmatter は Markdown ドキュメントの先頭に --- で囲まれたセクションであり、内部では YAML 構文が使用されます。Frontmatter を使用することで、文書の編集日時、使用されるアイコン、カテゴリ、タグなどを識別することができます。
::: details サンプル
---
date: 1919-08-10
icon: jam:write-f
order: 1
---
# ドキュメントのタイトル
...
:::
各フィールドの意味は次のとおりです：
dateドキュメントの編集日時iconドキュメントのタイトルの隣のアイコンorderサイドバー内でのドキュメントの並び順