關於千度
社區維護指南
短代碼
Cards

卡片

範例

Callout
Image CardImage Card
Qiandu Cards
Local ImageLocal Image
Qiandu Cards
Local ImageLocal Image
Qiandu Cards

使用 

{{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="/" title="No Icon" >}}
{{< /cards >}}
{{< cards >}}
  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

卡片參數

ParameterDescription
linkURL（內部或外部）
title卡片的標題
subtitle字幕標題（支援 Markdown）
icon圖示的名稱

Image Card

此外，該卡還支援透過以下參數添加圖像和處理：

ParameterDescription
image指定卡片的圖像 URL.
method設定 Hugo 的影像處理方法。
options設定 Hugo 的影像處理選項。

卡片支援三種圖像：

  1. 遠端圖片：完整網址應放置在 image 參數中
  2. 靜態圖片：使用 Hugo 的 static/ 目錄中的相對路徑
  3. 處理過的圖片：使用 Hugo 的 assets/ 目錄中的相對路徑

Hextra 在建置過程中會自動偵測圖片是否需要處理，並根據需要套用 options 參數或預設設定（縮放，800x，品質 80，WebP 格式）。

它目前支援以下處理方法：Resize（縮放）、Fit（適應）、Fill（填充）和 Crop（裁剪）。

有關 Hugo 內建圖像處理命令、方法和選項的更多信息，請參閱他們的 Image Processing Documentation.

步驟