カード

カードコンポーネント

例

コールアウトタグ付きカード

assetsディレクトリ下の画像、Hugoで処理済み。

使用方法

{{< cards >}}
  {{< card link="../callout" title="コールアウト" icon="warning" >}}
  {{< card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" >}}
  {{< card link="/" title="アイコンなし" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" >}}
  {{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
  {{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

カードパラメータ

パラメータ	説明
`link`	URL（内部または外部）。
`title`	カードのタイトル見出し。
`subtitle`	サブタイトル見出し（Markdown対応）。
`icon`	アイコンの名前。
`tag`	タグ内のテキスト。
`tagColor`	タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。

画像カード

さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:

パラメータ	説明
`image`	カードの画像URLを指定します。
`method`	Hugoの画像処理メソッドを設定します。
`options`	Hugoの画像処理オプションを設定します。

カードは3種類の画像をサポートします:

リモート画像: imageパラメータに完全なURLを指定。
静的画像: Hugoのstatic/ディレクトリ内の相対パスを使用。
処理済み画像: Hugoのassets/ディレクトリ内の相対パスを使用。

Hextraはビルド時に画像処理が必要かどうかを自動検出し、optionsパラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。現在サポートされているmethodはResize、Fit、Fill、Cropです。

Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、画像処理ドキュメントを参照してください。

{{< cards >}}
  {{< card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" >}}
  {{< card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" >}}
  {{< card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" >}}
  {{< card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" >}}
{{< /cards >}}

列

cardsショートコードにcolsパラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。

上部カード下部カード

左カード右カード

{{< cards cols="1" >}}
  {{< card link="/" title="上部カード" >}}
  {{< card link="/" title="下部カード" >}}
{{< /cards >}}

{{< cards cols="2" >}}
  {{< card link="/" title="左カード" >}}
  {{< card link="/" title="右カード" >}}
{{< /cards >}}

最終更新日 12月 31, 2024

アイコンコールアウト