卡片
Quarto 原生區塊寫法
以 Quarto 原生區塊語法建立直向卡片,並保留一般連結標題。
Askr 卡片使用 Quarto 原生的 fenced div(圍欄式區塊)語法。卡片外框沒有點擊處理, 標題連結是卡片的主要導覽方式;若在本文加入其他連結,仍會使用各自的原生目的地。
若要在較寬螢幕並排呈現兩張卡片,請使用 .askr-grid。圖形頁的響應式群組範例說明斷點並展示一組卡片。
撰寫語法
請依照頁面章節結構選擇標題層級。.unlisted 會讓這個實際標題不列入頁面目錄; 標題連結仍保有原生連結行為。
:::: {.askr-card}
::: {.askr-card-body}
### [標題](target.qmd) {.askr-card-title .unlisted}
簡短的補充段落。
:::
::::外層 .askr-card 呈現卡片外框,.askr-card-body 群組卡片內容, .askr-card-title 則設定作者選定的標題樣式。此寫法不使用 JavaScript, 也不會讓整張卡片都成為連結。
展示範例
以下兩張卡片連至既有的使用指南。較長的繁體中文標題可用來檢視中日韓文字在卡片內的換行情形。
安裝 Askr
在 Quarto 專案安裝 Askr,並設定所需的網站選項。
用 Areas、頁面清單與 Sections 整理網站導覽
了解導覽區域、頁面清單與目前頁面的章節如何搭配運作。
遷移既有課程卡片
Askr v0.12.0 新增卡片元件。請在使用中的 Quarto 專案安裝目前版本:
quarto add arfiligol/askr@v0.14.0 --no-prompt只替換下列舊卡片類別,保留標題文字、標題層級、連結目的地與說明內容; 同時移除 Bootstrap 通用的 card 與 card-body 類別。
| 既有類別 | Askr 卡片類別 |
|---|---|
.card.course-card |
.askr-card |
.card-body |
.askr-card-body |
.course-card-title |
.askr-card-title |
更新標記後,只移除本機針對舊課程卡片類別的 CSS 規則,保留其他專案樣式。 新撰寫的卡片則使用上方 fenced div 語法。