CSS 來自 @稻米鼠，博客：https://zji.me/3544f76e-7c66-4216-9ba9-32309f86e566.html
這是一個 Obsidian 的卡片堆視圖，利用 CSS 將特定的 Callout 語法渲染成卡片堆樣式，適用於一些並列的內容，具體使用場景大家自行挖掘吧。
效果展示#
卡片收起時效果展示：
卡片點擊展開後效果展示：
配置#
只需將一個 CSS 代碼文件放到代碼段文件夾內即可：
- 新建文件
Cards-Show.css，複製文末代碼放入文件內保存 - 將文件
Cards-Show.css放到 CSS 代碼段文件夾內。具體路徑：Obsidian- 設置 - 外觀 -CSS 代碼片段 - 點擊右側文件夾 icon 打開代碼段文件夾 - 回到 CSS 代碼片段設置頁面，刷新，開啟剛才添加的
Cards-Show - 在 Obsidian 文件內輸入指定的 Callout 語法，即可顯示為卡片堆視圖，具體見下文的「使用示例」
使用示例#
使用方式和自帶的 Callout 語法一致，不算太污染原文。支持 Markdown 常見的加粗、超鏈接等標記。 以下是上圖的示例：
> [!cards-show]- **【2024-4 日誌】這是標題，會顯示在第一張卡片上，點擊可展開卡片堆**
>
> 1. **擺清自己的位置**，說該說的話，做該做的事，不要瞎操心。太多的老人就是擺不清位置，什麼都要管一下，代際衝突由此產生。
>
> 2. **之前借的錢，會成為下一次借錢的籌碼**。所以，不要輕易借錢，需要警惕小額借錢的人，因為他有可能在積累你對他的信任，然後借一次大的不再還你。
>
> 3. 如果一時還無法財務自由，那就先精神自由吧。
>
> 4. 一個團隊很重要的是，知道**在做什麼**，以及要**到哪裡去**。
>
> 5. 關於買房和租房，租房最大的顧慮是年老後的不安全感，但為了這四五十年後的不確定性，我們需要投入最好的二三十年人生，這值得嗎？
>
> 6. 我發現，一些人很喜歡說他人「磨蹭」，尤其是親近的人，這就是**典型的 judge 他人**，用自己的標準要求別人，不符合自己要求時就說「磨蹭」。常見例子是，催洗澡。
>
> 7. 保健院有許多孩子在按摩，據說都是因為這因為那的問題，一個思考：既然所謂的問題很普遍，那豈不是就不是問題了。當然，並不知道按摩的孩子佔比如何，所以也僅僅是思考而已。
>
> 8. 張愛玲的《秧歌》中，巧妙地把自己的**觀察以及預測**，投射到農村的一起群體事件中去，如果把她當做簡單的言情小說作者，那就太看低她了。她的洞察力和文筆，不容置疑。
文件 Cards-Show.css 代碼如下：
/**
* 卡片視圖
* @author: 稻米鼠
* @description: 用於顯示卡片的 callout 視圖
* @created: 2024-05-04
* @updated: 2024-05-04
* @version: 0.0.1
*/
.callout[data-callout="cards-show"] {
--callout-color: 255, 233, 160; /** 主色調但不影響背景色 */
--callout-icon: panel-top-open; /** 圖標，但默認不顯示 */
--callout-width: 25% - 1rem; /** 卡片寬度，默認為 25%，-1rem 用作間距 */
--callout-height: 12rem; /** 卡片高度 */
background: rgba(0, 0, 0, 0.03);
container-type: inline-size;
container-name: cards-show;
}
@container cards-show (max-width: 768px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 33% - 1rem;
}
}
@container cards-show (max-width: 600px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 50% - 1rem;
}
}
@container cards-show (max-width: 480px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 100%;
}
}
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
position: relative;
display: block;
box-sizing: border-box;
width: calc(var(--callout-width));
height: var(--callout-height);
padding: 1rem;
margin: 0;
color: var(--text-normal);
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.callout[data-callout="cards-show"].is-collapsed {
background: none;
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before,
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
content: " ";
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before {
transform: rotate(3deg);
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
transform: rotate(-3deg);
}
.callout[data-callout="cards-show"] > .callout-title > .callout-icon,
.callout[data-callout="cards-show"] > .callout-title > .callout-fold {
display: none;
}
.callout[data-callout="cards-show"] > .callout-title > .callout-title-inner {
font-weight: normal;
font-size: 1rem;
}
.callout[data-callout="cards-show"] > .callout-content {
padding: 1rem 0;
overflow: auto;
}
.callout[data-callout="cards-show"] > .callout-content ul,
.callout[data-callout="cards-show"] > .callout-content ol {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: start;
margin: 0;
padding: .5rem 0;
}
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
margin-bottom: 0.5rem;
overflow: scroll;
text-align: justify;
list-style: none;
background-color: rgba(var(--callout-color), 0.5);
}