Obsidian里面如何实现这种显示

winwood · 2026 年3 月 3 日 05:43

看Obsidian中文帮助里面有这种显示，如何在Obsidian里面的笔记实现这种效果。

链接：导入笔记 - Obsidian 中文帮助 - Obsidian Publish

遇到的问题

Azona77 · 2026 年3 月 3 日 06:42

Minimal主题的cards样式可以有类似的效果，详见：

Cards - Minimal Documentation

mggactusnm · 2026 年3 月 3 日 07:00

这个是 Obsidian 发布服务的网站显示效果

如果你想要达成这个显示效果，首先使用这个 publish.css 文件

github.com

obsidianmd/obsidian-help/blob/master/zh/publish.css

.theme-dark {
    --color-base-00: #151515;
    --color-base-20: #222222;
}

img {
    border-radius: 4px;
}

.theme-dark img[src*="lucide"],
.theme-dark img[src*="obsidian-icon"] {
    filter: invert(1);
}

span[src$="#interface"] img,
img[src$="#interface"] {
    border: 1px solid var(--background-modifier-border);
    box-shadow: 0px 0.5px 0.9px rgba(0, 0, 0, 0.021),
    0px 1.3px 2.5px rgba(0, 0, 0, 0.03),
    0px 3px 6px rgba(0, 0, 0, 0.039),

This file has been truncated. show original

然后，写下如下的文件内容

---
cssclasses:
  - list-cards
---

- <span class="icon-app icon-notion"></span> [[从 Notion 中导入笔记|Notion]]
- <span class="icon-app icon-roam"></span> [[从 Roam Research 中导入笔记|Roam Research]]

winwood · 2026 年3 月 3 日 08:56

非常感谢已解决

Obsidian里面如何实现这种显示

链接： 导入笔记 - Obsidian 中文帮助 - Obsidian Publish

遇到的问题

链接：导入笔记 - Obsidian 中文帮助 - Obsidian Publish